:root {
  --navy: #082b47;
  --navy-deep: #041c30;
  --blue: #087ed8;
  --blue-soft: #e8f4ff;
  --bg: #f3f7fb;
  --text: #10283a;
  --muted: #708493;
  --line: #dce7ef;
  --green: #179d73;
  --orange: #f2a33a;
  --purple: #7168df;
  --shadow: 0 10px 30px rgba(8, 43, 71, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, "Segoe UI", Arial, sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.brand { display: flex; align-items: center; gap: 11px; }
.brand b { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(145deg,#2495e6,#0874c7); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px #0278ca55; }
.brand span { font-weight: 800; font-size: 21px; color: #fff; }

.login-layout { min-height: 100vh; display: grid; grid-template-columns: 1.08fr .92fr; background: #fff; }
.login-visual { position: relative; overflow: hidden; padding: 42px 6vw 56px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(90deg,rgba(3,26,45,.97) 0%,rgba(3,26,45,.77) 46%,rgba(3,26,45,.12) 100%), url('login-industrial.png') center/cover no-repeat; }
.login-visual:after { content: ""; position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(transparent,rgba(2,19,33,.75)); pointer-events: none; }
.login-visual > * { position: relative; z-index: 1; }
.login-visual small, .login-card > small, header small { letter-spacing: 2.1px; font-size: 10px; color: #55b5ff; font-weight: 800; }
.login-visual h1 { max-width: 620px; font-size: clamp(43px,5vw,72px); font-weight: 500; letter-spacing: -2.4px; line-height: 1.03; margin: 17px 0; text-wrap: balance; }
.login-visual p { max-width: 580px; margin: 0; color: #d5e4ef; font-size: 17px; line-height: 1.6; }
.login-side { display: grid; place-items: center; padding: 36px clamp(28px,6vw,92px); background: #fff; }
.login-card { width: min(460px,100%); background: #fff; padding: 12px 0; }
.login-card h2 { margin: 15px 0 22px; font-size: clamp(31px,3vw,42px); line-height: 1.1; letter-spacing: -1.4px; font-weight: 600; }
.login-card label, .form label { display: flex; flex-direction: column; gap: 7px; font-size: 12px; font-weight: 750; margin: 15px 0; }
.login-card input, .form input, .form select, .form textarea { width: 100%; border: 1px solid #ccdbe6; border-radius: 10px; padding: 13px 14px; background: #fff; color: var(--text); outline: none; transition: border .2s,box-shadow .2s; }
.login-card input:focus, .form input:focus, .form select:focus, .form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px #1184d619; }
.login-card button, .form button { border: 0; background: linear-gradient(135deg,#0a86df,#0873c6); color: #fff; padding: 14px 18px; border-radius: 10px; font-weight: 800; box-shadow: 0 8px 20px #0877c833; }
.login-card button { width: 100%; margin-top: 5px; }
.hint { font-size: 11px; color: var(--muted); }
.alert { padding: 12px 15px; background: #eaf5ff; border: 1px solid #cce7fb; border-radius: 9px; margin: 12px 0; color: #195d8c; font-size: 12px; }

body > aside { position: fixed; inset: 0 auto 0 0; width: 244px; background: linear-gradient(165deg,var(--navy),var(--navy-deep)); padding: 28px 20px; display: flex; flex-direction: column; box-shadow: 7px 0 30px rgba(3,30,50,.08); }
aside nav { display: flex; flex-direction: column; margin-top: 42px; gap: 5px; }
aside nav:before { content: "OPERAÇÃO"; color: #6fa2c5; font-weight: 800; font-size: 9px; letter-spacing: 1.8px; padding: 0 12px 10px; }
aside nav a { position: relative; color: #b9d0df; text-decoration: none; padding: 13px 13px 13px 42px; border-radius: 9px; font-size: 13px; transition: .2s; }
aside nav a:before { content: "◇"; position: absolute; left: 15px; color: #78c3f7; font-size: 16px; }
aside nav a:first-child, aside nav a:hover { background: #ffffff12; color: #fff; box-shadow: inset 3px 0 #1595e9; }
aside form { margin-top: auto; }
.logout { width: 100%; border: 1px solid #ffffff25; background: #ffffff08; color: #fff; padding: 11px; border-radius: 9px; }
.app { margin-left: 244px; padding: 34px clamp(24px,3vw,50px) 70px; max-width: 1600px; }
.app > header { display: flex; justify-content: space-between; align-items: center; margin: -34px clamp(-50px,-3vw,-24px) 34px; padding: 23px clamp(24px,3vw,50px); background: #fff; border-bottom: 1px solid var(--line); }
.app h1 { margin: 6px 0 0; font-size: clamp(26px,3vw,36px); font-weight: 500; letter-spacing: -1.2px; }
.app header > span { font-size: 11px; color: var(--muted); background: #f4f8fb; padding: 9px 12px; border-radius: 99px; }
.kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 22px; }
.kpis article, .card { background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 20px; box-shadow: var(--shadow); }
.kpis article { position: relative; min-height: 102px; padding-left: 68px; display: flex; flex-direction: column; justify-content: center; }
.kpis article:before { position: absolute; left: 18px; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; content: "▣"; color: var(--blue); background: var(--blue-soft); }
.kpis article:nth-child(2):before { content: "◷"; color: var(--orange); background: #fff3df; }
.kpis article:nth-child(3):before { content: "✓"; color: var(--green); background: #e7f7f1; }
.kpis article:nth-child(4):before { content: "◴"; color: var(--purple); background: #f0edff; }
.kpis span { font-size: 10px; color: var(--muted); font-weight: 650; }
.kpis b { display: block; font-size: 27px; line-height: 1.15; margin-top: 3px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.card { margin-bottom: 18px; }
.card h2 { font-size: 18px; margin: 0 0 16px; letter-spacing: -.35px; }
.form textarea { min-height: 80px; resize: vertical; }
.task-form { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 15px; }
.table { overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.tr { min-width: 780px; display: grid; grid-template-columns: 1.2fr 1.4fr 1fr .8fr 1.5fr; gap: 12px; padding: 14px; border-bottom: 1px solid var(--line); font-size: 11px; align-items: center; }
.tr:last-child { border-bottom: 0; }
.tr.head { font-size: 9px; color: var(--muted); font-weight: 800; background: #f7fafc; letter-spacing: .4px; }
.tr span:first-child { display: flex; flex-direction: column; }
.tr small, .user-row small { color: var(--muted); }
.pill { background: #e8f4fd; color: #1675bd; padding: 6px 9px; border-radius: 99px; width: max-content; font-weight: 700; }
.task-actions { display: flex; gap: 4px; margin-top: 6px; }
.task-actions input { width: 55px; }
.task-actions button, .user-row button { border: 0; border-radius: 6px; padding: 6px 8px; background: #edf5fa; color: #176aa5; font-size: 9px; }
.user-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.user-row span { display: flex; flex-direction: column; font-size: 12px; }

@media (max-width: 900px) {
  .login-layout { grid-template-columns: 1fr; }
  .login-visual { min-height: 310px; padding: 28px; background-position: 65% center; }
  .login-visual h1 { font-size: 40px; }
  .login-side { padding: 40px 24px; }
  body > aside { position: static; width: auto; }
  aside nav { margin-top: 20px; }
  .app { margin-left: 0; }
  .kpis, .grid2 { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 560px) {
  .login-visual { min-height: 250px; }
  .login-visual p { display: none; }
  .kpis, .grid2, .task-form { grid-template-columns: 1fr; }
  .app { padding: 20px 14px; }
  .app > header { margin: -20px -14px 22px; padding: 20px 14px; align-items: flex-start; flex-direction: column; gap: 10px; }
}