/* Componentes del KOFF Design System en CSS puro.
   Cada clase replica el componente React del DS (_ds_bundle.js) con los mismos tokens,
   medidas y estados, para usarlos sin React. */

/* ─── Icon (Lucide pintado con máscara, hereda currentColor) ─── */
.k-icon{display:inline-block;flex:0 0 auto;width:var(--s,20px);height:var(--s,20px);background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.i-arrow-left{--i:url(/_/icons/arrow-left.svg)} .i-arrow-right{--i:url(/_/icons/arrow-right.svg)}
.i-bike{--i:url(/_/icons/bike.svg)} .i-check{--i:url(/_/icons/check.svg)}
.i-chevron-right{--i:url(/_/icons/chevron-right.svg)} .i-circle-alert{--i:url(/_/icons/circle-alert.svg)}
.i-coffee{--i:url(/_/icons/coffee.svg)} .i-download{--i:url(/_/icons/download.svg)}
.i-eye{--i:url(/_/icons/eye.svg)} .i-facebook{--i:url(/_/icons/facebook.svg)}
.i-fingerprint{--i:url(/_/icons/fingerprint.svg)} .i-gift{--i:url(/_/icons/gift.svg)}
.i-history{--i:url(/_/icons/history.svg)} .i-instagram{--i:url(/_/icons/instagram.svg)}
.i-key-round{--i:url(/_/icons/key-round.svg)} .i-lock{--i:url(/_/icons/lock.svg)}
.i-log-out{--i:url(/_/icons/log-out.svg)} .i-mail{--i:url(/_/icons/mail.svg)}
.i-map-pin{--i:url(/_/icons/map-pin.svg)} .i-message-circle{--i:url(/_/icons/message-circle.svg)}
.i-minus{--i:url(/_/icons/minus.svg)} .i-music-2{--i:url(/_/icons/music-2.svg)}
.i-phone{--i:url(/_/icons/phone.svg)} .i-plus{--i:url(/_/icons/plus.svg)}
.i-printer{--i:url(/_/icons/printer.svg)} .i-receipt{--i:url(/_/icons/receipt.svg)}
.i-refresh-cw{--i:url(/_/icons/refresh-cw.svg)} .i-search{--i:url(/_/icons/search.svg)}
.i-settings{--i:url(/_/icons/settings.svg)} .i-shield-check{--i:url(/_/icons/shield-check.svg)}
.i-smartphone{--i:url(/_/icons/smartphone.svg)} .i-stamp{--i:url(/_/icons/stamp.svg)}
.i-trash-2{--i:url(/_/icons/trash-2.svg)} .i-users{--i:url(/_/icons/users.svg)}
.i-user{--i:url(/_/icons/user.svg)} .i-x{--i:url(/_/icons/x.svg)}

/* ─── Button ─── */
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 22px;
  font-family:var(--font-body);font-weight:600;font-size:15px;letter-spacing:.01em;border-radius:var(--radius-pill);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--duration-fast) var(--ease-soft),transform var(--duration-fast) var(--ease-soft),opacity var(--duration-fast) var(--ease-soft);
  background:var(--action-primary-bg);color:var(--action-primary-fg);border:2px solid var(--action-primary-bg);--s:20px}
.k-btn:hover{background:var(--action-primary-bg-hover);border-color:var(--action-primary-bg-hover);opacity:1}
.k-btn:active{transform:scale(var(--press-scale))}
.k-btn--sm{height:36px;padding:0 16px;font-size:13px;gap:8px;--s:16px}
.k-btn--lg{height:56px;padding:0 30px;font-size:17px;gap:12px;--s:22px}
.k-btn--secondary{background:transparent;color:var(--action-secondary-fg);border-color:var(--action-secondary-border)}
.k-btn--secondary:hover{background:var(--action-ghost-bg-hover);border-color:var(--action-secondary-border)}
.k-btn--ghost{background:transparent;color:var(--text-body);border-color:transparent}
.k-btn--ghost:hover{background:var(--action-ghost-bg-hover);border-color:transparent}
.k-btn--inverse{background:var(--koff-paper);color:var(--koff-ink);border-color:var(--koff-paper)}
.k-btn--inverse:hover{background:var(--koff-paper);border-color:var(--koff-paper);opacity:.88}
.k-btn--full{display:flex;width:100%}
.k-btn:disabled,.k-btn[aria-disabled="true"]{background:var(--action-disabled-bg);color:var(--action-disabled-fg);
  border-color:var(--action-disabled-bg);cursor:not-allowed;transform:none;opacity:1}

