/* Vertex claro (v2) — tema aprobado: fondo cálido, tarjetas blancas redondeadas,
   acento rojo del logo. Reemplaza al wireframe "Industry" v1. */
:root {
  --bg: #fafafa;
  --card: #ffffff;
  --text: #1a1a1a;
  --text-2: #8a8a8a;
  --text-3: #b3aca4;
  --text-mid: #6a6a6a;
  --border: #eee9e4;
  --hairline: #f5f1ed;
  --track: #f0eded;
  --accent: #b02020;
  --accent-tint: #fbeaea;
  --accent-hover: #8c1717;
  --ok: #3d7248;
  --ok-tint: #e4f2e7;
  --ok-dot: #3d9a5f;
  --sh-sm: 0 2px 8px rgba(0, 0, 0, .05);
  --sh-md: 0 2px 10px rgba(0, 0, 0, .06);
  --sh-lg: 0 2px 12px rgba(0, 0, 0, .07);
  --font: 'Archivo', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
input, select { font: inherit; }
img { display: block; max-width: 100%; }
::-webkit-scrollbar { width: 0; height: 0; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: rgba(176, 32, 32, .2); }

/* — tarjetas — */
.card-w { background: var(--card); border-radius: 18px; box-shadow: var(--sh-md); }
.card-lg { background: var(--card); border-radius: 20px; box-shadow: var(--sh-lg); }
.card-sm { background: var(--card); border-radius: 16px; box-shadow: var(--sh-sm); }

/* — tags píldora — */
.tag {
  display: inline-flex; align-items: center; flex: none; white-space: nowrap;
  font-size: 10px; font-weight: 700; border-radius: 99px; padding: 4px 10px;
}
.tag-alarm { background: var(--accent-tint); color: var(--accent); }
.tag-ok { background: var(--ok-tint); color: var(--ok); }
.tag-rest { background: var(--track); color: #7a7a7a; }

/* — botones — */
.btn-pill {
  display: flex; align-items: center; justify-content: center; text-align: center;
  height: 48px; border-radius: 99px; font-size: 14px; font-weight: 700;
}
.btn-red { background: var(--accent); color: #fff; box-shadow: 0 5px 14px rgba(176, 32, 32, .3); }
.btn-red:active { background: var(--accent-hover); }
.btn-white { background: var(--card); border: 1.5px solid var(--border); font-size: 12.5px; }
.btn-circle {
  width: 38px; height: 38px; border-radius: 50%; background: var(--card);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  display: flex; align-items: center; justify-content: center;
}

/* — inputs — */
.input {
  width: 100%; min-height: 44px; background: var(--card);
  border: 1.5px solid var(--border); border-radius: 14px;
  color: var(--text); padding: 0 14px; outline: none; font-size: 12.5px;
}
.input:focus { border-color: var(--accent); }

/* — select estilizado — */
.sel-wrap { position: relative; display: block; }
.sel-wrap select {
  width: 100%; height: 44px; appearance: none; -webkit-appearance: none;
  background: var(--card); border: 1.5px solid var(--border); border-radius: 14px;
  padding: 0 34px 0 14px; font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--text); outline: none; box-shadow: 0 1px 6px rgba(0, 0, 0, .05);
}
.sel-wrap svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }

/* — barras de avance — */
.bar { border-radius: 99px; background: var(--track); position: relative; display: block; }
.bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--accent); }
.bar.bar-dark > i { background: var(--text); }

/* — píldora WK del header — */
.wk-pill {
  font-weight: 800; font-size: 17px; letter-spacing: -.01em;
  background: var(--card); border-radius: 99px; padding: 8px 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .07); flex: none;
}