/* Acredita — single stylesheet, no build step.
   Tailwind was deliberately dropped: it would require Node in the container
   purely to generate CSS, and this product is forms, tables and dashboards. If
   Tailwind is wanted later, add it via the standalone CLI (one binary, no
   node_modules).
   Institutional palette: navy / teal. */

:root {
  --navy:        #16324f;
  --navy-dark:   #0e2136;
  --teal:        #157a7a;
  --teal-light:  #e3f1f1;
  --text:        #1c2530;
  --text-muted:  #5a6875;
  --border:      #d9e0e6;
  --bg:          #f6f8fa;
  --white:       #ffffff;
  --critical:    #b3261e;
  --high:        #b06a00;
  --medium:      #5a6875;
  --ok:          #1a7f4b;
  --radius:      6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
}

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.25;
}
h1 { font-size: 1.75rem; margin: 0 0 .35rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 .75rem; }

a { color: var(--teal); }

/* ── Top bar ────────────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 1.5rem;
  padding: .7rem 1.5rem;
  background: var(--navy);
  color: var(--white);
}
.brand {
  font-family: Georgia, serif; font-size: 1.15rem; font-weight: 600;
  color: var(--white); text-decoration: none; letter-spacing: .02em;
}
.nav { display: flex; gap: 1.1rem; }
.nav a { color: #c9d8e4; text-decoration: none; font-size: .93rem; }
.nav a:hover { color: var(--white); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: .8rem; }
.tenant { font-size: .9rem; color: #c9d8e4; }
.tenant-picker select {
  background: var(--navy-dark); color: var(--white);
  border: 1px solid #2e5069; border-radius: var(--radius); padding: .3rem .5rem;
  font-size: .88rem;
}
.inline { display: inline; }
.link-button {
  background: none; border: none; color: #c9d8e4; cursor: pointer;
  font-size: .9rem; padding: 0; text-decoration: underline;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.content { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.footer {
  max-width: 1100px; margin: 0 auto; padding: 1rem 1.5rem 2rem;
  color: var(--text-muted); font-size: .82rem;
}
.subtitle { color: var(--text-muted); margin: 0 0 1.5rem; }

.card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; background: var(--white); }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--border); }
th {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); font-weight: 600; background: #fbfcfd;
}
tbody tr:hover { background: #fafcfd; }
td.number { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Wide tables scroll inside their own container; the page never scrolls sideways. */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }

/* ── Status badges ──────────────────────────────────────────────────────── */
/* The sev-* modifiers are keyed off the stored severity value, which is
   Spanish because it comes from the official seed catalogue. */
.badge {
  display: inline-block; padding: .12rem .5rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; letter-spacing: .02em;
  background: var(--teal-light); color: var(--teal);
}
.badge.role        { background: #2e5069; color: #c9d8e4; }
.badge.sev-critica { background: #fbe9e7; color: var(--critical); }
.badge.sev-alta    { background: #fdf1de; color: var(--high); }
.badge.sev-media   { background: #eef1f4; color: var(--medium); }
.badge.overdue     { background: #fbe9e7; color: var(--critical); }
.badge.upcoming    { background: #fdf1de; color: var(--high); }
.badge.ok          { background: #e6f5ec; color: var(--ok); }

/* ── IEA ────────────────────────────────────────────────────────────────── */
.iea { display: flex; align-items: baseline; gap: .5rem; }
.iea-value { font-size: 2rem; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
/* The IEA is NEVER shown without its confidence level: a high score resting
   only on declared evidence is a false positive. */
.iea-confidence { font-size: .85rem; color: var(--text-muted); }

/* ── Notices and forms ──────────────────────────────────────────────────── */
.notice {
  padding: .7rem 1rem; border-radius: var(--radius); margin-bottom: 1rem;
  background: var(--teal-light); border-left: 3px solid var(--teal);
}
.notice.error { background: #fbe9e7; border-left-color: var(--critical); }
.empty { color: var(--text-muted); font-style: italic; padding: 1.5rem 0; }

.form-panel { max-width: 380px; margin: 4rem auto; }
.form-panel label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .25rem; }
.form-panel input {
  width: 100%; padding: .55rem .7rem; margin-bottom: 1rem;
  border: 1px solid var(--border); border-radius: var(--radius); font-size: .95rem;
}
.button {
  background: var(--teal); color: var(--white); border: none;
  padding: .55rem 1.1rem; border-radius: var(--radius);
  font-size: .92rem; font-weight: 600; cursor: pointer;
}
.button:hover { background: #106363; }

/* Real-case note shown alongside each alert — it is what makes someone act. */
.lesson {
  font-size: .85rem; color: var(--text-muted);
  border-left: 2px solid var(--border); padding-left: .7rem; margin-top: .35rem;
}