/* ============================================================
   TIKUM — platform design system
   Docs: plataforma/core/DESIGN.md
   Principles: one typeface (system), one green as the anchor,
   red ONLY for negatives, hierarchy through size and space
   (not boxes), es-AR formatting for numbers and dates.
   ============================================================ */

/* ---- tokens ---- */
:root {
  --paper: #fdfdfc;        /* page background */
  --ink: #212721;          /* main text */
  --panel: #f4f4f2;        /* soft surfaces */
  --line: #e6e6e2;         /* hairline borders */
  --muted: #70766f;        /* secondary text */
  --accent: #2e5e41;       /* pine green: brand and interactive */
  --accent-soft: #e9efe9;
  --amber: #9a6b21;        /* warnings */
  --amber-soft: #f6eedd;
  --red: #b03a35;          /* negatives: debt, errors, overdue */
  --red-soft: #f8e9e8;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #151814; --ink: #e7e8e4; --panel: #1e221d; --line: #333831;
    --muted: #9aa198; --accent: #8fbf9e; --accent-soft: #263a2c;
    --amber: #d0a35c; --amber-soft: #332a18; --red: #e08a82; --red-soft: #3a2422;
  }
}

/* ---- base ---- */
* { box-sizing: border-box; }
body { background: var(--paper); color: var(--ink); margin: 0;
  font: 16px/1.6 var(--sans); }
a { color: var(--accent); }

/* ---- layout ---- */
.centered { display: flex; min-height: 100vh; align-items: center; justify-content: center; }
.box { width: min(460px, 92vw); padding: 2rem 0; }
.box-wide { width: min(560px, 94vw); }

/* ---- identity & typography ---- */
.brand { font-size: .72rem; letter-spacing: .24em; color: var(--accent); font-weight: 700; }
h1 { font-size: 1.35rem; font-weight: 650; margin: .2rem 0 1.2rem; }
.section-title { font-size: 1.05rem; font-weight: 650; margin: 1.8rem 0 .4rem; }
.note { font-size: .8rem; color: var(--muted); margin-top: 1.4rem; }
.small { font-size: .78rem; color: var(--muted); font-weight: 400; }

/* ---- option cards (home) ---- */
.card { display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 6px; padding: 1rem 1.2rem; margin-bottom: .8rem;
  background: var(--panel); }
.card:hover { border-color: var(--accent); }
.card b { font-size: 1.05rem; }
.card .caption { font-size: .84rem; color: var(--muted); }
.card-flat { border-left-width: 1px; background: none; padding: .8rem 1.2rem; }

/* ---- forms ---- */
label { display: block; font-size: .8rem; color: var(--muted); font-weight: 600;
  margin: 0 0 .3rem; }
input[type=text], input[type=password], input[type=file] { width: 100%;
  padding: .55rem .7rem; font: inherit; border: 1px solid var(--line);
  border-radius: 6px; background: var(--paper); color: var(--ink);
  margin-bottom: 1rem; }
input:focus, button:focus-visible, .card:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---- buttons ---- */
.button, button[type=submit] { background: var(--accent); color: var(--paper);
  border: 0; border-radius: 6px; padding: .6rem 1.4rem; font: inherit;
  font-weight: 600; cursor: pointer; }
.button-secondary { background: none; color: var(--muted);
  border: 1px solid var(--line); }
.button-link { background: none; border: 0; color: var(--accent);
  cursor: pointer; padding: 0; font-size: .84rem; text-decoration: underline;
  font-weight: 400; }

/* ---- feedback ---- */
.alert-ok { background: var(--accent-soft); color: var(--accent); border-radius: 6px;
  padding: .6rem .8rem; font-size: .9rem; margin-bottom: 1rem; }
.alert-error { background: var(--red-soft); color: var(--red); border-radius: 6px;
  padding: .6rem .8rem; font-size: .87rem; margin-bottom: 1rem;
  white-space: pre-line; }

/* ---- tables ---- */
table { border-collapse: collapse; width: 100%; font-size: .84rem;
  margin-top: .6rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--line); }
th { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); }
td.num, th.num { text-align: right; }
.cell-ok { color: var(--accent); }
.cell-bad { color: var(--red); }

/* ---- status chips ---- */
.chip { font-size: .76rem; padding: .1rem .55rem; border-radius: 3px;
  white-space: nowrap; }
.chip-green { background: var(--accent-soft); color: var(--accent); }
.chip-amber { background: var(--amber-soft); color: var(--amber); }
.chip-red { background: var(--red-soft); color: var(--red); }
.chip-gray { background: var(--panel); color: var(--muted); }

/* ---- upload progress bar ---- */
.progress-track { background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; height: 14px; overflow: hidden; margin: .4rem 0 .3rem; }
.progress-track i { display: block; height: 100%; background: var(--accent);
  border-radius: 5px; width: 0; transition: width .2s ease; }
.progress-text { font-size: .84rem; color: var(--muted);
  font-variant-numeric: tabular-nums; }

/* ---- navigation bar + dashboard frame ---- */
.nav-bar { display: flex; align-items: center; gap: 1.2rem;
  padding: .5rem 1rem; border-bottom: 1px solid var(--line);
  background: var(--paper); position: sticky; top: 0; font-size: .86rem; }
.nav-bar .brand { margin-right: auto; }
.nav-bar a { text-decoration: none; }
.nav-bar form { margin: 0; }
.nav-bar .button-link { color: var(--muted); text-decoration: none; }
.frame-canvas { height: calc(100vh - 45px); }
.frame-canvas iframe { width: 100%; height: 100%; border: 0; }