/* =========================================================
   PMOC App — Design System
   ========================================================= */
:root{
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: #e6e9ef;
  --text: #1c2333;
  --text-muted: #6b7280;
  --primary: #0f5c4c;
  --primary-dark: #0b4438;
  --primary-light: #e6f3ef;
  --accent: #d4a537;
  --danger: #c0392b;
  --danger-light: #fdecea;
  --warn: #b8860b;
  --warn-light: #fff8e1;
  --ok: #1f8a56;
  --ok-light: #e8f7ee;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 2px 10px rgba(20,30,50,.05), 0 1px 2px rgba(20,30,50,.04);
  --shadow-md: 0 8px 24px rgba(20,30,50,.08);
  --sidebar-w: 252px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14.5px;
  line-height:1.5;
}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0 0 6px 0; letter-spacing:-0.01em;}
p{margin:0 0 10px 0;}

/* ---------- Layout shell ---------- */
.app-shell{display:flex; min-height:100vh;}

.sidebar{
  width:var(--sidebar-w);
  background:linear-gradient(180deg, var(--primary-dark), #06332a 120%);
  color:#eafaf3;
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0; left:0; bottom:0;
  z-index:50;
  transition:transform .25s ease;
}
.sidebar-brand{
  display:flex; align-items:center; gap:12px;
  padding:22px 20px 18px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand-mark{
  width:38px;height:38px;border-radius:10px;
  background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  font-size:19px; color:var(--accent);
  flex-shrink:0;
}
.brand-text{display:flex; flex-direction:column; line-height:1.25;}
.brand-text strong{font-size:15px; font-weight:700; color:#fff;}
.brand-text span{font-size:10.5px; color:#9fcabb; letter-spacing:.02em;}

.sidebar-nav{flex:1; overflow-y:auto; padding:14px 12px;}
.nav-section{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
  color:#7fb3a0; margin:16px 10px 6px 10px; font-weight:700;
}
.nav-section:first-child{margin-top:4px;}
.sidebar-nav a{
  display:flex; align-items:center; gap:11px;
  padding:9px 12px; border-radius:9px;
  color:#d8ece5; font-size:13.6px; font-weight:500;
  margin-bottom:2px;
  transition:background .15s, color .15s;
}
.sidebar-nav a .ico{width:18px; text-align:center; font-size:14px; opacity:.9;}
.sidebar-nav a:hover{background:rgba(255,255,255,.08); color:#fff;}
.sidebar-nav a.active{background:var(--accent); color:#24240b; font-weight:700;}
.sidebar-nav a.active .ico{opacity:1;}

.sidebar-user{
  display:flex; align-items:center; gap:10px;
  padding:16px 18px; border-top:1px solid rgba(255,255,255,.08);
}
.avatar{
  width:34px;height:34px;border-radius:50%;
  background:var(--accent); color:#2a2205; font-weight:800;
  display:flex;align-items:center;justify-content:center; flex-shrink:0;
}
.user-info{display:flex; flex-direction:column; overflow:hidden; flex:1;}
.user-info strong{font-size:12.8px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.user-info span{font-size:10.5px; color:#9fcabb; text-transform:capitalize;}
.logout-btn{
  width:30px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07); color:#f3c6bd; font-size:14px;
}
.logout-btn:hover{background:var(--danger); color:#fff;}

.main-wrap{margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh;}

.topbar{
  height:64px; background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:16px;
  padding:0 26px; position:sticky; top:0; z-index:30;
}
.topbar h1{font-size:18px; font-weight:700; flex:1;}
.menu-toggle{display:none; background:none;border:none;font-size:20px;cursor:pointer;color:var(--text);}
.topbar-right .chip{
  font-size:12.5px; color:var(--text-muted); background:var(--surface-2);
  padding:6px 12px; border-radius:20px; border:1px solid var(--border);
}

.content{padding:26px; flex:1;}
.page-footer{
  padding:16px 26px; font-size:11.5px; color:var(--text-muted);
  border-top:1px solid var(--border); background:var(--surface);
}

/* ---------- Cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px;
}
.card + .card{margin-top:20px;}
.card-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px; gap:12px; flex-wrap:wrap;
}
.card-header h2{font-size:16px; font-weight:700;}
.card-header .sub{color:var(--text-muted); font-size:12.5px; margin-top:2px;}

.grid{display:grid; gap:20px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:680px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}

/* KPI cards */
.kpi{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.kpi .kpi-icon{
  position:absolute; right:16px; top:16px; font-size:26px; opacity:.16;
}
.kpi .kpi-value{font-size:28px; font-weight:800; color:var(--primary-dark);}
.kpi .kpi-label{color:var(--text-muted); font-size:12.5px; margin-top:4px; font-weight:600; text-transform:uppercase; letter-spacing:.03em;}
.kpi.accent .kpi-value{color:var(--accent);}
.kpi.danger .kpi-value{color:var(--danger);}
.kpi.ok .kpi-value{color:var(--ok);}

/* ---------- Forms ---------- */
label{display:block; font-size:12.8px; font-weight:600; color:#374151; margin-bottom:5px;}
.form-group{margin-bottom:16px;}
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=tel], input[type=file], select, textarea{
  width:100%; padding:10px 13px; border:1.5px solid var(--border); border-radius:9px;
  font-family:inherit; font-size:13.8px; background:var(--surface-2); color:var(--text);
  transition:border-color .15s, background .15s;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--primary); background:#fff;
}
textarea{resize:vertical; min-height:80px;}
.form-row{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.form-row-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media(max-width:680px){.form-row,.form-row-3{grid-template-columns:1fr;}}
.form-hint{font-size:11.5px; color:var(--text-muted); margin-top:4px;}

.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:10px 18px; border-radius:9px; border:none; cursor:pointer;
  font-family:inherit; font-size:13.6px; font-weight:600;
  background:var(--primary); color:#fff; transition:filter .15s, background .15s;
}
.btn:hover{filter:brightness(1.08);}
.btn-secondary{background:var(--surface-2); color:var(--text); border:1.5px solid var(--border);}
.btn-danger{background:var(--danger);}
.btn-accent{background:var(--accent); color:#2a2205;}
.btn-sm{padding:6px 12px; font-size:12.4px; border-radius:7px;}
.btn-block{width:100%;}
.btn-group{display:flex; gap:10px; flex-wrap:wrap;}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto; border-radius:var(--radius-sm); border:1px solid var(--border);}
table{width:100%; border-collapse:collapse; background:var(--surface); font-size:13.4px;}
thead th{
  background:var(--surface-2); text-align:left; padding:11px 14px;
  font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted);
  border-bottom:1px solid var(--border); font-weight:700; white-space:nowrap;
}
tbody td{padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--surface-2);}
.text-right{text-align:right;}
.text-center{text-align:center;}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px;
  font-size:11.2px; font-weight:700; letter-spacing:.02em;
}
.badge-ok{background:var(--ok-light); color:var(--ok);}
.badge-danger{background:var(--danger-light); color:var(--danger);}
.badge-warn{background:var(--warn-light); color:var(--warn);}
.badge-muted{background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border);}
.badge-primary{background:var(--primary-light); color:var(--primary-dark);}

/* ---------- Alerts ---------- */
.alert{padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:13.4px; font-weight:500;}
.alert-success{background:var(--ok-light); color:var(--ok);}
.alert-error{background:var(--danger-light); color:var(--danger);}
.alert-info{background:var(--primary-light); color:var(--primary-dark);}

/* ---------- Login page ---------- */
.login-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 20% 20%, #0f5c4c, #082a22 70%);
  padding:20px;
}
.login-card{
  background:#fff; border-radius:20px; padding:44px 40px; width:100%; max-width:400px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.login-card .brand-mark{margin:0 auto 14px auto; width:52px; height:52px; font-size:26px; background:var(--primary-light); color:var(--primary);}
.login-card h1{text-align:center; font-size:20px;}
.login-card p.sub{text-align:center; color:var(--text-muted); font-size:13px; margin-bottom:26px;}

/* ---------- Checklist ---------- */
.checklist-group{margin-bottom:22px;}
.checklist-group h3{
  font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--primary-dark);
  border-bottom:2px solid var(--primary-light); padding-bottom:8px; margin-bottom:10px;
}
.checklist-item{
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
  padding:11px 14px; border-radius:9px; border:1px solid var(--border); margin-bottom:8px; background:var(--surface-2);
}
.checklist-item .item-num{font-weight:700; color:var(--text-muted); font-size:12.5px;}
.checklist-item .item-desc{font-size:13.3px;}
.checklist-item .item-desc .periodo{display:block; font-size:11px; color:var(--text-muted); margin-top:2px;}
.status-toggle{display:flex; gap:6px;}
.status-toggle input{display:none;}
.status-toggle label{
  margin:0; padding:6px 12px; border-radius:7px; border:1.5px solid var(--border);
  font-size:11.8px; font-weight:700; cursor:pointer; color:var(--text-muted); background:#fff;
}
.status-toggle input:checked + label.st-c{background:var(--ok); border-color:var(--ok); color:#fff;}
.status-toggle input:checked + label.st-nc{background:var(--danger); border-color:var(--danger); color:#fff;}
.status-toggle input:checked + label.st-nf{background:#9ca3af; border-color:#9ca3af; color:#fff;}

/* ---------- Photo upload ---------- */
.photo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; margin-top:12px;}
.photo-thumb{
  position:relative; border-radius:10px; overflow:hidden; border:1px solid var(--border); aspect-ratio:1/1;
  background:var(--surface-2);
}
.photo-thumb img{width:100%; height:100%; object-fit:cover;}
.photo-thumb .cap{position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.55); color:#fff; font-size:10.5px; padding:4px 6px;}

/* ---------- Report / print ---------- */
.report-doc{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:36px;}
.report-header{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:3px solid var(--primary); padding-bottom:16px; margin-bottom:20px;}
.report-header h1{font-size:20px; color:var(--primary-dark);}
.report-header .law{font-size:10.8px; color:var(--text-muted); max-width:420px;}
.report-meta{display:grid; grid-template-columns:repeat(2,1fr); gap:4px 24px; font-size:12.8px; margin-bottom:18px;}
.report-meta div span.label{color:var(--text-muted); font-weight:600; display:inline-block; min-width:120px;}
.sign-row{display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:40px;}
.sign-box{border-top:1.5px solid var(--text); padding-top:8px; text-align:center; font-size:12px;}

@media print{
  .sidebar, .topbar, .page-footer, .no-print{display:none !important;}
  .main-wrap{margin-left:0 !important;}
  body{background:#fff;}
  .content{padding:0;}
  .report-doc{box-shadow:none; border:none; padding:0;}
}

/* ---------- Responsive sidebar ---------- */
@media(max-width:920px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .main-wrap{margin-left:0;}
  .menu-toggle{display:block;}
}

/* ---------- Misc ---------- */
.text-muted{color:var(--text-muted);}
.mt-0{margin-top:0;}
.empty-state{text-align:center; padding:50px 20px; color:var(--text-muted);}
.empty-state .icon{font-size:38px; margin-bottom:10px; opacity:.5;}
.filters{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px;}
.filters select, .filters input{width:auto; min-width:160px;}