/* Base visual de la plataforma (spec caja §5): superficies neutras, tipografía del sistema, estados fijos y accesibles.
   La marca del local la ponen las variables --marca* (comun/marca.js); los estados no cambian nunca de color.
   Contraste comprobado en tests/marca.test.js: el segundo :root (oscuro) solo redefine lo que cambia. */
:root {
  --fondo: #f4f4f6; --superficie: #ffffff; --borde: #dcdce2; --texto: #1c1c22; --texto-suave: #55555f;
  --ok: #0b7a55; --ok-tinta: #0b7a55; --ok-suave: #e1f5ec;
  --ko: #b42323; --ko-tinta: #b42323; --ko-suave: #fbe1e1;
  --aviso: #8a5a00; --aviso-fondo: #fff3c4;
  --gris: #5f5f6b;
  --marca: #3d3d47; --marca-texto: #ffffff; --marca-boton: #3d3d47; --marca-acento: #3d3d47;
  --radio: 14px; --radio-grande: 22px; --sombra: 0 1px 2px rgb(0 0 0 / 0.06), 0 4px 14px rgb(0 0 0 / 0.06);
  --letra: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #111114; --superficie: #1c1c21; --borde: #33333b; --texto: #f2f2f5; --texto-suave: #a9a9b4;
    --ok-tinta: #4ccf9a; --ok-suave: #12382b; --ko-tinta: #ff8a8a; --ko-suave: #3d1a1a;
    --aviso: #ffd66b; --aviso-fondo: #3a2e0a;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; background: var(--fondo); color: var(--texto); font: 17px/1.45 var(--letra); }
h1 { font-size: 24px; line-height: 1.2; margin: 0; }
h2 { font-size: 18px; margin: 0; }
p { margin: 0; }
.suave { color: var(--texto-suave); }
[hidden] { display: none !important; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--marca-boton); outline-offset: 2px; }

/* Cabecera con la marca del local */
.cabecera { display: flex; align-items: center; gap: 12px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); background: var(--marca); color: var(--marca-texto); }
.cabecera img { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; background: #fff; }
.cabecera .cab-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cabecera strong { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cabecera span { font-size: 13px; opacity: 0.9; }
.cabecera .chip { background: rgb(255 255 255 / 0.18); color: inherit; border: 1px solid rgb(255 255 255 / 0.35); }
.cabecera .chip[aria-pressed="true"] { background: var(--ko); border-color: var(--ko); color: #fff; }

/* Botones */
.boton { display: block; width: 100%; min-height: 56px; padding: 14px 18px; border: 0; border-radius: var(--radio); background: var(--marca-boton); color: #fff;
  font: 700 18px/1.2 var(--letra); cursor: pointer; touch-action: manipulation; }
.boton:active { transform: translateY(1px); filter: brightness(0.95); }
.boton.secundario { background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); }
.boton:disabled { opacity: 0.5; cursor: default; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--borde);
  background: var(--superficie); color: var(--texto); font: 600 14px/1 var(--letra); cursor: pointer; }

/* Tarjeta, avisos y pestañas */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); box-shadow: var(--sombra); padding: 18px; }
.aviso { background: var(--aviso-fondo); color: var(--aviso); border-radius: var(--radio); padding: 12px 14px; font-weight: 600; }
.pestanas { display: grid; grid-auto-flow: column; gap: 4px; padding: 4px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 99px; }
.pestanas button { min-height: 40px; border: 0; border-radius: 99px; background: transparent; color: var(--texto-suave); font: 700 15px var(--letra); cursor: pointer; }
.pestanas button[aria-selected="true"] { background: var(--marca-boton); color: #fff; }

/* Teclados: numérico (PIN) y de códigos (32 símbolos) */
.teclado { display: grid; gap: 8px; width: 100%; }
.teclado.numerico { grid-template-columns: repeat(3, 1fr); max-width: 340px; margin: 0 auto; }
.teclado.codigos { grid-template-columns: repeat(8, 1fr); gap: 6px; }
.teclado button { min-height: 58px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto);
  font: 700 24px var(--letra); cursor: pointer; touch-action: manipulation; }
.teclado.codigos button { min-height: 46px; font: 700 18px var(--mono); border-radius: 10px; }
.teclado button:active { background: var(--borde); }
.teclado button.tecla-accion { background: var(--marca-boton); color: #fff; border-color: transparent; font-size: 18px; }
.teclado button.tecla-borrar { font-size: 20px; }
.teclado.codigos button.tecla-borrar { grid-column: 1 / -1; font: 700 17px var(--letra); }   /* 32 símbolos llenan 4 filas de 8: borrar va en la suya */