/* CAD RH – identidade CAD Engenharia de Incêndio */
:root {
	--cad-teal-900: #024c52;
	--cad-teal-700: #00737b;
	--cad-teal-500: #009999;
	--cad-teal-100: #e0f0f0;
	--cad-teal-50: #f2f8f8;
	--cad-orange: #f7931d;
	--cad-orange-700: #c96f06;
	--cad-ink: #1b2a2c;
	--cad-ink-2: #4a5d5f;
	--cad-ink-3: #7c8d8e;
	--cad-line: #dde8e8;
	--cad-bg: #f3f7f7;
	--cad-card: #ffffff;
	--cad-red: #c0392b;
	--cad-red-bg: #fdecea;
	--cad-amber-bg: #fff3e3;
	--cad-green: #1e8a5a;
	--cad-green-bg: #e6f5ee;
	--cad-blue-bg: #e6f1f8;
	--cad-radius: 10px;
	--cad-shadow: 0 1px 2px rgba(2, 76, 82, .06), 0 4px 16px rgba(2, 76, 82, .05);
	--cad-head: "Montserrat", "Segoe UI", system-ui, sans-serif;
	--cad-body: "Open Sans", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body.cad-rh { background: var(--cad-bg); color: var(--cad-ink); font: 14px/1.5 var(--cad-body); -webkit-font-smoothing: antialiased; }
.cad-rh a { color: var(--cad-teal-700); text-decoration: none; }
.cad-rh a:hover { color: var(--cad-teal-500); }
.cad-rh h1, .cad-rh h2, .cad-rh h3 { font-family: var(--cad-head); letter-spacing: -.01em; margin: 0; }

/* Sidebar */
.cad-side {
	position: fixed; inset: 0 auto 0 0; width: 248px; display: flex; flex-direction: column;
	background: linear-gradient(180deg, var(--cad-teal-700) 0%, var(--cad-teal-900) 100%);
	color: #fff; padding: 26px 16px 18px; z-index: 10; overflow: hidden;
}
.cad-side::after { /* triângulo laranja da marca */
	content: ""; position: absolute; right: -40px; bottom: 70px; width: 0; height: 0;
	border-left: 90px solid transparent; border-right: 90px solid transparent; border-bottom: 150px solid rgba(247, 147, 29, .09);
	pointer-events: none;
}
.cad-brand img { width: 180px; display: block; margin: 0 6px; }
.cad-side-tag { margin: 14px 6px 26px; font: 700 11px/1 var(--cad-head); letter-spacing: .16em; text-transform: uppercase; color: var(--cad-orange); display: flex; align-items: center; gap: 8px; }
.cad-side-tag::before { content: ""; width: 18px; height: 2px; background: var(--cad-orange); }
.cad-side nav { display: flex; flex-direction: column; gap: 2px; }
.cad-side nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: rgba(255,255,255,.82); font: 600 14px/1.2 var(--cad-head); }
.cad-side nav a svg { width: 19px; height: 19px; fill: currentColor; opacity: .85; flex: none; }
.cad-side nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.cad-side nav a.is-active { background: #fff; color: var(--cad-teal-700); box-shadow: inset 3px 0 0 var(--cad-orange); }
.cad-side-user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 14px 6px 0; border-top: 1px solid rgba(255,255,255,.14); }
.cad-side-user strong { display: block; font: 600 13px/1.2 var(--cad-head); }
.cad-side-user a { color: rgba(255,255,255,.7); font-size: 12px; }
.cad-side-user a:hover { color: var(--cad-orange); }
.cad-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--cad-orange); color: #fff; font: 700 14px var(--cad-head); flex: none; }

