/* ============================================================
   hormiga · components
   Recreates the UI kit from the brand manual (section 7) using
   the design tokens. Dark, monospaced, monochrome violet.
   ============================================================ */

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--violet-400);
  text-decoration: none;
}
a:hover {
  color: var(--violet-300);
}

h1,
h2,
h3 {
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-3);
  font-weight: var(--weight-bold);
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); font-weight: var(--weight-semibold); }

p { margin: 0 0 var(--space-4); }

.label {
  font-size: var(--text-label);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--muted);
}
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.num   { font-variant-numeric: var(--num); }
.right { text-align: right; }
.success-text { color: var(--success); }
.error-text   { color: var(--error); }

/* ---- page + window frame (brand device) ---------------------------- */

/* Even margin on all four sides; the window fills the rest. */
.page {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-6);
}
/* Auth screens: vertically center the compact card. */
.page--center { align-items: center; }

/* Big app pages (home, stock, configuración): the window is FIXED height —
   it fills the screen minus the even margin — and is identical across pages.
   Title bar + nav stay pinned; only .window__scroll scrolls. */
.window {
  width: 100%;
  max-width: 1600px;
  height: calc(100vh - var(--space-6) * 2);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.window__bar    { flex: 0 0 auto; }
.window__chrome { flex: 0 0 auto; padding: 0 var(--space-8); }
.window__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* Narrow variant for auth screens (login, registro, reset): compact card,
   natural height (no internal scroll), fades in on load. */
.window--narrow {
  max-width: 500px;
  height: auto;
  display: block;
  animation: cardIn 0.4s ease both;
}
.window--narrow .window__scroll { overflow: visible; }
.window--narrow .window__body { padding: var(--space-12) var(--space-8); }

@keyframes cardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.window__bar {
  height: 38px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  background: var(--elevated);
  border-bottom: 1px solid var(--border);
}
.dots { display: inline-flex; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: var(--radius-pill); display: inline-block; }
.dot--red    { background: var(--win-red); }
.dot--yellow { background: var(--win-yellow); }
.dot--green  { background: var(--win-green); }
.window__path {
  font-size: var(--text-sm);
  color: var(--muted);
}
.window__body {
  padding: var(--space-8);
}
@media (max-width: 640px) {
  .page { padding: var(--space-4); }
  .window { height: calc(100vh - var(--space-4) * 2); }
  .window__chrome { padding: 0 var(--space-4); }
  .window__body { padding: var(--space-6) var(--space-4); }
}

/* ---- app header (top nav inside the window) ----------------------- */

.appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}
.appbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--violet-400);
}
.appbar__brand .wordmark { font-size: 22px; }
.appbar__brand svg { width: 26px; height: 26px; }
.appbar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.appbar__nav a {
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 9px;
}
.appbar__nav a:hover { color: var(--text); background: var(--elevated); }
.appbar__nav a.active { color: var(--violet-400); background: var(--violet-tint); }

/* ---- wordmark (Baloo 2, ONLY here) -------------------------------- */

.wordmark {
  font-family: var(--font-wordmark);
  font-weight: var(--weight-bold);
  letter-spacing: 0.5px;
  text-transform: lowercase;
}

/* ---- buttons ------------------------------------------------------ */

.btn,
.btn-secondary,
.btn-ghost {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
  text-decoration: none;
}
.btn { background: var(--violet-500); color: var(--on-violet); }
.btn:hover { background: #bd8fe8; color: var(--on-violet); }
.btn:active { background: var(--violet-600); transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--border);
  color: var(--faint);
  cursor: not-allowed;
}