/* ─── IconButton ─── */
.k-iconbtn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);
  cursor:pointer;transition:background var(--duration-fast) var(--ease-soft);background:transparent;color:var(--text-body);
  border:2px solid transparent;--s:20px;padding:0}
.k-iconbtn:hover{background:var(--action-ghost-bg-hover)}
.k-iconbtn--sm{width:36px;height:36px;--s:18px}
.k-iconbtn--outline{border-color:var(--line-strong)}
.k-iconbtn:disabled{cursor:not-allowed;opacity:.45}

/* ─── Input ─── */
.k-field{display:flex;flex-direction:column;gap:var(--space-2)}
.k-field__label{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.k-field__hint{font-size:13px;color:var(--text-muted)}
.k-field__hint.is-error{color:var(--feedback-danger)}
.k-input{display:flex;align-items:center;gap:var(--space-3);height:50px;padding:0 18px;background:var(--surface-card);
  border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1.5px var(--line-hairline);
  transition:box-shadow var(--duration-fast) var(--ease-soft);--s:18px;color:var(--icon-muted)}
.k-input:focus-within{box-shadow:inset 0 0 0 2px var(--koff-ink)}
.k-input.is-error{box-shadow:inset 0 0 0 1.5px var(--feedback-danger)}
.k-input input,.k-input select{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;font-size:16px;color:var(--text-body)}
.k-input:has(input:disabled){background:var(--surface-tint)}

/* ─── Tabs ─── */
.k-tabs-pill{display:inline-flex;gap:4px;padding:4px;background:var(--surface-tint);border-radius:var(--radius-pill)}
.k-tabs-pill button{height:38px;padding:0 20px;border-radius:var(--radius-pill);border:none;cursor:pointer;font-size:14px;font-weight:600;
  font-family:var(--font-body);background:transparent;color:var(--text-muted);transition:background var(--duration-fast) var(--ease-soft)}
.k-tabs-pill button[aria-pressed="true"]{background:var(--koff-ink);color:var(--koff-paper)}
.k-tabs{display:flex;gap:var(--space-6);border-bottom:1px solid var(--line-hairline);overflow-x:auto}
.k-tabs button{padding:0 0 12px;border:none;background:none;cursor:pointer;font-family:var(--font-body);font-size:13px;font-weight:600;
  letter-spacing:var(--type-label-track);text-transform:uppercase;color:var(--text-subtle);white-space:nowrap;
  transition:color var(--duration-fast) var(--ease-soft)}
.k-tabs button[aria-selected="true"]{color:var(--text-strong);box-shadow:inset 0 -2px 0 var(--koff-ink)}

/* ─── QuantityStepper ─── */
.k-stepper{display:inline-flex;align-items:center;gap:var(--space-3)}
.k-stepper button{width:40px;height:40px;border-radius:var(--radius-pill);border:1.5px solid var(--line-strong);background:transparent;
  color:var(--text-body);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;--s:16px}
.k-stepper button:disabled{cursor:not-allowed;opacity:.35}
.k-stepper output{min-width:20px;text-align:center;font-family:var(--font-display);font-weight:700;font-size:17px}
.k-stepper--sm button{width:32px;height:32px;--s:14px}
.k-stepper--sm output{font-size:15px}

/* ─── Card ─── */
.k-card{background:var(--surface-card);border:var(--border-card);box-shadow:var(--shadow-sm);border-radius:var(--radius-lg);padding:var(--space-5)}
.k-card--tint{background:var(--surface-tint);border:1px solid transparent;box-shadow:none}
.k-card--outline{background:transparent;border:var(--border-strong);box-shadow:none}
.k-card--inverse{background:var(--surface-inverse);color:var(--text-on-inverse);border:1px solid var(--surface-inverse);box-shadow:none}

/* ─── Badge ─── */
.k-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--radius-pill);font-family:var(--font-body);
  font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:var(--koff-ink);color:var(--koff-paper);--s:12px;white-space:nowrap}
