/* ============================================================
   Grupo Forestal — component styles
   Reads tokens from ../../colors_and_type.css. No hard-coded colors.
   Mobile-first; desktop is best-effort.
   ============================================================ */

* { box-sizing: border-box; }

/* ---------- screen scaffold ---------- */
.app {
  width: 100%;
  max-width: var(--w-screen-max);
  height: 100%;
  background: var(--crema-fondo);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.app__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-6);
  padding-bottom: calc(var(--h-tabbar) + var(--s-4));
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* ---------- topbar ---------- */
.topbar {
  background: var(--verde-institucional);
  color: var(--fg-inv);
  padding: var(--s-4) var(--s-6);
  border-bottom: 2px solid var(--dorado-acento);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  min-height: var(--h-topbar);
}
.topbar__title { font-size: var(--fs-base); font-weight: 600; line-height: var(--lh-tight); }
.topbar__sub   { font-size: var(--fs-sm); opacity: .75; margin-top: 3px; }
.topbar__back  {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; color: inherit; cursor: pointer;
  font-size: var(--fs-sm); padding: 0; margin-bottom: 2px;
  opacity: .85;
}
.topbar__back:hover { opacity: 1; }

/* ---------- empresa chip ---------- */
.empresa-chip {
  background: var(--dorado-acento);
  color: #1a1a1a;
  font-weight: 700;
  font-size: var(--fs-sm);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; cursor: pointer;
  min-height: 32px;
}
.empresa-chip:active { background: var(--dorado-700); }

/* ---------- tab bar ---------- */
.tabbar {
  background: var(--surface);
  border-top: 1px solid #e3e3dd;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 6px 0 calc(8px + env(safe-area-inset-bottom));
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 5;
}
.tabbar__item {
  text-align: center;
  color: var(--fg-3);
  font-size: var(--fs-xs);
  font-weight: 500;
  border: 0; background: transparent; cursor: pointer;
  padding: 6px 0;
  min-height: var(--hit);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: color var(--dur-fast) var(--ease-std);
}
.tabbar__item.is-active { color: var(--verde-institucional); font-weight: 700; }
.tabbar__item svg { width: 22px; height: 22px; }

/* ---------- card ---------- */
.card {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: var(--s-5) var(--s-6);
  box-shadow: var(--sh-2);
}
.card--inset-warn { border-left: 3px solid var(--warn-fg); padding-left: calc(var(--s-6) - 3px); }
.card--inset-crit { border-left: 3px solid var(--crit-fg); padding-left: calc(var(--s-6) - 3px); }

/* ---------- KPI ---------- */
.kpi__label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--fg-3); }
.kpi__value {
  font-family: var(--font-mono);
  font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-tight);
  color: var(--verde-institucional);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.kpi__value--sans { font-family: var(--font-sans); font-size: 22px; }
.kpi__value--md   { font-size: var(--fs-lg); }
.kpi--warn .kpi__value { color: var(--warn-fg); }
.kpi--crit .kpi__value { color: var(--crit-fg); }
.kpi--ok   .kpi__value { color: var(--ok-fg); }
.kpi__sub   { font-size: var(--fs-sm); color: var(--fg-2); margin-top: 6px; line-height: var(--lh-snug); }

.timestamp { font-size: var(--fs-xs); color: var(--fg-3); text-align: right; margin-top: 4px; }

/* ---------- list row ---------- */
.list { display: flex; flex-direction: column; gap: 8px; }
.list-row {
  background: var(--surface);
  border-radius: 10px;
  padding: 12px var(--s-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  box-shadow: var(--sh-2);
  border: 0; width: 100%; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
  transition: background var(--dur-fast) var(--ease-std);
}
.list-row:active { background: var(--surface-sunk); }
.list-row__name { font-weight: 600; font-size: var(--fs-base); color: var(--fg-1); }
.list-row__name--mono { font-family: var(--font-mono); letter-spacing: -.005em; font-variant-numeric: tabular-nums; }
.list-row__meta { font-size: var(--fs-sm); color: var(--fg-2); margin-top: 2px; line-height: var(--lh-snug); }

/* ---------- chip ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600;
  padding: 3px 10px;
  white-space: nowrap;
}
.chip--ok   { background: var(--ok-bg);   color: var(--ok-fg); }
.chip--warn { background: var(--warn-bg); color: var(--warn-fg); }
.chip--crit { background: var(--crit-bg); color: var(--crit-fg); }
.chip--info { background: var(--info-bg); color: var(--info-fg); }
.chip--neutral { background: var(--surface-sunk); color: var(--fg-2); }

/* ---------- inner tabs (Hoy/Semana/Mes) ---------- */
.tabs-inner {
  display: inline-flex;
  gap: 4px;
  background: var(--surface-sunk);
  padding: 4px;
  border-radius: 10px;
  width: 100%;
}
.tabs-inner__btn {
  flex: 1;
  padding: 9px 14px;
  border-radius: 7px;
  border: 0;
  background: transparent;
  color: var(--fg-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  min-height: 36px;
  transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.tabs-inner__btn.is-active {
  background: var(--verde-institucional);
  color: var(--fg-inv);
  font-weight: 600;
}

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-base);
  min-height: var(--hit-cta);
  border-radius: var(--r-button);
  border: 0;
  cursor: pointer;
  padding: 0 var(--s-6);
  transition: background var(--dur-fast) var(--ease-std), opacity var(--dur-fast) var(--ease-std);
}
.btn--primary { background: var(--verde-institucional); color: var(--fg-inv); width: 100%; }
.btn--primary:hover { background: var(--verde-700); }
.btn--primary:active { background: var(--verde-900); }
.btn--primary[disabled] { background: var(--surface-sunk); color: var(--fg-3); cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--verde-institucional); }
.btn--ghost:active { opacity: .7; }
.btn--destructive { background: transparent; color: var(--crit-fg); }
.btn--full { width: 100%; }