.btn-secondary {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-secondary:hover { border-color: var(--violet-400); background: var(--violet-tint); }
.btn-secondary:active { background: rgba(196, 155, 234, 0.16); }

.btn-ghost {
  background: transparent;
  color: var(--violet-400);
  padding: 8px 12px;
}
.btn-ghost:hover { background: var(--violet-tint); color: var(--violet-300); }

.btn-block { width: 100%; }

/* ---- forms -------------------------------------------------------- */

.field { margin-bottom: var(--space-4); }
.field > label {
  display: block;
  font-size: var(--text-label);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--muted);
  margin-bottom: 6px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-base);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--violet-400);
  box-shadow: 0 0 0 4px rgba(196, 155, 234, 0.18);
}
.field input::placeholder { color: var(--faint); }
.field--error input { border-color: var(--error); }
.helptext { font-size: var(--text-sm); color: var(--muted); margin-top: 6px; }
.errorlist {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: var(--text-sm);
  color: var(--error);
}
.errorlist li { display: flex; align-items: center; gap: 6px; }
.errorlist .erricon { display: inline-flex; flex-shrink: 0; }
.errorlist .erricon svg { width: 14px; height: 14px; }
.form-error {
  background: rgba(232, 113, 110, 0.08);
  border: 1px solid var(--error);
  color: var(--error);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

/* ---- messages (flash) --------------------------------------------- */

.messages { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.messages li {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  border: 1px solid var(--border-strong);
}
.messages li.success { border-color: var(--success); color: var(--success); background: rgba(94, 201, 140, 0.08); }
.messages li.error   { border-color: var(--error);   color: var(--error);   background: rgba(232, 113, 110, 0.08); }
.messages li.warning { border-color: var(--warning); color: var(--warning); background: rgba(231, 178, 79, 0.08); }
.messages li.info    { border-color: var(--info);    color: var(--info);    background: rgba(110, 169, 230, 0.08); }

/* ---- cards -------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.card-link {
  display: block;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color 0.14s ease, transform 0.14s ease;
}
.card-link:hover { border-color: var(--violet-400); transform: translateY(-2px); }
.card-link .chevron {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  color: var(--violet-700);
}
.card-link__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--violet-tint);
  color: var(--violet-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.card-link__icon svg { width: 26px; height: 26px; }
.card-link h3 { color: var(--text); margin-bottom: 6px; }
.card-link p { color: var(--muted); margin: 0; font-size: var(--text-sm); }

/* ---- badges ------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: var(--weight-semibold);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  color: var(--muted);
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: currentColor;
}
.badge--success { color: var(--success); border-color: rgba(94, 201, 140, 0.4); background: rgba(94, 201, 140, 0.08); }
.badge--error   { color: var(--error);   border-color: rgba(232, 113, 110, 0.4); background: rgba(232, 113, 110, 0.08); }
.badge--warning { color: var(--warning); border-color: rgba(231, 178, 79, 0.4); background: rgba(231, 178, 79, 0.08); }
.badge--info    { color: var(--info);    border-color: rgba(110, 169, 230, 0.4); background: rgba(110, 169, 230, 0.08); }
.badge--no-dot::before { display: none; }

/* ---- data table --------------------------------------------------- */

.table-wrap { overflow-x: auto; }
table.data {
  width: 100%;
  border-collapse: collapse;
}
table.data thead th {
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--border);
  font-weight: var(--weight-semibold);
}
table.data tbody td {
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-base);
}
table.data td.num,
table.data th.num { text-align: right; font-variant-numeric: var(--num); }
table.data tr.is-problem { background: rgba(232, 113, 110, 0.05); }
table.data tr.is-problem .crit { color: var(--error); font-weight: var(--weight-semibold); }

/* ---- tabs --------------------------------------------------------- */

.tabs {
  display: flex;
  gap: var(--space-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-6);
}
.tabs a {
  padding: var(--space-3) 2px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs a:hover { color: var(--text); }
.tabs a.active { color: var(--violet-400); border-bottom-color: var(--violet-400); }

/* ---- stepper −/+ -------------------------------------------------- */

.stepper {
  display: inline-flex;
  align-items: center;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
}
.stepper button {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--violet-400);
  font-size: 18px;
  cursor: pointer;
}
.stepper button:hover { background: var(--border); }
.stepper .value {
  min-width: 48px;
  text-align: center;
  font-weight: var(--weight-semibold);
  font-variant-numeric: var(--num);
}

/* ---- connector cards (sync screen) -------------------------------- */