.k-badge--cream{background:var(--surface-tint);color:var(--text-body)}
.k-badge--outline{background:transparent;color:var(--text-body);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.k-badge--success{background:var(--feedback-success);color:var(--koff-paper)}
.k-badge--warning{background:var(--feedback-warning);color:var(--koff-espresso)}
.k-badge--danger{background:var(--feedback-danger);color:var(--koff-paper)}

/* ─── Switch ─── */
.k-switch{display:inline-flex;align-items:center;gap:var(--space-3);cursor:pointer;font-size:15px}
.k-switch input{position:absolute;opacity:0;width:1px;height:1px}
.k-switch__track{width:48px;height:28px;border-radius:var(--radius-pill);padding:3px;display:inline-flex;background:var(--koff-sand);
  transition:background var(--duration-base) var(--ease-soft)}
.k-switch__track::after{content:"";width:22px;height:22px;border-radius:var(--radius-pill);background:var(--koff-paper);
  transition:transform var(--duration-base) var(--ease-soft)}
.k-switch input:checked+.k-switch__track{background:var(--koff-ink)}
.k-switch input:checked+.k-switch__track::after{transform:translateX(20px)}
.k-switch input:focus-visible+.k-switch__track{outline:var(--stroke-bold) solid var(--focus-ring);outline-offset:2px}

/* ─── Toast ─── */
.k-toast-host{position:fixed;left:0;right:0;bottom:24px;display:flex;justify-content:center;pointer-events:none;z-index:60;padding:0 16px}
.k-toast{display:inline-flex;align-items:center;gap:var(--space-3);padding:14px 20px;border-radius:var(--radius-pill);box-shadow:var(--shadow-md);
  font-size:15px;font-weight:500;background:var(--koff-ink);color:var(--koff-paper);--s:18px;pointer-events:auto;
  animation:k-in var(--duration-slow) var(--ease-soft)}
.k-toast--success{background:var(--feedback-success)}
.k-toast--danger{background:var(--feedback-danger)}
@keyframes k-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ─── Dialog ─── */
.k-scrim{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:var(--space-5);
  background:rgba(42,25,15,.42);backdrop-filter:blur(3px)}
.k-dialog{width:100%;max-width:460px;background:var(--surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);max-height:calc(100vh - 48px);overflow:auto}
.k-dialog__head{display:flex;align-items:flex-start;gap:var(--space-4)}
.k-dialog__head h3{flex:1;margin:0;font-family:var(--font-display);font-weight:800;font-size:24px;line-height:1.15;letter-spacing:-.01em;color:var(--text-strong)}
.k-dialog__body{font-size:16px;line-height:1.6;color:var(--text-body);display:flex;flex-direction:column;gap:var(--space-4)}
.k-dialog__foot{display:flex;gap:var(--space-3);justify-content:flex-end;padding-top:var(--space-2);flex-wrap:wrap}

/* ─── StampCard: sellos en el panel de tinta ─── */
.k-stamps{display:grid;grid-template-columns:repeat(var(--n,12),minmax(0,1fr));gap:var(--space-2)}
.k-stamp{aspect-ratio:1;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1.5px rgba(253,252,248,.35);color:var(--koff-ink);--s:16px}
.k-stamp.is-on{background:var(--koff-paper);box-shadow:none}
.k-stamp.is-goal{box-shadow:inset 0 0 0 2px var(--koff-cream);color:var(--koff-cream);font-family:var(--font-display);font-weight:800;font-size:13px;line-height:1}
.k-stamp.is-goal.is-on{color:var(--koff-ink)}
.k-stamp.is-goal.is-on{box-shadow:none}

/* Utilidades mínimas */
.k-hidden{display:none!important}
.k-muted{color:var(--text-muted)}
.k-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}