/* ═══════════════════════════════════════════════════════════════════════════
   Mi Ciudad App · Carrito, checkout, pedidos y recompensas (mobile-first)
   Paleta: naranja #F28C28 · navy #232333 · verde WhatsApp #25D366
═══════════════════════════════════════════════════════════════════════════ */
:root {
  --mca-orange: #F28C28; --mca-orange-dark: #dd7511; --mca-orange-soft: #fff4e8;
  --mca-ink: #232333; --mca-text: #43454e; --mca-gray: #6b6e76; --mca-line: #e8e9ee; --mca-bg: #f6f7fa;
  --mca-green: #25D366; --mca-green-dark: #1ebe5b; --mca-ok: #1e9e63; --mca-warn: #b45309; --mca-warn-soft: #fbebd3; --mca-bad: #c8322b;
  --mca-radius: 16px; --mca-shadow: 0 10px 30px rgba(35,35,51,.10);
}
.mca-page .mca-container { max-width: 760px; padding-bottom: 120px; }
.mca-lock { overflow: hidden; }
.mca-page-head { padding: 12px 0 6px; }
.mca-eyebrow { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mca-orange-dark); margin-bottom: 4px; }
.mca-h1 { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2rem); font-weight: 800; color: var(--mca-ink); letter-spacing: -.02em; margin: 0 0 6px; line-height: 1.15; }
.mca-h2 { font-size: 1.1rem; font-weight: 800; color: var(--mca-ink); margin: 22px 0 10px; }
.mca-sub { color: var(--mca-text); margin: 0 0 6px; font-size: .98rem; }
.mca-muted { color: var(--mca-gray); }
.mca-small { font-size: .85rem; }
.mca-link { color: var(--mca-orange-dark); font-weight: 600; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.mca-link:hover { text-decoration: underline; }
.mca-back { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; color: var(--mca-gray); text-decoration: none; }
.mca-back::before { content: "←"; }

/* Botones */
.mca-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 18px; border-radius: 14px; font-weight: 700; font-size: .95rem; border: 1.5px solid transparent; cursor: pointer; text-decoration: none !important; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; -webkit-tap-highlight-color: transparent; }
.mca-btn:active { transform: scale(.98); }
.mca-btn-primary { background: var(--mca-orange); color: #fff !important; box-shadow: 0 8px 22px rgba(242,140,40,.32); }
.mca-btn-primary:hover { background: var(--mca-orange-dark); color: #fff; }
.mca-btn-primary:disabled { opacity: .7; cursor: wait; transform: none; }
.mca-btn-ghost { background: #fff; color: var(--mca-ink) !important; border-color: var(--mca-line); }
.mca-btn-ghost:hover { border-color: var(--mca-ink); }
.mca-btn-wa { background: var(--mca-green); color: #fff !important; box-shadow: 0 8px 22px rgba(37,211,102,.3); }
.mca-btn-wa:hover { background: var(--mca-green-dark); }
.mca-btn-lg { min-height: 52px; font-size: 1rem; }
.mca-icon-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--mca-line); background: #fff; color: var(--mca-gray); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.mca-icon-btn:hover { color: var(--mca-ink); border-color: var(--mca-ink); }
.mca-btn:focus-visible, .mca-icon-btn:focus-visible, .mca-option:focus-visible, .mca-add:focus-visible, .mca-qty-btn:focus-visible { outline: 3px solid rgba(242,140,40,.45); outline-offset: 2px; }

/* Agregar / cantidad */
.mca-add-wrap { display: flex; align-items: center; margin-top: 8px; }
.mca-add { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 12px; border: 0; background: var(--mca-orange); color: #fff; font-weight: 700; font-size: .9rem; cursor: pointer; box-shadow: 0 6px 16px rgba(242,140,40,.28); transition: transform .15s ease, background .15s ease; }
.mca-add:hover { background: var(--mca-orange-dark); }
.mca-add:active { transform: scale(.96); }
.mca-unavailable { display: inline-block; margin-top: 8px; padding: 6px 10px; border-radius: 10px; background: #f1f2f6; color: var(--mca-gray); font-size: .8rem; font-weight: 700; }
.mca-qty { display: inline-flex; align-items: center; gap: 2px; background: #fff; border: 1.5px solid var(--mca-orange); border-radius: 12px; padding: 2px; }
.mca-qty-btn { width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--mca-orange-dark); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.mca-qty-btn:hover { background: var(--mca-orange-soft); }
.mca-qty-val { min-width: 26px; text-align: center; font-weight: 800; color: var(--mca-ink); font-variant-numeric: tabular-nums; }
.dir-fp-card .mca-add-wrap { padding: 0 12px 12px; margin-top: 0; }
.dir-fp-card .mca-add { width: 100%; justify-content: center; }
.dir-fp-card .mca-qty { width: 100%; justify-content: space-between; }
.dir-menu-card .mca-add-wrap { justify-content: flex-end; }

/* Barra flotante del carrito */
.mca-cart-bar { position: fixed; left: 12px; right: 12px; bottom: 76px; z-index: 1056; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px 8px 10px; border: 0; border-radius: 18px; background: var(--mca-ink); color: #fff; box-shadow: 0 14px 36px rgba(35,35,51,.35); cursor: pointer; text-align: left; transform: translateY(0); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.mca-cart-bar[hidden] { display: none; }
.mca-cart-bar.is-bump { transform: translateY(-4px) scale(1.01); }
.mca-cart-bar-ico { position: relative; width: 40px; height: 40px; border-radius: 12px; background: var(--mca-orange); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; }
.mca-cart-bar-count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #fff; color: var(--mca-ink); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--mca-ink); }
.mca-cart-bar-text { flex: 1; font-weight: 700; font-size: .95rem; }
.mca-cart-bar-total { font-weight: 800; font-size: 1.05rem; color: #FFB366; font-variant-numeric: tabular-nums; }
@media (min-width: 992px) { .mca-cart-bar { left: auto; right: 28px; bottom: 28px; width: 340px; } }
.mca-has-bar .dir-feedback-fab { transform: translateY(-64px); }
.mca-fly { position: fixed; left: 0; top: 0; z-index: 1100; width: 28px; height: 28px; border-radius: 50%; background: var(--mca-orange); color: #fff; display: flex; align-items: center; justify-content: center; pointer-events: none; will-change: transform, opacity; }

/* Bottom sheet / modal */
.mca-sheet { position: fixed; inset: 0; z-index: 1060; }
.mca-sheet[hidden] { display: none; }
.mca-sheet-backdrop { position: absolute; inset: 0; background: rgba(20,20,31,.45); opacity: 0; transition: opacity .25s ease; }
.mca-sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; display: flex; flex-direction: column; background: #fff; border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgba(35,35,51,.25); transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.mca-sheet.is-open .mca-sheet-backdrop { opacity: 1; }
.mca-sheet.is-open .mca-sheet-panel { transform: translateY(0); }
.mca-sheet-grip { width: 42px; height: 5px; border-radius: 3px; background: #d9dbe3; margin: 10px auto 4px; }
.mca-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 18px 10px; }
.mca-sheet-head h3 { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--mca-ink); }
.mca-sheet-head .mca-icon-btn svg { transform: rotate(45deg); }
.mca-sheet-body { overflow: auto; padding: 0 16px 12px; -webkit-overflow-scrolling: touch; }
.mca-sheet-foot { border-top: 1px solid var(--mca-line); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; }
.mca-sheet-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: 700; color: var(--mca-text); }
.mca-sheet-total b { font-size: 1.2rem; color: var(--mca-ink); }
.mca-sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mca-sheet-compact .mca-sheet-panel, .mca-sheet-panel.mca-sheet-compact { max-height: none; }
@media (min-width: 768px) {
  .mca-sheet-panel { left: 50%; right: auto; bottom: auto; top: 50%; width: min(560px, 94vw); max-height: 86vh; border-radius: 22px; transform: translate(-50%, -46%); opacity: 0; transition: transform .25s ease, opacity .25s ease; }
  .mca-sheet.is-open .mca-sheet-panel { transform: translate(-50%, -50%); opacity: 1; }
  .mca-sheet-grip { display: none; }
  .mca-sheet-foot { border-radius: 0 0 22px 22px; }
}
.mca-empty { text-align: center; color: var(--mca-gray); padding: 24px 0; }

/* Grupos por negocio */
.mca-group { background: #fff; border: 1px solid var(--mca-line); border-radius: var(--mca-radius); margin: 12px 0; overflow: hidden; }
.mca-group-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--mca-bg); color: var(--mca-orange-dark); font-weight: 800; }
.mca-group-head a { color: var(--mca-ink); text-decoration: none; flex: 1; }
.mca-group-items { list-style: none; margin: 0; padding: 0; }
.mca-item { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--mca-line); align-items: start; animation: mcaIn .25s ease both; }
.mca-item-img { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; background: var(--mca-bg); display: inline-flex; align-items: center; justify-content: center; color: var(--mca-gray); }
.mca-item-body strong { display: block; color: var(--mca-ink); font-size: .95rem; line-height: 1.25; }
.mca-item-unit { font-size: .8rem; color: var(--mca-gray); }
.mca-note-field { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--mca-gray); }
.mca-note-field input { flex: 1; border: 1px dashed #cfd2db; border-radius: 10px; padding: 6px 10px; font-size: .85rem; min-height: 36px; background: #fff; }
.mca-note-field input:focus { outline: none; border-color: var(--mca-orange); border-style: solid; }
.mca-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.mca-item-right b { color: var(--mca-ink); font-variant-numeric: tabular-nums; }
.mca-group-foot { display: flex; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--mca-line); font-weight: 700; color: var(--mca-text); }
.mca-group-foot b { color: var(--mca-ink); }
.mca-cart-total { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; background: var(--mca-ink); color: #fff; border-radius: var(--mca-radius); margin-top: 14px; font-weight: 700; }
.mca-cart-total b { font-size: 1.35rem; color: #FFB366; }
.mca-multi-hint, .mca-warn-box p, .mca-important { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--mca-warn-soft); color: var(--mca-warn); font-size: .88rem; margin: 10px 0; }
.mca-important b { color: var(--mca-warn); }
.mca-error-box { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #fbe4e2; color: var(--mca-bad); font-size: .9rem; margin: 10px 0; }
.mca-warn-box { margin: 8px 0; }

/* Checkout */
.mca-steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 10px 0 0; overflow-x: auto; }
.mca-steps li { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--mca-gray); white-space: nowrap; padding: 6px 10px 6px 6px; border-radius: 999px; background: #fff; border: 1px solid var(--mca-line); }
.mca-steps li span { width: 22px; height: 22px; border-radius: 50%; background: #e9eaf0; color: var(--mca-gray); display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; }
.mca-steps li.is-active { color: var(--mca-ink); border-color: var(--mca-orange); }
.mca-steps li.is-active span, .mca-steps li.is-done span { background: var(--mca-orange); color: #fff; }
.mca-card { background: #fff; border: 1px solid var(--mca-line); border-radius: var(--mca-radius); padding: 16px; margin: 12px 0; animation: mcaIn .3s ease both; }
.mca-card-title { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 800; color: var(--mca-ink); margin: 0 0 12px; flex-wrap: wrap; }
.mca-card-title small { font-weight: 600; color: var(--mca-gray); font-size: .82rem; margin-left: auto; }
.mca-step-n { width: 26px; height: 26px; border-radius: 50%; background: var(--mca-orange); color: #fff; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 26px; }
.mca-step-n-sm { width: 22px; height: 22px; flex-basis: 22px; font-size: .72rem; }
.mca-field { margin-bottom: 12px; }
.mca-field label { display: block; font-weight: 700; font-size: .85rem; color: var(--mca-ink); margin-bottom: 5px; }
.mca-field input, .mca-field textarea { width: 100%; min-height: 48px; border: 1.5px solid #d8dbe3; border-radius: 12px; padding: 10px 14px; font-size: 1rem; color: var(--mca-ink); background: #fff; }
.mca-field textarea { min-height: 64px; resize: vertical; }
.mca-field input:focus, .mca-field textarea:focus { outline: none; border-color: var(--mca-orange); box-shadow: 0 0 0 3px rgba(242,140,40,.15); }
.mca-field input.is-invalid { border-color: var(--mca-bad); }
.mca-field-err { display: block; min-height: 0; color: var(--mca-bad); font-size: .8rem; margin-top: 4px; font-weight: 600; }
.mca-phone { display: flex; align-items: stretch; }
.mca-phone-prefix { display: inline-flex; align-items: center; padding: 0 12px; border: 1.5px solid #d8dbe3; border-right: 0; border-radius: 12px 0 0 12px; background: var(--mca-bg); font-weight: 800; color: var(--mca-ink); }
.mca-phone input { border-radius: 0 12px 12px 0 !important; }
.mca-label { font-weight: 800; font-size: .9rem; color: var(--mca-ink); margin: 12px 0 8px; display: flex; align-items: center; gap: 6px; }
.mca-label small { font-weight: 600; color: var(--mca-gray); }
.mca-mini-lines { list-style: none; margin: 0 0 6px; padding: 0; font-size: .9rem; color: var(--mca-text); }
.mca-mini-lines li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--mca-line); }
.mca-mini-lines b { color: var(--mca-ink); font-variant-numeric: tabular-nums; }
.mca-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mca-options-2 { grid-template-columns: repeat(2, 1fr); }
.mca-option { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 10px 6px; border: 1.5px solid var(--mca-line); border-radius: 14px; background: #fff; color: var(--mca-text); font-weight: 700; font-size: .82rem; line-height: 1.15; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.mca-option svg { color: var(--mca-gray); transition: color .15s ease; }
.mca-option:hover { border-color: #c9ccd6; }
.mca-option.is-on { border-color: var(--mca-orange); background: var(--mca-orange-soft); color: var(--mca-ink); box-shadow: 0 0 0 3px rgba(242,140,40,.15); }
.mca-option.is-on svg { color: var(--mca-orange-dark); }
.mca-option:active { transform: scale(.97); }
@media (max-width: 359px) { .mca-options { grid-template-columns: 1fr 1fr; } }
.mca-delivery, .mca-transfer, .mca-proof { margin-top: 10px; }
.mca-accounts { display: grid; gap: 8px; }
.mca-account { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1.5px solid var(--mca-line); border-radius: 12px; cursor: pointer; }
.mca-account.is-on { border-color: var(--mca-orange); background: var(--mca-orange-soft); }
.mca-account input { accent-color: var(--mca-orange); width: 18px; height: 18px; }
.mca-account-body strong { display: block; color: var(--mca-ink); font-size: .92rem; }
.mca-account-body span { display: block; font-size: .8rem; color: var(--mca-gray); }
.mca-account-body code { font-size: .95rem; color: var(--mca-ink); background: transparent; padding: 0; letter-spacing: .04em; }
.mca-proof-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; border: 1.5px dashed #cfd2db; border-radius: 12px; }
.mca-proof-box img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--mca-line); }
.mca-proof-box.has-img { border-style: solid; border-color: var(--mca-ok); }
.mca-proof-status { font-size: .82rem; color: var(--mca-gray); flex-basis: 100%; }
.mca-field-notes { margin-top: 12px; }
.mca-cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1045; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--mca-line); box-shadow: 0 -8px 30px rgba(35,35,51,.08); }
.mca-cta-bar[hidden] { display: none; }
.mca-cta-total small { display: block; font-size: .72rem; color: var(--mca-gray); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.mca-cta-total b { font-size: 1.2rem; color: var(--mca-ink); }
.mca-cta-static { position: static; box-shadow: none; border: 0; background: transparent; padding: 14px 0 0; flex-wrap: wrap; }
.mca-cta-static .mca-btn { flex: 1; }
@media (min-width: 992px) { .mca-cta-bar:not(.mca-cta-static) { left: 50%; right: auto; transform: translateX(-50%); width: min(760px, 96vw); bottom: 16px; border-radius: 18px; border: 1px solid var(--mca-line); } }
.mca-page[data-mca-page="checkout"] .dir-bnav, .mca-page[data-mca-page="checkout"] .dir-feedback-fab { display: none !important; }
.mca-spinner { width: 20px; height: 20px; border: 3px solid rgba(242,140,40,.25); border-top-color: var(--mca-orange); border-radius: 50%; display: inline-block; animation: mcaSpin .8s linear infinite; vertical-align: middle; }
.mca-spinner-sm { width: 16px; height: 16px; border-width: 2px; border-color: rgba(255,255,255,.4); border-top-color: #fff; }
.mca-loading { display: flex; align-items: center; gap: 10px; color: var(--mca-gray); padding: 30px 0; justify-content: center; }
.mca-review-cust { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--mca-bg); border-radius: 12px; margin: 4px 0 10px; color: var(--mca-text); }
.mca-review-biz { border: 1px solid var(--mca-line); border-radius: 14px; padding: 12px; margin: 10px 0; }
.mca-review-biz h4 { font-size: 1rem; font-weight: 800; color: var(--mca-ink); margin: 0 0 8px; }
.mca-review-biz ul { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.mca-review-biz li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.mca-review-row { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--mca-line); margin-top: 6px; font-weight: 700; }
.mca-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0 0; font-size: .9rem; }
.mca-dl dt { color: var(--mca-gray); font-weight: 600; }
.mca-dl dd { margin: 0; color: var(--mca-ink); }
.mca-review-note { font-size: .82rem; color: var(--mca-warn); margin: 0 0 8px; }

/* Éxito / envío */
.mca-success { text-align: center; padding: 18px 0 8px; opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.mca-success.is-in { opacity: 1; transform: none; }
.mca-success-ico { width: 74px; height: 74px; border-radius: 50%; background: var(--mca-ok); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; box-shadow: 0 12px 30px rgba(30,158,99,.3); animation: mcaPop .6s cubic-bezier(.2,.8,.2,1) both; }
.mca-send-list { display: grid; gap: 12px; margin-top: 10px; }
.mca-send-card { background: #fff; border: 1px solid var(--mca-line); border-radius: var(--mca-radius); padding: 14px; transition: border-color .3s ease, box-shadow .3s ease; }
.mca-send-card.is-sent { border-color: var(--mca-ok); box-shadow: 0 0 0 3px rgba(30,158,99,.12); }
.mca-send-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mca-biz-avatar { width: 44px; height: 44px; border-radius: 12px; background: var(--mca-bg); display: inline-flex; align-items: center; justify-content: center; color: var(--mca-orange-dark); overflow: hidden; flex: 0 0 44px; }
.mca-biz-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mca-send-title { flex: 1; min-width: 160px; }
.mca-send-title strong { display: block; color: var(--mca-ink); }
.mca-send-title span { font-size: .82rem; color: var(--mca-gray); }
.mca-state { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.mca-state[hidden] { display: none; }
.mca-state-sent { background: #dff3e8; color: var(--mca-ok); }
.mca-state-pending { background: var(--mca-warn-soft); color: var(--mca-warn); }
.mca-state-cancel { background: #f1f2f6; color: var(--mca-gray); }
.mca-send-actions { display: grid; gap: 8px; margin-top: 12px; }
.mca-send-actions .mca-link { justify-self: start; font-size: .85rem; }
.mca-warn { display: flex; gap: 8px; align-items: flex-start; font-size: .85rem; color: var(--mca-warn); background: var(--mca-warn-soft); padding: 10px 12px; border-radius: 12px; margin: 0; }
@media (min-width: 560px) { .mca-send-actions { grid-template-columns: 1fr 1fr; } .mca-send-actions .mca-link { grid-column: 1 / -1; } }
.mca-after-send { margin-top: 18px; padding: 16px; border-radius: var(--mca-radius); background: #dff3e8; color: #135c3b; animation: mcaIn .4s ease both; }
.mca-after-send h2 { font-size: 1.05rem; font-weight: 800; margin: 0 0 6px; }
.mca-after-send p { margin: 0; font-size: .9rem; }
.mca-ask { padding: 8px 20px calc(20px + env(safe-area-inset-bottom)); text-align: center; }
.mca-ask-ico { width: 56px; height: 56px; border-radius: 50%; background: var(--mca-green); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.mca-ask h3 { font-size: 1.1rem; font-weight: 800; color: var(--mca-ink); margin: 0 0 6px; }
.mca-ask p { font-size: .88rem; color: var(--mca-gray); margin: 0 0 14px; }
.mca-ask .mca-sheet-actions { grid-template-columns: 1fr; }
.mca-invite { margin-top: 22px; padding: 20px; border-radius: 20px; background: linear-gradient(135deg, #232333 0%, #2b2b3d 100%); color: #fff; text-align: center; }
.mca-invite-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--mca-orange); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.mca-invite h3 { color: #fff; font-size: 1.15rem; font-weight: 800; margin: 0 0 6px; }
.mca-invite p { color: rgba(255,255,255,.8); font-size: .9rem; margin: 0 0 12px; }
.mca-invite .mca-link { color: #FFB366; }
.mca-points-hint { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; padding: 12px; border-radius: 12px; background: var(--mca-orange-soft); color: var(--mca-text); font-size: .88rem; }
.mca-points-hint svg { color: var(--mca-orange-dark); flex: 0 0 auto; }
.mca-points-hint a { color: var(--mca-orange-dark); font-weight: 700; }

/* Detalle de pedido */
.mca-lines { list-style: none; margin: 0; padding: 0; }
.mca-lines li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--mca-line); align-items: start; }
.mca-line-qty { font-weight: 800; color: var(--mca-orange-dark); }
.mca-line-name { color: var(--mca-ink); }
.mca-line-name small { display: block; color: var(--mca-gray); }
.mca-total-row { display: flex; justify-content: space-between; padding: 12px 0 0; font-weight: 800; color: var(--mca-ink); font-size: 1.05rem; }
.mca-note-box { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--mca-bg); color: var(--mca-text); font-size: .85rem; }
.mca-actions-row { display: grid; gap: 10px; margin: 14px 0; }
@media (min-width: 560px) { .mca-actions-row { grid-template-columns: 1fr 1fr; } }

/* Cuenta */
.mca-hero-card { position: relative; overflow: hidden; padding: 22px 20px; border-radius: 22px; background: linear-gradient(135deg, #232333 0%, #34344a 100%); color: #fff; margin-top: 12px; }
.mca-hero-card .mca-h1, .mca-rw-hero .mca-h1 { color: #fff; }
.mca-hero-card .mca-sub, .mca-rw-hero .mca-sub { color: rgba(255,255,255,.85); }
.mca-hero-card .mca-eyebrow, .mca-rw-hero .mca-eyebrow { color: #FFB366; }
.mca-points-big { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 10px; }
.mca-points-big .mca-count { font-size: clamp(2.4rem, 2rem + 3vw, 3.4rem); font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.mca-points-big small { font-weight: 700; color: rgba(255,255,255,.7); }
.mca-progress { height: 10px; border-radius: 6px; background: rgba(255,255,255,.18); overflow: hidden; margin: 6px 0 10px; }
.mca-progress-bar { height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--mca-orange), #FFB366); transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.mca-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.mca-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--mca-line); color: var(--mca-ink); text-decoration: none !important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.mca-tile svg { color: var(--mca-orange-dark); margin-bottom: 4px; }
.mca-tile strong { font-size: .95rem; }
.mca-tile span { font-size: .8rem; color: var(--mca-gray); }
.mca-tile:hover { transform: translateY(-2px); box-shadow: var(--mca-shadow); border-color: var(--mca-orange); }
.mca-order-list { display: grid; gap: 10px; }
.mca-order-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--mca-line); text-decoration: none !important; color: var(--mca-ink); transition: transform .18s ease, box-shadow .18s ease; }
.mca-order-row:hover { transform: translateY(-2px); box-shadow: var(--mca-shadow); }
.mca-order-row-body strong { display: block; font-size: .92rem; }
.mca-order-row-body span { display: block; font-size: .85rem; color: var(--mca-text); }
.mca-order-row-body small { color: var(--mca-gray); }
.mca-order-row-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mca-order-row-right b { font-variant-numeric: tabular-nums; }
.mca-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0; color: var(--mca-gray); font-size: .85rem; }

/* Recompensas */
.mca-rw-hero { position: relative; overflow: hidden; padding: 22px 20px 26px; border-radius: 22px; background: linear-gradient(135deg, #232333 0%, #2b2b3d 60%, #3a2a18 100%); color: #fff; margin-top: 12px; }
.mca-rw-skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 90px; color: #fff; pointer-events: none; }
.mca-rw-next { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.mca-rw-next div { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 8px 10px; }
.mca-rw-next small { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.65); font-weight: 700; }
.mca-rw-next b { font-size: 1rem; color: #FFB366; font-variant-numeric: tabular-nums; }
.mca-path-card { padding-bottom: 8px; }
.mca-path-scroll { overflow-x: auto; overflow-y: hidden; padding: 26px 0 44px; -webkit-overflow-scrolling: touch; }
.mca-path { position: relative; height: 40px; width: 1500px; margin: 0 24px; }
@media (min-width: 992px) { .mca-path { width: 1700px; } }
.mca-path-track { position: absolute; left: 0; right: 0; top: 18px; height: 6px; border-radius: 3px; background: #e9eaf0; overflow: hidden; }
.mca-path-fill { height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--mca-orange), #FFB366); transition: width 1.4s cubic-bezier(.2,.8,.2,1); }
.mca-path-node { position: absolute; top: 8px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mca-path-node.is-start { left: 0; }
.mca-path-dot { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid #d9dbe3; display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: transform .3s ease, background .3s ease, border-color .3s ease; }
.mca-path-node.is-unlocked .mca-path-dot, .mca-path-node.is-redeemed .mca-path-dot { background: var(--mca-orange); border-color: var(--mca-orange); }
.mca-path-node.is-next .mca-path-dot { border-color: var(--mca-orange); background: #fff; box-shadow: 0 0 0 6px rgba(242,140,40,.18); animation: mcaPulse 1.8s ease-in-out infinite; }
.mca-path-node.is-start .mca-path-dot { width: 14px; height: 14px; margin-top: 5px; border-color: var(--mca-orange); background: var(--mca-orange); }
.mca-path-lbl { font-size: .72rem; font-weight: 800; color: var(--mca-gray); white-space: nowrap; }
.mca-path-node.is-next .mca-path-lbl, .mca-path-node.is-unlocked .mca-path-lbl { color: var(--mca-ink); }
.mca-path-you { position: absolute; top: -26px; transform: translateX(-50%); }
.mca-path-you span { display: inline-block; background: var(--mca-ink); color: #fff; font-size: .68rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; white-space: nowrap; position: relative; }
.mca-path-you span::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; background: var(--mca-ink); transform: translateX(-50%) rotate(45deg); }
.mca-levels { display: grid; gap: 10px; }
@media (min-width: 768px) { .mca-levels { grid-template-columns: 1fr 1fr; } }
.mca-level { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--mca-line); position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.mca-level::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #d9dbe3; }
.mca-level-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--mca-bg); display: inline-flex; align-items: center; justify-content: center; color: var(--mca-gray); }
.mca-level-ico svg { width: 22px; height: 22px; }
.mca-level-body { min-width: 0; }
.mca-level-pts { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mca-gray); }
.mca-level-body strong { display: block; color: var(--mca-ink); font-size: .98rem; margin: 2px 0 4px; }
.mca-level-body p { margin: 0; font-size: .86rem; color: var(--mca-text); }
.mca-level-body small { display: block; color: var(--mca-gray); font-size: .78rem; margin-top: 4px; }
.mca-level-state { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--mca-gray); }
.mca-level.is-locked { opacity: .72; }
.mca-level.is-next { border-color: var(--mca-orange); box-shadow: 0 10px 28px rgba(242,140,40,.15); }
.mca-level.is-next::before, .mca-level.is-unlocked::before, .mca-level.is-redeemed::before { background: var(--mca-orange); }
.mca-level.is-next .mca-level-ico, .mca-level.is-unlocked .mca-level-ico { background: var(--mca-orange-soft); color: var(--mca-orange-dark); }
.mca-level.is-unlocked { animation: mcaGlow 1.2s ease both; }
.mca-level.is-redeemed .mca-level-ico { background: #dff3e8; color: var(--mca-ok); }
.mca-chip-next { background: var(--mca-orange-soft); color: var(--mca-orange-dark); padding: 3px 10px; border-radius: 999px; }
.mca-chip-ok { background: #dff3e8; color: var(--mca-ok); padding: 3px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; }
.mca-chip-done { background: #e9eaf0; color: var(--mca-ink); padding: 3px 10px; border-radius: 999px; }
.mca-ledger { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mca-ledger li { display: grid; grid-template-columns: 82px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--mca-line); }
.mca-ledger-pts { font-weight: 900; color: var(--mca-ok); font-variant-numeric: tabular-nums; }
.mca-ledger-pts.is-neg { color: var(--mca-bad); }
.mca-ledger li.is-pending .mca-ledger-pts { color: var(--mca-warn); }
.mca-ledger li.is-rejected .mca-ledger-pts { color: var(--mca-gray); text-decoration: line-through; }
.mca-ledger-desc { font-size: .88rem; color: var(--mca-ink); }
.mca-ledger-desc a { color: var(--mca-ink); text-decoration: none; }
.mca-ledger-desc small { display: block; color: var(--mca-gray); }
.mca-levelup { text-align: center; padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); position: relative; overflow: hidden; }
.mca-levelup-ico { width: 72px; height: 72px; border-radius: 50%; background: var(--mca-orange); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin: 6px 0 8px; animation: mcaPop .7s cubic-bezier(.2,.8,.2,1) both; box-shadow: 0 14px 34px rgba(242,140,40,.4); }
.mca-levelup h3 { font-size: 1.25rem; font-weight: 900; color: var(--mca-ink); margin: 0 0 6px; }
.mca-levelup p { margin: 0 0 6px; color: var(--mca-text); }
.mca-levelup .mca-btn { margin-top: 12px; width: 100%; }
.mca-confetti { position: absolute; inset: 0; pointer-events: none; }
.mca-confetti i { position: absolute; top: -10px; width: 8px; height: 14px; border-radius: 2px; background: var(--mca-orange); opacity: 0; animation: mcaConfetti 1.8s ease-out forwards; }
.mca-confetti i:nth-child(2n) { background: var(--mca-ink); } .mca-confetti i:nth-child(3n) { background: #FFB366; } .mca-confetti i:nth-child(4n) { background: var(--mca-ok); }
.mca-confetti i:nth-child(1) { left: 6%; animation-delay: .05s } .mca-confetti i:nth-child(2) { left: 14%; animation-delay: .25s } .mca-confetti i:nth-child(3) { left: 22%; animation-delay: .1s } .mca-confetti i:nth-child(4) { left: 31%; animation-delay: .35s } .mca-confetti i:nth-child(5) { left: 40%; animation-delay: .15s } .mca-confetti i:nth-child(6) { left: 49%; animation-delay: .4s } .mca-confetti i:nth-child(7) { left: 58%; animation-delay: .2s } .mca-confetti i:nth-child(8) { left: 67%; animation-delay: .45s } .mca-confetti i:nth-child(9) { left: 76%; animation-delay: .1s } .mca-confetti i:nth-child(10) { left: 84%; animation-delay: .3s } .mca-confetti i:nth-child(11) { left: 92%; animation-delay: .5s } .mca-confetti i:nth-child(12) { left: 50%; animation-delay: .6s }

/* Toast */
.mca-toast { position: fixed; left: 50%; bottom: 140px; z-index: 1070; transform: translate(-50%, 12px); opacity: 0; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--mca-ink); color: #fff; font-weight: 600; font-size: .9rem; box-shadow: 0 12px 30px rgba(35,35,51,.3); transition: transform .25s ease, opacity .25s ease; max-width: min(92vw, 420px); }
.mca-toast[hidden] { display: none; }
.mca-toast.is-in { transform: translate(-50%, 0); opacity: 1; }
.mca-toast svg { color: #FFB366; }
.mca-toast-btn { border: 0; background: var(--mca-orange); color: #fff; font-weight: 800; padding: 6px 12px; border-radius: 10px; cursor: pointer; white-space: nowrap; }

/* Animaciones */
@keyframes mcaIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mcaSpin { to { transform: rotate(360deg); } }
@keyframes mcaPop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes mcaPulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(242,140,40,.18); } 50% { box-shadow: 0 0 0 12px rgba(242,140,40,.06); } }
@keyframes mcaGlow { 0% { box-shadow: 0 0 0 0 rgba(242,140,40,.35); } 100% { box-shadow: 0 0 0 14px rgba(242,140,40,0); } }
@keyframes mcaConfetti { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(320px) rotate(540deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .mca-btn, .mca-sheet-panel, .mca-sheet-backdrop, .mca-cart-bar, .mca-progress-bar, .mca-path-fill, .mca-toast, .mca-success, .mca-tile, .mca-order-row, .mca-option, .mca-level { transition: none !important; }
  .mca-card, .mca-item, .mca-after-send, .mca-success-ico, .mca-levelup-ico, .mca-level.is-unlocked, .mca-path-node.is-next .mca-path-dot, .mca-confetti i { animation: none !important; }
  .mca-spinner { animation-duration: 1.5s; }
}


/* ── Blindaje contra el tema (modern-theme/design-system fuerzan color en p/span/a/h con !important) ── */
.mca-cart-bar, .mca-cart-bar span, .mca-cart-bar .mca-cart-bar-text { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.mca-cart-bar .mca-cart-bar-total { color: #FFB366 !important; -webkit-text-fill-color: #FFB366 !important; }
.mca-cart-bar .mca-cart-bar-count { color: #232333 !important; -webkit-text-fill-color: #232333 !important; }
.mca-toast, .mca-toast span { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.mca-toast .mca-toast-btn { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.mca-add, .mca-add span { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.mca-btn-primary, .mca-btn-primary span, .mca-btn-wa, .mca-btn-wa span { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.mca-btn-ghost, .mca-btn-ghost span { color: #232333 !important; -webkit-text-fill-color: #232333 !important; }
.mca-step-n, .mca-steps li.is-active span, .mca-steps li.is-done span, .mca-path-you span, .mca-cart-total, .mca-cart-total span,
.mca-invite, .mca-invite h3, .mca-hero-card, .mca-hero-card h1, .mca-hero-card .mca-count,
.mca-rw-hero, .mca-rw-hero h1, .mca-rw-hero .mca-count, .mca-success-ico, .mca-levelup-ico, .mca-ask-ico, .mca-invite-ico, .mca-cart-bar-ico { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.mca-cart-total b, .mca-rw-next b, .mca-invite .mca-link, .mca-hero-card .mca-eyebrow, .mca-rw-hero .mca-eyebrow { color: #FFB366 !important; -webkit-text-fill-color: #FFB366 !important; }
.mca-hero-card .mca-sub, .mca-rw-hero .mca-sub, .mca-points-big small, .mca-rw-next small, .mca-invite p { color: rgba(255,255,255,.85) !important; -webkit-text-fill-color: rgba(255,255,255,.85) !important; }
.mca-page .mca-h1, .mca-page .mca-h2, .mca-page .mca-card-title { color: #232333 !important; -webkit-text-fill-color: #232333 !important; }
.mca-hero-card .mca-h1, .mca-rw-hero .mca-h1 { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.mca-state-sent { color: #1e9e63 !important; -webkit-text-fill-color: #1e9e63 !important; }
.mca-state-pending { color: #b45309 !important; -webkit-text-fill-color: #b45309 !important; }
.mca-after-send h2, .mca-after-send p { color: #135c3b !important; -webkit-text-fill-color: #135c3b !important; }
.mca-item-body strong, .mca-order-row strong, .mca-tile strong, .mca-level-body strong, .mca-send-title strong, .mca-option span, .mca-qty-val { color: #232333 !important; -webkit-text-fill-color: #232333 !important; }


/* ── Fix 2: subtotal legible (el tema pinta <footer> oscuro: ya no se usa) y carrito responsive ── */
.mca-group-head, .mca-group-foot { background: #f6f7fa !important; color: #43454e !important; }
.mca-group-foot span, .mca-group-foot b { color: #232333 !important; -webkit-text-fill-color: #232333 !important; }
.mca-group-head a { color: #232333 !important; -webkit-text-fill-color: #232333 !important; }
.mca-item-body strong, .mca-item-right b { color: #232333 !important; -webkit-text-fill-color: #232333 !important; }
.mca-item-unit { color: #6b6e76 !important; -webkit-text-fill-color: #6b6e76 !important; }
@media (max-width: 575.98px) {
  .mca-item { grid-template-columns: 48px 1fr; }
  .mca-item-img { width: 48px; height: 48px; }
  .mca-item-right { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; padding-top: 4px; }
  .mca-note-field input { font-size: .82rem; }
  .mca-sheet-panel { max-height: 92vh; }
  .mca-sheet-body { padding: 0 12px 10px; }
  .mca-sheet-actions .mca-btn { padding: 10px 12px; font-size: .9rem; }
}
.mca-closed-badge { display: inline-block; margin-top: 8px; padding: 6px 10px; border-radius: 10px; background: #fbe4e2; color: #c8322b !important; font-size: .8rem; font-weight: 700; }


/* ── v17.0.17: errores visibles, cuenta con datos, títulos uniformes ── */
.mca-field-err { color: #c8322b !important; -webkit-text-fill-color: #c8322b !important; font-weight: 700; font-size: .84rem; }
.mca-field-err:empty { display: none; }
.mca-field-err:not(:empty) { display: block; margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: #fbe4e2; }
.mca-options.is-invalid { outline: 2px solid #c8322b; outline-offset: 4px; border-radius: 14px; }
.mca-card.is-invalid { border-color: #c8322b; box-shadow: 0 0 0 3px rgba(200,50,43,.12); }
.mca-page h1 span, .mca-page h2 span, .mca-page h3 span, .mca-page h4 span, .mca-ask h3 span, .mca-levelup h3 span { font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; font-family: inherit !important; }
.mca-ask h3 span { color: #dd7511 !important; -webkit-text-fill-color: #dd7511 !important; }
.mca-add-login { background: #232333 !important; box-shadow: 0 6px 16px rgba(35,35,51,.2); }
.mca-profile { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 8px; }
.mca-profile-row { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 12px; background: #f6f7fa; }
.mca-profile-row svg { color: #dd7511; margin-top: 2px; }
.mca-profile-row small { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6b6e76; }
.mca-profile-row span { color: #232333 !important; -webkit-text-fill-color: #232333 !important; font-weight: 600; }
.mca-profile-row .mca-muted { color: #9a9da6 !important; -webkit-text-fill-color: #9a9da6 !important; font-weight: 500; }


/* ── v17.0.17.2: tarjetas de pedido más compactas en móvil ── */
@media (max-width: 768.98px) {
  .mca-page .mca-container { padding-bottom: 130px; }
  .mca-card { padding: 14px 14px 12px; }
  .mca-card-title { font-size: 1rem; margin-bottom: 10px; }
  .mca-lines li { padding: 7px 0; }
  .mca-actions-row { gap: 8px; }
}


/* Páginas legales */
.mca-legal h2 { font-size: 1.05rem; font-weight: 800; color: #232333; margin: 18px 0 6px; }
.mca-legal h2:first-child { margin-top: 0; }
.mca-legal p, .mca-legal li { font-size: .95rem; color: #43454e; }
.mca-legal ul { padding-left: 20px; }