.connectors {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.connector {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
}
.connector__icon { color: var(--violet-400); }
.connector__icon svg { width: 28px; height: 28px; }
.connector strong { display: block; }
.connector span { color: var(--muted); font-size: var(--text-sm); }
.connector__infinity { color: var(--violet-700); }
.connector__infinity svg { width: 32px; height: 32px; }
@media (max-width: 640px) {
  .connectors { grid-template-columns: 1fr; }
  .connector__infinity { transform: rotate(90deg); justify-self: center; }
}

/* ---- hero / portada ----------------------------------------------- */

.hero { text-align: center; padding: var(--space-8) 0 var(--space-12); }
.hero__lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--violet-400);
  margin-bottom: var(--space-6);
}
.hero__lockup svg { width: 64px; height: 64px; }
.hero__lockup .wordmark { font-size: var(--text-display); }
.hero__tagline {
  color: var(--muted);
  max-width: 30em;
  margin: 0 auto var(--space-6);
}
.hero__prompt {
  font-size: var(--text-sm);
  color: var(--text);
}
.hero__prompt .sigil { color: var(--violet-400); }

/* terminal cursor */
.cursor {
  display: inline-block;
  width: 9px;
  height: 17px;
  background: var(--violet-400);
  vertical-align: middle;
  margin-left: 4px;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---- section header (app pages) ----------------------------------- */

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.section-head__title { display: flex; align-items: center; gap: var(--space-3); }
.section-head__title .ico {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--violet-tint);
  color: var(--violet-400);
  display: inline-flex; align-items: center; justify-content: center;
}
.section-head__title .ico svg { width: 24px; height: 24px; }
.section-head__title h1 { margin: 0; }
.section-head__title .sub { color: var(--muted); font-size: var(--text-sm); }
.section-head__actions { display: flex; align-items: center; gap: var(--space-3); }

/* ---- app grid ----------------------------------------------------- */

.app-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 640px) {
  .app-grid { grid-template-columns: 1fr; }
}

/* ---- empty state -------------------------------------------------- */

.empty {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--muted);
}
.empty svg { width: 40px; height: 40px; color: var(--violet-700); margin-bottom: var(--space-4); }
.empty p { max-width: 48ch; margin-left: auto; margin-right: auto; }

/* ---- footer / ant trail ------------------------------------------- */

.footer {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--muted);
  font-size: var(--text-sm);
}
.ant-trail { display: inline-flex; align-items: center; gap: 5px; }
.ant-trail i { width: 3px; height: 3px; border-radius: 50%; background: var(--violet-700); display: inline-block; }
.ant-trail i:nth-child(1) { opacity: 0.25; }
.ant-trail i:nth-child(2) { opacity: 0.5; }
.ant-trail i:nth-child(3) { opacity: 0.75; }
.ant-trail svg { width: 14px; height: 14px; color: var(--violet-400); }

/* ---- misc layout helpers ------------------------------------------ */

.stack > * + * { margin-top: var(--space-4); }
.row { display: flex; align-items: center; gap: var(--space-3); }
.between { justify-content: space-between; }
.center { text-align: center; }
.mt-6 { margin-top: var(--space-6); }
.divider { height: 1px; background: var(--border); border: 0; margin: var(--space-6) 0; }

.auth-foot { text-align: center; color: var(--muted); font-size: var(--text-sm); margin-top: var(--space-6); }

/* auth screens */
.auth-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--violet-400);
  margin-bottom: var(--space-6);
}
.auth-lockup svg { width: 40px; height: 40px; }
.auth-lockup .wordmark { font-size: 28px; }
.auth-title { text-align: center; margin-bottom: var(--space-6); }
.auth-title h1 { font-size: var(--text-h2); margin-bottom: 4px; }
.auth-title p { color: var(--muted); font-size: var(--text-sm); margin: 0; }
.dl-account { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-6); }
.dl-account dt { color: var(--muted); }
.dl-account dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---- password show/hide toggle ------------------------------------ */

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px; }
.pw-toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--violet-400);
  cursor: pointer;
  border-radius: var(--radius-md);
}
.pw-toggle:hover { color: var(--violet-300); }
.pw-toggle svg { width: 18px; height: 18px; }
/* icon reflects current state: hidden ••• = eye-off ; visible = eye-open */
.pw-toggle .i-eye { display: none; }
.pw-toggle .i-eye-off { display: inline-flex; }
.pw-toggle.is-on .i-eye { display: inline-flex; }
.pw-toggle.is-on .i-eye-off { display: none; }