/* =========================================================================
   Don Topo POS — v5 Foundation
   Reset, tipografía, focus, reduced-motion, utilidades.
   Requiere tokens.css. No depende de v3/app.css.
   ========================================================================= */

/* —— Reset mínimo —— */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink);
  background: var(--linen);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum" 1, "cv11" 1, "ss01" 1;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

a[href]:not(.btn):not(.tab):not(.topnav-link):not(.topnav-more-link):not(.topnav-cash):not(.topnav-brand):not(.alert-item):not(.more-link):not(.chip):not(.period-tab):not(.iconbtn):not(.pedido-view):not(.pedido-back) {
  text-underline-offset: 2px;
}

@media (hover: hover) {
  a[href]:not(.btn):not(.tab):not(.topnav-link):not(.topnav-more-link):not(.topnav-cash):not(.topnav-brand):not(.alert-item):not(.more-link):not(.chip):not(.period-tab):not(.iconbtn):not(.pedido-view):not(.pedido-back):hover {
    text-decoration: underline;
  }
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

ul, ol {
  margin: 0;
  padding: 0;
}

small {
  font-size: 0.8rem;
}

strong {
  font-weight: 700;
}

/* —— Display money / brand marks —— */
.brand strong,
.appbar h1,
.auth-brand-name,
.panel-hero-amt,
.cart-total strong,
.auth-brand-mark,
.auth-card h1,
.keypad-display,
.logo,
.metric strong,
.stat strong,
.tnum.display {
  font-family: var(--display);
}

/* —— Focus visible (teclado) —— */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn:focus-visible,
.iconbtn:focus-visible,
.chip:focus-visible,
.period-tab:focus-visible,
.tab:focus-visible,
.topnav-link:focus-visible,
.pager-btn:focus-visible,
.pager-num:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* —— Reduced motion —— */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* —— Utilidades —— */
.hide {
  display: none !important;
}

.muted {
  color: var(--muted);
}

.muted.sm,
.sm {
  font-size: 0.78rem;
}

.muted.sm {
  font-style: italic;
}

.tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.tnum.accent {
  color: var(--accent-strong);
}

.stack > * + * {
  margin-top: var(--space-3);
}

.grid {
  display: grid;
  gap: var(--space-3);
}

.grid > * {
  min-width: 0;
}

.grid.cols2 {
  grid-template-columns: 1fr 1fr;
}

.grid.cols3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.eyebrow {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Evita “doble X” en búsquedas: cancel nativo de WebKit + botón .search-clear */
.search input[type="search"]::-webkit-search-cancel-button,
.search input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
@media (pointer: coarse), (max-width: 900px) {
  .search-hotkey {
    display: none !important;
  }
}

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: 10px; }
.mt-3 { margin-top: 14px; }
.mb-2 { margin-bottom: 10px; }
.mb-3 { margin-bottom: 14px; }
.ml-auto { margin-left: auto; }

.full-span {
  grid-column: 1 / -1;
}

.section-title {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 700;
  margin: 14px 0 10px;
}

.actions-end {
  justify-content: flex-end;
}

.actions-single {
  grid-template-columns: 1fr;
}

.inline-actions {
  display: inline-flex;
  gap: var(--space-0);
  align-items: center;
  flex-wrap: wrap;
}

.is-hidden-form {
  display: none;
}

.divider-top {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.grow {
  flex: 1;
  min-width: 0;
}