/* Main */
.cad-main { margin-left: 248px; padding: 32px 36px 60px; max-width: 1360px; }
.cad-main.is-full { margin: 0 auto; max-width: 560px; padding-top: 80px; }
.cad-solo-logo img { width: 260px; display: block; margin: 0 auto 28px; }
.cad-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.cad-head h1 { font-size: 26px; font-weight: 800; color: var(--cad-teal-900); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cad-head p { margin: 4px 0 0; color: var(--cad-ink-3); }
.cad-back { display: inline-block; font: 600 12px var(--cad-head); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; }
.cad-head-stat { background: var(--cad-card); border-radius: var(--cad-radius); box-shadow: var(--cad-shadow); padding: 12px 18px; display: grid; gap: 2px; justify-items: end; border-top: 3px solid var(--cad-orange); }
.cad-head-stat span { color: var(--cad-ink-3); font-size: 12px; }
.cad-head-stat strong { font: 800 28px/1 var(--cad-head); color: var(--cad-teal-700); }
.cad-head-stat small { font-size: 13px; font-weight: 600; color: var(--cad-ink-3); }

/* Buttons */
.cad-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; background: var(--cad-orange); color: #fff !important; font: 700 13px/1 var(--cad-head); padding: 12px 18px; border-radius: 8px; letter-spacing: .01em; transition: background .15s, transform .05s; }
.cad-btn:hover { background: var(--cad-orange-700); }
.cad-btn:active { transform: translateY(1px); }
.cad-btn:disabled { opacity: .45; cursor: not-allowed; }
.cad-btn.is-ghost { background: transparent; color: var(--cad-teal-700) !important; box-shadow: inset 0 0 0 1.5px var(--cad-teal-500); }
.cad-btn.is-ghost:hover { background: var(--cad-teal-50); }
.cad-btn.is-danger { background: var(--cad-red); }
.cad-link { background: none; border: 0; padding: 2px 4px; cursor: pointer; color: var(--cad-teal-700); font: 600 12px var(--cad-body); }
.cad-link:hover { text-decoration: underline; }
.cad-link.is-danger { color: var(--cad-red); }
.cad-inline { display: inline; }

/* Cards */
.cad-card { background: var(--cad-card); border-radius: var(--cad-radius); box-shadow: var(--cad-shadow); padding: 20px 22px; margin-bottom: 18px; }
.cad-card > h2, .cad-card-head h2 { font-size: 16px; font-weight: 700; color: var(--cad-teal-900); }
.cad-card > h2 { margin-bottom: 12px; }
.cad-card > h2 + * { margin-top: 0; }
.cad-card > h2:not(:first-child) { margin-top: 22px; }
.cad-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.cad-card-head a { font: 600 13px var(--cad-head); }
details.cad-card > summary { cursor: pointer; font: 700 15px var(--cad-head); color: var(--cad-teal-900); list-style: none; }
details.cad-card > summary::before { content: "＋ "; color: var(--cad-orange); }
details.cad-card[open] > summary::before { content: "－ "; }
details.cad-card[open] > summary { margin-bottom: 16px; }
.cad-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.cad-grid-2.is-narrow-right { grid-template-columns: 1.7fr 1fr; }
.cad-muted { color: var(--cad-ink-3); }
.cad-card hr { border: 0; border-top: 1px solid var(--cad-line); margin: 20px 0; }

/* KPIs */
.cad-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.cad-kpi { background: var(--cad-card); border-radius: var(--cad-radius); box-shadow: var(--cad-shadow); padding: 16px 18px; display: grid; gap: 4px; border-left: 4px solid var(--cad-teal-500); }
.cad-kpi span { color: var(--cad-ink-2); font: 600 12px var(--cad-head); text-transform: uppercase; letter-spacing: .05em; }
.cad-kpi strong { font: 800 32px/1.1 var(--cad-head); color: var(--cad-teal-900); }
.cad-kpi em { font-style: normal; color: var(--cad-ink-3); font-size: 12px; }
.cad-kpi.is-late { border-left-color: var(--cad-red); }
.cad-kpi.is-late strong { color: var(--cad-red); }
.cad-kpi.is-soon { border-left-color: var(--cad-orange); }
.cad-kpi.is-soon strong { color: var(--cad-orange-700); }
.cad-kpi.is-ok { border-left-color: var(--cad-green); }

/* Lists */
.cad-due { list-style: none; margin: 0; padding: 0; }
.cad-due li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cad-line); }
.cad-due li:last-child { border-bottom: 0; }
.cad-due a { display: grid; color: var(--cad-ink); }
.cad-due a strong { font: 600 14px var(--cad-head); }
.cad-due a span { color: var(--cad-ink-3); font-size: 12px; }
.cad-due a:hover strong { color: var(--cad-teal-700); }
.cad-list { margin: 0 0 12px; padding-left: 18px; }
.cad-list li { margin: 4px 0; }
.cad-list.is-rules li { margin: 10px 0; }
.cad-log { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.cad-log li { padding: 6px 0; border-bottom: 1px solid var(--cad-line); color: var(--cad-ink-2); }
.cad-log time { display: block; color: var(--cad-ink-3); font-weight: 600; }
.cad-alert-box { margin-top: 14px; padding: 12px 14px; border-radius: 8px; background: var(--cad-teal-50); display: grid; gap: 2px; font-size: 12px; color: var(--cad-ink-2); }
.cad-alert-box strong { color: var(--cad-teal-700); font-family: var(--cad-head); }

/* Badges */
.cad-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font: 700 11px/1.5 var(--cad-head); letter-spacing: .02em; white-space: nowrap; background: var(--cad-teal-100); color: var(--cad-teal-700); }
.cad-pill.is-vencida { background: var(--cad-red-bg); color: var(--cad-red); }
.cad-pill.is-pendente { background: var(--cad-amber-bg); color: var(--cad-orange-700); }
.cad-pill.is-programado { background: var(--cad-blue-bg); color: #1f5f8b; }
.cad-pill.is-quitado { background: var(--cad-green-bg); color: var(--cad-green); }
.cad-pill.is-aquisicao { background: #eef1f1; color: var(--cad-ink-2); }
.cad-pill.is-perdido { background: #2b2b2b; color: #fff; }
.cad-days { display: inline-block; font: 700 11px var(--cad-head); padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.cad-days.is-late { background: var(--cad-red); color: #fff; }
.cad-days.is-soon { background: var(--cad-amber-bg); color: var(--cad-orange-700); }
.cad-days.is-ok { background: var(--cad-green-bg); color: var(--cad-green); }
.cad-days.is-info { background: var(--cad-blue-bg); color: #1f5f8b; }

/* Toolbar */
.cad-toolbar { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.cad-toolbar input[type=search] { flex: 1 1 260px; max-width: 420px; padding: 11px 14px; border: 1px solid var(--cad-line); border-radius: 8px; font: inherit; background: #fff; }
.cad-toolbar input[type=search]:focus { outline: 2px solid var(--cad-teal-500); border-color: transparent; }
.cad-filters { display: inline-flex; background: #fff; border-radius: 8px; padding: 3px; box-shadow: var(--cad-shadow); flex-wrap: wrap; }
.cad-filters button { border: 0; background: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; font: 600 12px var(--cad-head); color: var(--cad-ink-2); }
.cad-filters button.is-active { background: var(--cad-teal-700); color: #fff; }

/* Tables */
.cad-table-wrap { padding: 0; overflow-x: auto; }
.cad-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cad-table th { text-align: left; font: 700 11px var(--cad-head); text-transform: uppercase; letter-spacing: .05em; color: var(--cad-teal-700); padding: 12px 14px; border-bottom: 2px solid var(--cad-teal-100); background: var(--cad-teal-50); white-space: nowrap; }
.cad-table th[data-sort] { cursor: pointer; user-select: none; }
.cad-table th[data-sort]::after { content: " ↕"; opacity: .35; }
.cad-table th.is-asc::after { content: " ↑"; opacity: 1; }
.cad-table th.is-desc::after { content: " ↓"; opacity: 1; }
.cad-table td { padding: 11px 14px; border-bottom: 1px solid var(--cad-line); vertical-align: middle; }
.cad-table tbody tr[data-href] { cursor: pointer; }
.cad-table tbody tr:hover td { background: #fafdfd; }
.cad-table td a { font-weight: 600; color: var(--cad-ink); }
.cad-table td a:hover { color: var(--cad-teal-700); }
.cad-table td small { color: var(--cad-ink-3); }
.cad-table .c { text-align: center; }
.cad-table .r { text-align: right; white-space: nowrap; }
.cad-table.is-compact th { padding: 8px 10px; }
.cad-table.is-compact td { padding: 8px 10px; }
.cad-table.cad-rules td { font-size: 14px; padding: 12px 14px; }
.cad-table.cad-rules tr:nth-child(1) td:last-child strong { color: var(--cad-green); }
.cad-table.cad-rules tr:last-child td:last-child { color: var(--cad-red); font-weight: 600; }

/* Period card */
.cad-period { border-left: 4px solid var(--cad-teal-500); }
.cad-period.is-vencida { border-left-color: var(--cad-red); }
.cad-period.is-pendente { border-left-color: var(--cad-orange); }
.cad-period.is-quitado { border-left-color: var(--cad-green); opacity: .9; }
.cad-period.is-aquisicao { border-left-color: #b9c7c8; }
.cad-period-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cad-period-stats > div { background: var(--cad-teal-50); border-radius: 8px; padding: 10px 12px; display: grid; gap: 2px; align-content: start; }
.cad-period-stats span { font: 600 11px var(--cad-head); color: var(--cad-ink-3); text-transform: uppercase; letter-spacing: .04em; }
.cad-period-stats strong { font: 800 20px/1.2 var(--cad-head); color: var(--cad-teal-900); }
.cad-period-stats strong.is-date { font-size: 16px; }
.cad-period-stats small { font-size: 12px; color: var(--cad-ink-3); font-weight: 600; }
.cad-period-stats em { font-style: normal; font-size: 11px; color: var(--cad-ink-3); }
.cad-period-stats .is-key { background: var(--cad-teal-700); }
.cad-period-stats .is-key span, .cad-period-stats .is-key small { color: rgba(255,255,255,.75); }
.cad-period-stats .is-key strong { color: #fff; }
.cad-period .cad-table { margin-bottom: 12px; }
.cad-program, .cad-adjust { margin-top: 10px; border-top: 1px dashed var(--cad-line); padding-top: 10px; }
.cad-program > summary, .cad-adjust > summary { cursor: pointer; font: 700 13px var(--cad-head); color: var(--cad-teal-700); }
.cad-adjust > summary { color: var(--cad-ink-3); font-weight: 600; font-size: 12px; }
.cad-program[open] > summary, .cad-adjust[open] > summary { margin-bottom: 12px; }
.cad-program > summary::marker { color: var(--cad-orange); }

/* Forms */
.cad-form { display: block; }
.cad-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 16px; margin-bottom: 14px; }
.cad-fields label { display: grid; gap: 5px; font: 600 12px var(--cad-head); color: var(--cad-ink-2); }
.cad-fields label.is-wide { grid-column: 1 / -1; }
.cad-fields input, .cad-fields textarea, .cad-fields select, .cad-row input { font: 14px var(--cad-body); padding: 9px 11px; border: 1px solid var(--cad-line); border-radius: 7px; background: #fff; color: var(--cad-ink); width: 100%; }
.cad-fields input:focus, .cad-fields textarea:focus { outline: 2px solid var(--cad-teal-500); border-color: transparent; }
.cad-fields output { padding: 9px 0; font: 700 15px var(--cad-head); color: var(--cad-teal-700); }
.cad-check { display: flex !important; align-items: center; gap: 8px !important; align-self: end; padding-bottom: 10px; }
.cad-check input { width: auto !important; }
.cad-row { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.cad-row label { display: grid; gap: 5px; font: 600 12px var(--cad-head); color: var(--cad-ink-2); }
.cad-hint { font-size: 12px; color: var(--cad-ink-3); margin: -4px 0 12px; }

/* Flash */
.cad-flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-weight: 600; background: var(--cad-green-bg); color: var(--cad-green); border-left: 4px solid var(--cad-green); }
.cad-flash.is-erro { background: var(--cad-red-bg); color: var(--cad-red); border-left-color: var(--cad-red); }
.cad-flash.is-aviso { background: var(--cad-amber-bg); color: var(--cad-orange-700); border-left-color: var(--cad-orange); }

/* Calendar */
.cad-cal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cad-cal-month { border: 1px solid var(--cad-line); border-radius: 8px; padding: 12px 14px; min-height: 120px; }
.cad-cal-month h3 { font-size: 14px; color: var(--cad-teal-700); display: flex; justify-content: space-between; margin-bottom: 8px; }
.cad-cal-month h3 span { background: var(--cad-teal-100); border-radius: 999px; padding: 0 8px; font-size: 12px; }
.cad-cal-month ul { list-style: none; margin: 0; padding: 0; }
.cad-cal-month li { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 4px 0; border-bottom: 1px dotted var(--cad-line); }
.cad-cal-month li span { color: var(--cad-ink-3); white-space: nowrap; }

.cad-empty { text-align: center; background: #fff; border-radius: var(--cad-radius); padding: 40px; box-shadow: var(--cad-shadow); }
.cad-empty h2 { color: var(--cad-teal-900); margin-bottom: 8px; }
.cad-inactive ul { margin: 0; padding-left: 18px; }

@media (max-width: 1100px) {
	.cad-kpis { grid-template-columns: repeat(2, 1fr); }
	.cad-grid-2, .cad-grid-2.is-narrow-right { grid-template-columns: 1fr; }
	.cad-cal { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
	.cad-side { position: static; width: auto; padding: 16px; }
	.cad-side nav { flex-direction: row; overflow-x: auto; }
	.cad-side nav a { white-space: nowrap; }
	.cad-side-tag { margin: 10px 6px 12px; }
	.cad-side-user { display: none; }
	.cad-main { margin-left: 0; padding: 20px 16px 40px; }
	.cad-kpis, .cad-cal { grid-template-columns: 1fr; }
}
@media print {
	.cad-side, .cad-btn, .cad-program, .cad-adjust, form { display: none !important; }
	.cad-main { margin: 0; padding: 0; }
	.cad-card { box-shadow: none; border: 1px solid #ccc; }
}

/* Login */
.cad-login-page { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, var(--cad-teal-700) 0%, var(--cad-teal-900) 100%); padding: 24px 16px; }
.cad-login { width: 100%; max-width: 880px; display: grid; grid-template-columns: 1fr 1fr; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.cad-login-brand { position: relative; padding: 44px 40px; color: #fff; background: var(--cad-teal-700); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 360px; }
.cad-login-brand::after { content: ""; position: absolute; right: -30px; top: -20px; border-left: 120px solid transparent; border-right: 120px solid transparent; border-bottom: 200px solid rgba(247,147,29,.16); }
.cad-login-brand img { width: 220px; position: absolute; top: 40px; left: 40px; }
.cad-login-brand h1 { font-size: 28px; font-weight: 800; }
.cad-login-brand p { margin: 6px 0 0; opacity: .8; }
.cad-login-brand h1::before { content: ""; display: block; width: 36px; height: 3px; background: var(--cad-orange); margin-bottom: 14px; }
.cad-login-form { padding: 44px 40px; display: grid; gap: 16px; align-content: center; }
.cad-login-form h2 { font-size: 20px; color: var(--cad-teal-900); }
.cad-login-form label { display: grid; gap: 6px; font: 600 12px var(--cad-head); color: var(--cad-ink-2); }
.cad-login-form input { font: 15px var(--cad-body); padding: 11px 12px; border: 1px solid var(--cad-line); border-radius: 8px; }
.cad-login-form input:focus { outline: 2px solid var(--cad-teal-500); border-color: transparent; }
.cad-login-form .cad-btn { justify-content: center; padding: 14px; font-size: 14px; }
.cad-login-form .cad-flash { margin: 0; }
.cad-login-warn { margin: 0; font-size: 12px; color: var(--cad-orange-700); }
@media (max-width: 720px) { .cad-login { grid-template-columns: 1fr; } .cad-login-brand { min-height: 200px; padding: 28px; } .cad-login-brand img { top: 28px; left: 28px; width: 170px; } .cad-login-form { padding: 28px; } }
.cad-side-user a + a { margin-left: 0; }

/* Empresas */
.cad-select { padding: 10px 12px; border: 1px solid var(--cad-line); border-radius: 8px; font: 600 12px var(--cad-head); color: var(--cad-ink-2); background: #fff; }
.cad-emp-tag { display: inline-block; padding: 2px 8px; border-radius: 5px; font: 700 10px/1.6 var(--cad-head); letter-spacing: .04em; text-transform: uppercase; background: var(--cad-teal-100); color: var(--cad-teal-700); vertical-align: middle; }
.cad-emp-tag.is-e2 { background: #fff0dd; color: var(--cad-orange-700); }
.cad-head p .cad-emp-tag { margin-right: 6px; }

.cad-side-back { display: block; margin: -14px 6px 18px; font: 600 12px var(--cad-head); color: rgba(255,255,255,.75) !important; }
.cad-side-back:hover { color: var(--cad-orange) !important; }

/* Perfil somente leitura (o bloqueio real é no servidor) */
.is-readonly main form, .is-readonly .cad-head .cad-btn, .is-readonly .cad-program, .is-readonly .cad-adjust, .is-readonly details.cad-card > form, .is-readonly .cad-link { display: none !important; }
.cad-flash.is-info { background: var(--cad-blue-bg); color: #1f5f8b; border-left-color: #1f5f8b; }