/* =====================================================================
   LORAM THEME — Design system da aplicação Test Sites (v1, 2026-08-07)
   Fonte única de verdade: todas as páginas geradas referenciam este
   arquivo (assets/loram_theme.css no bucket Dashboards).
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Marca */
  --lrm-red:        #8B0000;   /* Loram red — ação, ativo, perigo forte  */
  --lrm-red-hover:  #6d0000;
  --lrm-dark:       #1f1f1f;   /* sidebar / superfícies escuras          */
  --lrm-card-dark:  #333333;   /* KPI cards                              */

  /* Superfícies e texto */
  --bg-page:        #eef0f3;
  --bg-panel:       #ffffff;
  --bg-subtle:      #f7f8fa;
  --text:           #1a1a1a;
  --text-2:         #52514e;   /* secundário  */
  --text-3:         #898989;   /* terciário / legendas */
  --border:         #e5e6e9;

  /* Semântica de STATUS (semáforo) */
  --ok:             #2e7d32;   /* verde  — dentro da premissa / meta     */
  --ok-bg:          #e1f5ee;
  --warn:           #b06e10;   /* âmbar  — atenção / parcial             */
  --warn-bg:        #faeeda;
  --bad:            #a02020;   /* vermelho — violação / defeito / perda  */
  --bad-bg:         #fcebeb;
  --info:           #274b8f;   /* azul   — nota metodológica / literatura */
  --info-bg:        #eef2fb;

  /* Semântica de CENÁRIOS (fixa em TODOS os gráficos e tabelas) */
  --cen-atual:      #d62728;   /* prática atual                          */
  --cen-premissa:   #2ca02c;   /* premissa cumprida                      */
  --cen-ref:        #9e9e9e;   /* referência sem esmerilhamento          */

  /* Séries de dados (W1/W2/W3/área — mesmas cores em todo lugar) */
  --serie-w1:       #8e44ad;
  --serie-w2:       #d35400;
  --serie-w3:       #16a085;
  --serie-area:     #c0392b;
  --serie-medido:   #1f77b4;   /* pontos medidos / tráfego               */
  --serie-esm:      #8e44ad;   /* ativo consumido por esmerilhamento     */

  /* Tipografia */
  --font: 'Bricolage Grotesque', system-ui, sans-serif;
  --fs-h1: 22px;  --fs-h2: 15px;  --fs-h3: 12.5px;
  --fs-body: 13px; --fs-small: 11px; --fs-micro: 10.5px;
  --fs-kpi: 28px;

  /* Geometria */
  --r-panel: 15px;  --r-card: 12px;  --r-pill: 14px;
  --shadow: 0 2px 12px rgba(0,0,0,.07);
  --shadow-dark: 0 3px 12px rgba(0,0,0,.25);
  --sidebar-w: 250px;
  --gap: 14px;
}

/* ---------- 2. BASE ---------- */
* { box-sizing: border-box; font-family: var(--font); }
body { margin:0; background:var(--bg-page); color:var(--text);
       font-size:var(--fs-body); font-variant-numeric:tabular-nums; }
h1 { font-size:var(--fs-h1); font-weight:800; letter-spacing:-.3px; margin:4px 4px 8px; }
a { color:var(--lrm-red); }

/* ---------- 3. NAVEGAÇÃO ---------- */
.lrm-sidebar { display:flex; flex-direction:column; justify-content:space-between;
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w);
  background:var(--lrm-dark); color:#fff; overflow-y:auto; z-index:1000; }
.lrm-logo { text-align:center; padding:22px 0 10px; }
.lrm-logo img { width:75%; max-width:190px; }
.lrm-menu { list-style:none; margin:0; padding:0; }
.lrm-menu a { font-size:14px; display:flex; align-items:center; padding:12px 24px;
  text-decoration:none; color:#fff; }
.lrm-menu a:hover, .lrm-menu a.active { background:var(--lrm-red); }
.lrm-icon { width:20px; height:20px; margin-right:14px; filter:brightness(0) invert(1); }
.lrm-div { border:0; height:1px; width:60%; background:#444; margin:24px auto 12px; }
main.lrm-main { margin-left:var(--sidebar-w); padding:18px 22px; }
@media (max-width:820px) { .lrm-sidebar { display:none; } main.lrm-main { margin-left:0; } }

/* chips de ferrovia (contexto multi-ferrovia) */
.lrm-chips { display:flex; align-items:center; gap:10px; font-size:12.5px;
  color:var(--text-3); margin-bottom:var(--gap); flex-wrap:wrap; }
.lrm-chip { padding:4px 16px; border-radius:var(--r-pill); background:#e2e4e8; color:#888; }
.lrm-chip.on { background:var(--lrm-red); color:#fff; font-weight:700; }
.lrm-logo-fer { float:right; height:36px; margin:2px 6px 0 0; }

/* ---------- 4. COMPONENTES ---------- */
/* KPI card (escuro) */
.lrm-kpis { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:var(--gap); }
.lrm-kpi { flex:1 1 195px; background:var(--lrm-card-dark); color:#fff;
  border-radius:var(--r-panel); padding:14px 16px; text-align:center;
  box-shadow:var(--shadow-dark); transition:transform .25s; }
.lrm-kpi:hover { transform:translateY(-4px); }
.lrm-kpi .l { font-size:11.5px; color:#ddd; margin-bottom:5px; }
.lrm-kpi .v { font-size:var(--fs-kpi); font-weight:800; }
.lrm-kpi .e { font-size:var(--fs-micro); color:#bbb; margin-top:4px; }
.lrm-kpi.ruim .v { color:#FF5252; }
.lrm-kpi.bom  .v { color:#7ce07f; }

/* Painel claro */
.lrm-box { background:var(--bg-panel); border-radius:var(--r-panel); padding:14px;
  box-shadow:var(--shadow); margin-bottom:var(--gap); }
.lrm-box h2 { font-size:var(--fs-h2); font-weight:700; margin:0 0 10px 0; }
.lrm-box h3 { font-size:var(--fs-h3); font-weight:600; color:#444; margin:0 0 6px 2px; }

/* Cards claros (dentro de páginas de site) */
.lrm-cards { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.lrm-card { flex:1 1 150px; background:var(--bg-panel); border:1px solid var(--border);
  border-radius:var(--r-card); padding:10px 12px; }
.lrm-card.ok   { border-color:var(--cen-premissa); background:#f4fbf4; }
.lrm-card.ruim { border-color:var(--bad); background:#fdf3f2; }
.lrm-card .l { font-size:var(--fs-small); color:var(--text-2); margin-bottom:4px; }
.lrm-card .v { font-size:19px; font-weight:700; }
.lrm-card .e { font-size:var(--fs-micro); color:var(--text-2); margin-top:3px; }

/* Tabelas */
table.lrm-tbl { width:100%; border-collapse:collapse; font-size:12px; }
table.lrm-tbl th { text-align:left; color:var(--text-3); font-weight:600; padding:6px 8px;
  border-bottom:2px solid var(--border); text-transform:uppercase;
  font-size:10px; letter-spacing:.5px; }
table.lrm-tbl td { padding:8px; border-bottom:1px solid #f0f0ee; vertical-align:middle; }
table.lrm-tbl tr.cinza td { color:#aaa; font-style:italic; }
table.lrm-tbl tr.morto td { background:#faf6f6; }
table.lrm-tbl tr:hover td { background:var(--bg-subtle); }

/* Badges */
.lrm-badge { display:inline-block; padding:2px 9px; border-radius:11px;
  font-size:var(--fs-micro); font-weight:700; }
.lrm-badge.ok    { background:var(--ok-bg);   color:var(--ok); }
.lrm-badge.aviso { background:var(--warn-bg); color:var(--warn); }
.lrm-badge.fora  { background:var(--bad-bg);  color:var(--bad); }
.lrm-badge.info  { background:var(--info-bg); color:var(--info); }
/* redundância de daltonismo: cenários sempre com badge além da cor */
.lrm-badge.pratica  { background:#fbe9e7; color:#a33327; border:1px dashed var(--cen-atual); }
.lrm-badge.premissa { background:#e8f5e9; color:#1d6b21; border:1px solid var(--cen-premissa); }
.lrm-badge.neutro   { background:#f0f0ec; color:#666; }

/* Storytelling (Knaflic): resumo-diretor e rótulos de ato da narrativa */
.lrm-gi { background:var(--bg-panel); border-left:5px solid var(--lrm-red);
  border-radius:0 12px 12px 0; box-shadow:var(--shadow); padding:13px 18px;
  margin-bottom:var(--gap); }
.lrm-gi .gi { font-size:15.5px; font-weight:800; line-height:1.45; }
.lrm-gi .gi-sub { font-size:11.5px; color:var(--text-2); margin-top:5px; }
.lrm-ato { font-size:10px; font-weight:800; letter-spacing:1px; color:#999;
  margin:2px 4px 6px; text-transform:uppercase; }

/* Alertas */
.lrm-alerta { border-radius:14px; padding:12px 16px; margin-bottom:var(--gap);
  font-size:13px; box-shadow:var(--shadow); background:var(--bg-panel); }
.lrm-alerta.vermelho { background:#fdecea; border-left:6px solid var(--lrm-red); }
.lrm-alerta.ambar    { background:#fdf6e8; border-left:6px solid #c88a1e; }
.lrm-alerta.azul     { background:var(--info-bg); border-left:6px solid var(--info); }

/* Barras horizontais (ativo, orçamento) */
.lrm-barra { height:20px; border-radius:5px; overflow:hidden; display:flex;
  font-size:10px; color:#fff; font-weight:600; margin:4px 0 2px 0; }
.lrm-barra > div { display:flex; align-items:center; justify-content:center;
  white-space:nowrap; overflow:hidden; }

/* Barra de progresso vida×alvo */
.lrm-vbar { background:#ecedf0; border-radius:4px; height:14px; width:140px;
  position:relative; display:inline-block; vertical-align:middle; }
.lrm-vbar i { position:absolute; left:0; top:0; bottom:0; border-radius:4px; }
.lrm-vbar b { position:absolute; top:-3px; bottom:-3px; width:2.5px; background:#111; }

/* Botões */
.lrm-btn { background:var(--lrm-red); color:#fff; border:none; padding:10px 22px;
  border-radius:8px; font-size:13px; font-weight:700; cursor:pointer;
  text-decoration:none; display:inline-block; }
.lrm-btn:hover { background:var(--lrm-red-hover); }
.lrm-btn.sec { background:#919191; }
.lrm-btn.sec:hover { background:var(--lrm-red); }

/* Filtros (fase futura — já padronizados) */
.lrm-filterbar { display:flex; gap:10px; align-items:center; padding:10px 14px;
  background:var(--bg-panel); border-radius:12px; box-shadow:var(--shadow);
  margin-bottom:var(--gap); }
.lrm-select { flex:1; padding:10px 18px; border:none; border-radius:20px;
  background:#eeeeee; font-size:13px; color:#333; }

/* Fotos de site */
.lrm-foto { width:54px; height:36px; object-fit:cover; border-radius:7px;
  vertical-align:middle; margin-right:8px; box-shadow:0 1px 4px rgba(0,0,0,.3); }

/* Utilidades */
.lrm-leg { font-size:var(--fs-micro); color:var(--text-3); margin-top:5px; }
.lrm-eco { color:var(--ok); font-weight:700; }
.lrm-verm { color:var(--bad); }
.lrm-grande { font-size:22px; font-weight:800; }
.lrm-duas { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
@media (max-width:1100px) { .lrm-duas { grid-template-columns:1fr; } }
.lrm-fund { background:var(--info-bg); border:1px solid #c9d6ee; border-radius:10px;
  padding:10px 13px; font-size:var(--fs-small); color:#333; }