/* Mercadex - reset, tipografia y utilidades (docs/spec/30-sistema-diseno.md §3). */

*, *::before, *::after { box-sizing: border-box; }

/* El atributo `hidden` debe ganarle siempre a cualquier `display:` de una clase. Sin esto, un
   componente con display propio (p. ej. .plan-chip, inline-flex) se sigue viendo aunque el JS lo
   marque hidden: en el panel se veia una pastilla vacia en el pie de la barra lateral. Va aqui, una
   sola vez, en vez de repetir una regla `.x[hidden]` por componente. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fw-regular) var(--fs-md)/var(--lh-normal) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
body.no-scroll { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
/* Movil (PR 0 de diseno): sin el destello gris del navegador al tocar (lo reemplaza el :active propio de cada
   control) y sin que un toque largo sobre un boton seleccione su texto. */
a, button, summary, label, [role="button"], [role="tab"], [role="menuitem"] { -webkit-tap-highlight-color: transparent; }
button, summary, [role="button"], [role="tab"], [role="menuitem"] { -webkit-user-select: none; user-select: none; }
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); }
h1 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
h2 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
/* La escala nueva (20/16) es del PANEL; las paginas publicas (portada, legales, 404) conservan 22/18. Con :where()
   la regla pesa lo mismo que h1/h2 (gana solo por venir despues) y cualquier clase (.card-title, .page-title) sigue mandando. */
:where(body.app) h1 { font-size: var(--fs-title); }
:where(body.app) h2 { font-size: var(--fs-base); }
h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }
ul.plain, ol.plain { list-style: none; margin: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-4) 0; }
code, kbd { font-family: var(--font-mono); font-size: 0.9em; }

a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--text); } }
.sidebar a, a.btn, a.card-link, a.nav-item, a.wordmark { text-decoration: none; }

/* Foco: nunca se elimina sin reemplazarlo por el anillo */
:focus { outline: none; }
:focus-visible { box-shadow: var(--ring-focus); border-radius: var(--radius); }

::selection { background: var(--accent-soft); }

/* Wordmark (se define una sola vez). El punto de senal es parte del logo definitivo (Concepto C). */
.wordmark { font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--text); letter-spacing: -0.01em; }
.wordmark span { color: var(--brand); }
@media (hover: hover) and (pointer: fine) { .wordmark:hover { color: var(--text); } }
.wordmark-dot { display: inline-block; width: 7px; height: 7px; margin: 0 0 4px 3px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); vertical-align: middle; }

/* Iconos (sprite en /img/icons.svg) */
.icon { width: 20px; height: 20px; flex: none; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }

/* Utilidades */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.text-dim { color: var(--text-dim); }
.text-muted { color: var(--text-muted); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.num { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stack > * + * { margin-top: var(--sp-4); }
.row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
.mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); } .mb-8 { margin-bottom: var(--sp-8); }
.only-sm { display: none; }

@media (max-width: 639px) {
  .hide-sm { display: none !important; }
  .only-sm { display: initial; }
  /* iOS hace zoom a la pagina al enfocar un campo de menos de 16 px. Especificidad minima a proposito: cualquier
     clase (.input, .code-input) sigue mandando; esto cubre los campos sueltos que heredaban los 15 px del cuerpo. */
  input, select, textarea { font-size: var(--fs-base); }
}
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media print {
  .sidebar, .topbar, .toast-region, .btn, .icon-btn { display: none !important; }
}