/* Tokens compartidos por el sitio y el portal */
:root {
  /* Colores de la marca Tikket POS (logo y promocionales) */
  --tinta: #131A2E;        /* marino */
  --tinta-oscura: #0B1020;
  --texto: #131A2E;
  --apagado: #4A5268;
  --superficie: #EEF1F8;
  --linea: #D9DEEA;
  --papel: #FFFFFF;
  --cempasuchil: #1FD17E;  /* acento: verde "POS" del logo (el nombre se conserva para no tocar el portal) */
  --azul: #2D5BFF;
  --violeta: #7A3FF2;
  --verde-texto: #0E8A4F;
  --bien: #0E8A4F;
  --mal: #B42318;

  --fuente: "Figtree", system-ui, sans-serif;
  --fuente-titulos: "Outfit", system-ui, sans-serif;
  --fuente-ticket: "Courier Prime", "Courier New", monospace;

  --r-chico: 8px;
  --r-medio: 14px;
  --foco: 0 0 0 3px rgba(45, 91, 255, .55);
}

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

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

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--texto);
  background: var(--papel);
  font-variation-settings: "wdth" 100;
}

h1, h2, h3 {
  font-family: var(--fuente-titulos);
  line-height: 1.05;
  margin: 0 0 .5em;
  font-weight: 800;
  font-variation-settings: "wdth" 72;
  letter-spacing: -.01em;
}

a { color: var(--tinta); }

:focus-visible { outline: none; box-shadow: var(--foco); border-radius: 4px; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  font: inherit; font-weight: 700;
  padding: .7em 1.2em;
  border-radius: var(--r-chico);
  border: 2px solid transparent;
  background: var(--tinta); color: var(--papel);
  text-decoration: none; cursor: pointer;
}
.boton:hover { background: var(--tinta-oscura); }
.boton.claro { background: var(--cempasuchil); color: var(--tinta-oscura); }
.boton.claro:hover { background: #3BE395; }
.boton.borde { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.boton.borde:hover { background: var(--superficie); }
.boton[disabled] { opacity: .5; cursor: not-allowed; }

.campo { display: grid; gap: .3rem; }
.campo span { font-size: .9rem; font-weight: 600; }
input, select, textarea {
  font: inherit; color: var(--texto);
  padding: .6em .75em;
  border: 1.5px solid var(--linea);
  border-radius: var(--r-chico);
  background: var(--papel);
  width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--tinta); outline: none; box-shadow: var(--foco); }

.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}