/* ---------- inputs ---------- */
.field { display: flex; flex-direction: column; gap: 4px; }
.field__label { font-size: var(--fs-sm); color: var(--fg-2); font-weight: 500; }
.input {
  background: var(--surface);
  border: 1px solid #d8d8d2;
  border-radius: var(--r-input);
  padding: 11px 12px;
  font-size: var(--fs-base);
  color: var(--fg-1);
  font-family: var(--font-sans);
  min-height: var(--hit);
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-std);
}
.input::placeholder { color: var(--fg-3); }
.input:focus { outline: 2px solid var(--dorado-acento); border-color: transparent; }
.input--err { border-color: var(--crit-fg); }

.input-group { position: relative; }
.input-group__action {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; cursor: pointer;
  color: var(--fg-2); font-size: var(--fs-sm); font-weight: 600;
  padding: 8px 10px;
  min-height: 36px;
}
.input-group__action:hover { color: var(--fg-1); }

.search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid #d8d8d2;
  border-radius: var(--r-input);
  padding: 0 12px;
  min-height: var(--hit);
}
.search svg { width: 18px; height: 18px; color: var(--fg-3); flex: 0 0 auto; }
.search input {
  flex: 1; border: 0; outline: none; background: transparent;
  font-size: var(--fs-base); font-family: var(--font-sans);
  color: var(--fg-1); padding: 11px 0;
}
.search input::placeholder { color: var(--fg-3); }

/* ---------- banner ---------- */
.banner {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: var(--fs-sm);
}
.banner--warn { background: var(--warn-bg); color: #7a3d05; border: 1px solid #e8c490; }
.banner--crit { background: var(--crit-bg); color: #7a1717; border: 1px solid #f0bcbc; }
.banner svg { width: 18px; height: 18px; flex: 0 0 auto; }
.banner__action {
  margin-left: auto; background: transparent; border: 0; cursor: pointer;
  font-weight: 700; color: inherit; font-size: var(--fs-sm); text-decoration: underline;
}

/* ---------- empty / skeleton ---------- */
.empty {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: var(--s-7) var(--s-6);
  text-align: center;
  color: var(--fg-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  box-shadow: var(--sh-2);
}
.empty__title { font-weight: 600; color: var(--fg-1); font-size: var(--fs-base); margin-bottom: 4px; }

@keyframes pulse { 0%,100%{opacity:.6} 50%{opacity:1} }
.sk { background: var(--surface-sunk); border-radius: 6px; animation: pulse 1.4s ease-in-out infinite; }

/* ---------- login layout ---------- */
.login-shell {
  flex: 1;
  display: flex; flex-direction: column;
  padding: var(--s-10) var(--s-6) var(--s-6);
  background: var(--crema-fondo);
}
.login-shell__logo { display: flex; flex-direction: column; align-items: center; margin: var(--s-10) 0 var(--s-8); }
.login-shell__logo img { height: 78px; }
.login-shell__logo .sub { font-size: var(--fs-sm); color: var(--fg-2); margin-top: 6px; letter-spacing: .04em; }
.login-shell__form { display: flex; flex-direction: column; gap: var(--s-4); }
.login-shell__footer { margin-top: auto; text-align: center; font-size: var(--fs-xs); color: var(--fg-3); padding-top: var(--s-8); }

/* ---------- cuenta detail rows ---------- */
.detail-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px dashed var(--borde-crema); }
.detail-row:last-child { border-bottom: 0; }
.detail-row__label { color: var(--fg-2); font-size: var(--fs-sm); }
.detail-row__value { color: var(--fg-1); font-size: var(--fs-base); font-weight: 500; }
.detail-row__value.mono { font-family: var(--font-mono); }

/* ---------- transitions for HTMX-style swaps ---------- */
[x-cloak] { display: none !important; }
.screen-fade-enter { animation: fadein var(--dur-base) var(--ease-out); }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }