/* Estética de referência: www.carpintariadavermelha.pt — minimal, branco,
     maiúsculas espaçadas, itálico nas legendas, linhas finas, acento madeira. */
  :root { --ink:#161616; --sub:#6b6b6b; --linha:#e6e2dc; --suave:#faf9f7; --madeira:#8a6d4a; }
  * { box-sizing:border-box; margin:0; }
  body { font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; color:var(--ink);
         background:#fff; line-height:1.55; font-size:14px; }
  .topo { text-align:center; padding:26px 16px 14px; border-bottom:1px solid var(--linha); }
  .topo h1 { font-size:17px; font-weight:400; letter-spacing:.32em; text-transform:uppercase; }
  .topo p { font-style:italic; color:var(--sub); font-size:12px; margin-top:2px; }
  nav { display:flex; flex-wrap:wrap; justify-content:center; border-bottom:1px solid var(--linha);
        position:sticky; top:0; background:#fff; z-index:5; }
  nav button { background:none; border:0; padding:13px 16px; cursor:pointer; font-size:10.5px;
        letter-spacing:.2em; text-transform:uppercase; color:var(--sub); }
  nav button.on { color:var(--ink); border-bottom:2px solid var(--ink); }
  nav .sess { margin-left:auto; padding:10px 14px; font-size:12px; color:var(--sub); display:flex; align-items:center; gap:8px; }
  main { max-width:1180px; margin:0 auto; padding:26px 20px 90px; }
  .grelha { display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:18px; align-items:start; }
  .cartao { border:1px solid var(--linha); padding:16px 18px; background:#fff; }
  .cartao h3 { font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
               color:var(--madeira); margin-bottom:10px; }
  .item { padding:7px 8px; border-bottom:1px solid var(--linha); cursor:pointer; }
  .item:hover { background:var(--suave); }
  .item.sel { background:var(--suave); border-left:2px solid var(--ink); }
  .meta { color:var(--sub); font-style:italic; font-size:12px; }
  label { display:block; font-size:11px; color:var(--sub); margin:8px 0 2px; }
  input, select, textarea { width:100%; padding:7px 8px; border:1px solid var(--linha);
        font-size:13px; background:#fff; font-family:inherit; }
  button.b { border:1px solid var(--ink); background:none; padding:8px 16px; margin-top:10px;
        font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; color:var(--ink); }
  button.b:hover:not(:disabled) { background:var(--ink); color:#fff; }
  button.b:disabled { opacity:.35; cursor:default; }
  button.mini { border:1px solid var(--linha); background:none; padding:2px 8px; font-size:11px;
        cursor:pointer; color:var(--ink); margin:0 2px; }
  button.mini:hover { border-color:var(--ink); }
  table { width:100%; border-collapse:collapse; font-size:13px; }
  th { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--sub);
       font-weight:600; text-align:left; }
  th, td { border-bottom:1px solid var(--linha); padding:6px 6px; vertical-align:top; }
  .num { text-align:right; white-space:nowrap; }
  .estado { display:inline-block; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
            border:1px solid var(--linha); padding:1px 7px; color:var(--sub); white-space:nowrap; }
  .estado.ok { border-color:#9db89d; color:#4a6b4a; }
  .estado.meio { border-color:#cbb27a; color:#8a6d2a; }
  .estado.mau { border-color:#c99; color:#a05050; }
  .kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); border:1px solid var(--linha); }
  .kpis > div { text-align:center; padding:14px 6px; border-right:1px solid var(--linha); border-bottom:1px solid var(--linha); }
  .kpis b { display:block; font-size:26px; font-weight:300; }
  .kpis b.alerta { color:#a05050; }
  .kpis span { font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--sub); }
  .erro { color:#a05050; font-size:12px; padding:8px 20px; }
  .totais div { display:flex; justify-content:space-between; padding:3px 0; font-size:13px; }
  .totais .fin { font-weight:600; border-top:1px solid var(--ink); padding-top:6px; }
  .fita { background:var(--suave); border:1px solid var(--linha); padding:10px 14px;
          font-size:12.5px; margin-bottom:18px; }
  /* Ciclo 30 — visibilidade: contadores de alerta na navegação e KPIs clicáveis. */
  .badge { display:inline-block; min-width:16px; padding:0 4px; margin-left:5px; border-radius:9px;
           background:#a05050; color:#fff; font-size:9.5px; line-height:16px; text-align:center;
           letter-spacing:0; vertical-align:1px; }
  .kpis > div.click { cursor:pointer; }
  .kpis > div.click:hover { background:var(--suave); }
  input.filtro { margin-bottom:8px; font-style:italic; }
  /* Ciclo 30 — telemóvel/tablet da oficina. */
  @media (max-width:640px){
    .topo { padding:16px 10px 10px; }
    .topo h1 { font-size:13px; letter-spacing:.2em; }
    nav { overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start; }
    nav button { padding:12px 10px; flex:0 0 auto; }
    nav .sess { padding:8px 8px; flex:0 0 auto; }
    main { padding:16px 10px 90px; }
    .grelha { grid-template-columns:1fr; }
    .kpis { grid-template-columns:repeat(2,1fr); }
    .cartao { padding:12px 12px; }
    button.mini { padding:6px 10px; }
    .item { padding:10px 8px; }
  }