/*
 * Seabery Visitas — design tokens + base components (INC-04).
 *
 * Single, build-free stylesheet (native CSS custom properties) shared by BOTH
 * surfaces: the kiosk (Tailwind CDN reads the vars via arbitrary values) and
 * the operator SSR (its embedded CSS reads the vars). It is the vehicle that
 * unifies the two surfaces on the official Seabery palette and Inter.
 *
 * Palette is the OFFICIAL Seabery brand (docs/ui/06): Dark Blue #002550 is the
 * primary; Orange #FF6B00 is an ACCENT only (it fails AA as small text on
 * white — ratio 2.86 — so it is never used for body/UI text). Semantic colours
 * (success/warning/error) are generated to pass AA for the connection/sync
 * states; they are not brand colours.
 *
 * Self-hosted Inter (latin subset, weights 400/500/700, woff2) — no Google
 * Fonts at runtime, so the kiosk keeps working offline.
 */

/* ----------------------------------------------------------------------------
 * Self-hosted Inter (latin subset). `swap` shows the system fallback until the
 * woff2 loads, so first paint never blocks (and offline falls back gracefully).
 * -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/inter-700.woff2") format("woff2");
}

:root {
  /* --- Official brand palette (docs/ui/06) ------------------------------- */
  --color-primary: #002550;        /* Dark Blue — primary (AA 15.2:1 on white) */
  --color-primary-hover: #001a3a;  /* darker primary for hover/active */
  --color-accent: #ff6b00;         /* Orange — ACCENT ONLY, never small text */
  --color-accent-soft: #fff3ec;    /* Soft Orange — surfaces/wash */
  --color-blue: #006ce9;           /* Medium Blue — accents/large only */
  --color-grey-medium: #b8c3ce;    /* Medium Grey — borders/atenuado UI */
  --color-grey-soft: #e4ebef;      /* Soft Grey — surfaces */

  /* --- Neutrals / text (all AA on their backgrounds) -------------------- */
  --color-bg: #f4f6f8;             /* app background */
  --color-surface: #ffffff;        /* cards/inputs/table */
  --color-text: #002550;           /* body text (AA 15.2:1 on white) */
  --color-text-muted: #51606e;     /* muted text (AA 6.47:1 on white) */
  --color-on-primary: #ffffff;     /* text on Dark Blue (AA 15.2:1) */
  --color-border: #d4dde4;         /* default input/table borders */

  /* --- Semantic (NOT brand; AA-verified) — connection/sync + estados ----- */
  --color-success-fg: #146c2e;     /* AA 5.75:1 on success-bg */
  --color-success-bg: #e6f4ea;
  --color-warning-fg: #8a5300;     /* AA 5.81:1 on warning-bg */
  --color-warning-bg: #fff3ec;
  --color-error-fg: #b3261e;       /* AA 6.54:1 on white */
  --color-error-bg: #fce8e6;
  --color-neutral-fg: #44505c;     /* FUERA/idle (AA 7.41:1 on neutral-bg) */
  --color-neutral-bg: #f1f3f4;

  /* --- Typography ------------------------------------------------------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- Spacing scale ---------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* --- Radii & shadow --------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 3px rgba(0, 37, 80, 0.12), 0 1px 2px rgba(0, 37, 80, 0.08);
}

/* ----------------------------------------------------------------------------
 * Base components (shared classes). Both surfaces use these so the visual
 * language is identical. No layout/UX changes here — visual tokens only.
 * -------------------------------------------------------------------------- */

body {
  font-family: var(--font-sans);
  color: var(--color-text);
}

/* App header with the Hyper Icon logo. */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.brand-logo {
  display: block;
  height: 40px;
  width: auto;
}
.brand-logo--sm {
  height: 28px;
}

/* Primary action button (Dark Blue, AA white text). */
.btn-primary {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-sans);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  min-height: 44px; /* touch target */
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-primary-hover);
}

/* Form fields. */
.field-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}
.field-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: var(--space-1);
  padding: var(--space-3);
  font-size: 1.125rem;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.field-input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

/* Status pills (connection + DENTRO/FUERA). */
.pill {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 500;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
}
.pill-online,
.pill-dentro {
  color: var(--color-success-fg);
  background: var(--color-success-bg);
}
.pill-offline,
.pill-warning {
  color: var(--color-warning-fg);
  background: var(--color-warning-bg);
}
.pill-fuera,
.pill-idle {
  color: var(--color-neutral-fg);
  background: var(--color-neutral-bg);
}

/* Data table (operator listing). */
.data-table {
  border-collapse: collapse;
  width: 100%;
  background: var(--color-surface);
}
.data-table th,
.data-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-grey-soft);
}
.data-table th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

/* Informational notice (e.g. the privacy note). */
.notice {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Card surface. */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}