:root{
    --navy-deep:#0F1E29;
    --navy-mid:#17303F;
    --navy-line:#233F51;
    --gold:#C9A24E;
    --gold-soft:#E4CD8E;
    --cream:#F6F1E6;
    --ink:#16232B;
    --ink-soft:#66757E;
    --paper:#F7F5F0;
    --line:#E9E3D4;
    --ok-green:#4F7A57;
    --danger:#C05B3C;
    --radius:12px;
    --radius-sm:8px;
    --shadow-sm:0 1px 2px rgba(15,30,41,0.06);
    --shadow-md:0 6px 20px rgba(15,30,41,0.08);
    --shadow-lg:0 16px 40px rgba(15,30,41,0.14);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;height:100%;}
  body{
    background:var(--paper); color:var(--ink);
    font-family:'Inter',-apple-system,Segoe UI,sans-serif;
    -webkit-font-smoothing:antialiased;
    font-size:14px;
  }
  h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:500;margin:0;letter-spacing:-0.01em;}
  .label-caps{font-family:'Oswald','Arial Narrow',sans-serif;font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-soft);}

  /* ---- shell ---- */
  #shell{display:flex;height:100vh;}
  #sidebar{
    width:236px;flex:0 0 236px;background:linear-gradient(180deg,var(--navy-deep),#0A151E);
    color:var(--cream);display:flex;flex-direction:column;padding:22px 0;
  }
  #sidebar .brand{padding:0 22px 20px;border-bottom:1px solid rgba(255,255,255,0.08);margin-bottom:16px;text-align:left;}
  #sidebar .nav-item{
    margin:2px 12px;padding:10px 14px;font-size:13.5px;color:var(--cream);opacity:0.72;cursor:pointer;
    border-radius:8px; transition:background 0.15s, opacity 0.15s;
  }
  #sidebar .nav-item:hover{opacity:1;background:rgba(255,255,255,0.06);}
  #sidebar .nav-item.active{opacity:1;background:rgba(201,162,78,0.16);color:var(--gold-soft);font-weight:600;}
  #sidebar .nav-footer{margin-top:auto;padding:16px 22px 0;border-top:1px solid rgba(255,255,255,0.08);font-size:12px;opacity:0.75;}
  #sidebar .nav-footer button{
    background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:var(--cream);padding:6px 12px;border-radius:6px;
    font-size:11.5px;cursor:pointer;margin-top:10px;transition:background 0.15s;
  }
  #sidebar .nav-footer button:hover{background:rgba(255,255,255,0.14);}
  #content{flex:1;overflow-y:auto;padding:32px 42px 60px;}
  .content-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;flex-wrap:wrap;gap:12px;}
  .content-header h2{font-size:23px;}

  /* ---- buttons ---- */
  .btn{
    font-family:'Inter',sans-serif;font-size:13px;font-weight:600;padding:9px 17px;border-radius:8px;
    border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
    transition:transform 0.06s ease, box-shadow 0.15s ease, background 0.15s ease;
  }
  .btn:active{transform:translateY(1px);}
  .btn-primary{background:var(--navy-deep);color:var(--cream);box-shadow:var(--shadow-sm);}
  .btn-primary:hover{background:#0A151E;box-shadow:var(--shadow-md);}
  .btn-gold{background:linear-gradient(180deg,var(--gold),#BB9142);color:var(--navy-deep);box-shadow:var(--shadow-sm);}
  .btn-gold:hover{box-shadow:var(--shadow-md);}
  .btn-outline{background:#fff;border-color:var(--line);color:var(--ink);}
  .btn-outline:hover{background:#FBF8F2;border-color:#D8CFB5;}
  .btn-danger{background:transparent;color:var(--danger);border-color:rgba(192,91,60,0.4);}
  .btn-danger:hover{background:rgba(192,91,60,0.06);}
  .btn-sm{padding:6px 11px;font-size:12px;border-radius:6px;}

  /* ---- cards / tables ---- */
  .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:18px;box-shadow:var(--shadow-sm);}
  table{width:100%;border-collapse:collapse;}
  th{text-align:left;font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-soft);padding:10px 12px;border-bottom:1px solid var(--line);background:#FBF8F2;}
  th:first-child{border-top-left-radius:8px;}
  th:last-child{border-top-right-radius:8px;}
  td{padding:11px 12px;font-size:13.3px;border-bottom:1px solid #F2EEE2;vertical-align:top;}
  tr:last-child td{border-bottom:none;}
  tr:hover td{background:#FCFAF4;}
  .badge{display:inline-block;font-size:10.5px;font-family:'Oswald',sans-serif;letter-spacing:0.5px;text-transform:uppercase;padding:3px 10px;border-radius:20px;}
  .badge.ok{background:rgba(79,122,87,0.13);color:var(--ok-green);}
  .badge.warn{background:rgba(201,162,78,0.2);color:#8a6b23;}
  .badge.off{background:#EFEBE0;color:#8a8478;}
  .badge.bad{background:rgba(192,91,60,0.12);color:var(--danger);}

  /* ---- forms ---- */
  .field{margin-bottom:14px;}
  .field label{display:block;font-size:12px;color:var(--ink-soft);margin-bottom:5px;font-weight:600;}
  .field input, .field select, .field textarea{
    width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:13.5px;font-family:inherit;background:#fff;
    transition:border-color 0.15s, box-shadow 0.15s;
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,78,0.18);
  }
  .field textarea{min-height:90px;resize:vertical;}
  .row{display:flex;gap:14px;flex-wrap:wrap;}
  .row > .field{flex:1;min-width:180px;}
  .panel-form{background:#FBF8F2;border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:18px;}
  .kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:24px;}
  .kpi{background:linear-gradient(155deg,var(--navy-deep),#0A151E);color:var(--cream);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-sm);}
  .kpi .k{font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold-soft);margin-bottom:7px;opacity:0.9;}
  .kpi .v{font-family:'Fraunces',serif;font-size:25px;}
  .muted{color:var(--ink-soft);font-size:12.5px;}
  .empty-state{padding:34px;text-align:center;color:var(--ink-soft);font-size:13px;background:#fff;border:1px dashed var(--line);border-radius:var(--radius);}
  .toast{position:fixed;bottom:22px;right:22px;background:var(--navy-deep);color:var(--cream);padding:13px 20px;border-radius:9px;font-size:13px;box-shadow:var(--shadow-lg);z-index:999;max-width:360px;}

  /* ---- filter bar (search + filtros por lista) ---- */
  .filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px;}
  .filter-bar input[type=text]{padding:8px 12px;border:1px solid var(--line);border-radius:8px;font-size:13px;min-width:200px;}
  .filter-bar select{padding:8px 12px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:#fff;}
  .filter-bar input:focus, .filter-bar select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,78,0.18);}

  .codigo-pill{font-family:'Oswald',sans-serif;font-size:10.5px;letter-spacing:1px;color:#8a6b23;background:rgba(201,162,78,0.14);padding:3px 9px;border-radius:20px;white-space:nowrap;}

  /* ---- timeline (rastreio) ---- */
  .timeline{position:relative;padding-left:22px;}
  .timeline::before{content:"";position:absolute;left:5px;top:4px;bottom:4px;width:2px;background:var(--line);}
  .timeline-item{position:relative;padding-bottom:18px;}
  .timeline-item::before{content:"";position:absolute;left:-22px;top:3px;width:10px;height:10px;border-radius:50%;background:var(--gold);border:2px solid #fff;box-shadow:0 0 0 1px var(--line);}
  .timeline-item .evt{font-weight:600;font-size:13px;}
  .timeline-item .meta{font-size:11.5px;color:var(--ink-soft);margin-top:2px;}