@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Source+Sans+3:ital,wght@0,300;0,400;0,600;1,400&display=swap');
:root{--azul:#1565C0;--azul-escuro:#0D47A1;--azul-claro:#E3F2FD;--azul-medio:#1976D2;--azul-hover:#1248A0;--verde:#2E7D32;--verde-claro:#E8F5E9;--laranja:#E65100;--laranja-claro:#FFF3E0;--vermelho:#C62828;--cinza-1:#F8F9FA;--cinza-2:#E9ECEF;--cinza-3:#DEE2E6;--cinza-4:#CED4DA;--cinza-5:#ADB5BD;--cinza-6:#6C757D;--cinza-7:#495057;--cinza-8:#343A40;--texto:#1A202C;--texto-leve:#4A5568;--branco:#FFFFFF;--sidebar-bg:#0D2B5E;--sidebar-w:260px;--header-h:64px;--radius:10px;--radius-sm:6px;--radius-lg:16px;--shadow-sm:0 1px 3px rgba(0,0,0,.08);--shadow:0 4px 12px rgba(0,0,0,.10);--shadow-lg:0 8px 24px rgba(0,0,0,.12);--transition:.18s ease;--font-display:'Outfit',sans-serif;--font-body:'Source Sans 3',sans-serif}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--texto);background:#F0F4F8;min-height:100vh;line-height:1.6}
a{color:var(--azul);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--azul-escuro)}
input,select,textarea,button{font-family:var(--font-body)}
.app-wrapper{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);background:var(--sidebar-bg);position:fixed;top:0;left:0;bottom:0;display:flex;flex-direction:column;z-index:100;overflow-y:auto;overflow-x:hidden;transition:transform var(--transition)}
.sidebar-brand{padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0}
.sidebar-brand h1{font-family:var(--font-display);font-weight:800;font-size:1.25rem;color:var(--branco);letter-spacing:-.3px;line-height:1.2}
.sidebar-brand span{display:block;font-size:.72rem;font-weight:400;color:rgba(255,255,255,.5);letter-spacing:.5px;text-transform:uppercase;margin-top:2px}
.sidebar-municipio{margin:10px 14px;background:rgba(255,255,255,.07);border-radius:var(--radius-sm);padding:8px 12px;font-size:.78rem;color:rgba(255,255,255,.7);display:flex;align-items:center;gap:7px}
.sidebar-municipio strong{color:rgba(255,255,255,.95);font-weight:600}
.sidebar-nav{flex:1;padding:8px 0 16px}
.nav-group{margin-bottom:4px}
.nav-group-label{padding:10px 20px 4px;font-size:.68rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.35)}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 20px;color:rgba(255,255,255,.7);font-size:.88rem;font-weight:500;cursor:pointer;transition:all var(--transition);border-left:3px solid transparent;text-decoration:none}
.nav-item:hover{background:rgba(255,255,255,.07);color:var(--branco)}
.nav-item.active{background:rgba(255,255,255,.1);color:var(--branco);border-left-color:#64B5F6}
.nav-item svg{width:17px;height:17px;opacity:.8;flex-shrink:0}
.nav-item.active svg{opacity:1}
.sidebar-footer{padding:12px 14px;border-top:1px solid rgba(255,255,255,.08);flex-shrink:0}
.sidebar-user{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);transition:background var(--transition)}
.sidebar-user:hover{background:rgba(255,255,255,.07)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--azul-medio);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:.85rem;color:var(--branco);flex-shrink:0}
.sidebar-user-info{flex:1;min-width:0}
.sidebar-user-info strong{display:block;font-size:.82rem;font-weight:600;color:rgba(255,255,255,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-info span{font-size:.7rem;color:rgba(255,255,255,.45)}
.btn-logout{background:none;border:none;cursor:pointer;color:rgba(255,255,255,.4);transition:color var(--transition);padding:4px}
.btn-logout:hover{color:#EF9A9A}
.main-content{margin-left:var(--sidebar-w);flex:1;min-height:100vh;display:flex;flex-direction:column}
.topbar{height:var(--header-h);background:var(--branco);border-bottom:1px solid var(--cinza-3);display:flex;align-items:center;padding:0 28px;gap:16px;position:sticky;top:0;z-index:50;box-shadow:var(--shadow-sm)}
.topbar-title{flex:1;font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--texto)}
.topbar-actions{display:flex;align-items:center;gap:10px}
.btn-menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--cinza-7)}
.page-body{flex:1;padding:28px}
.card{background:var(--branco);border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid var(--cinza-3);overflow:hidden}
.card-header{padding:16px 20px;border-bottom:1px solid var(--cinza-2);display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-header h3{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--texto);display:flex;align-items:center;gap:8px}
.card-header h3 svg{color:var(--azul)}
.card-body{padding:20px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:var(--branco);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);border:1px solid var(--cinza-3);display:flex;align-items:flex-start;gap:14px;transition:transform var(--transition),box-shadow var(--transition)}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.stat-icon{width:46px;height:46px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-icon svg{width:22px;height:22px}
.stat-info{flex:1}
.stat-value{font-family:var(--font-display);font-size:1.9rem;font-weight:800;line-height:1;color:var(--texto)}
.stat-label{font-size:.78rem;color:var(--cinza-6);font-weight:500;margin-top:3px}
.stat-card.blue .stat-icon{background:var(--azul-claro);color:var(--azul)}
.stat-card.green .stat-icon{background:var(--verde-claro);color:var(--verde)}
.table-wrapper{overflow-x:auto}
table.sms-table{width:100%;border-collapse:collapse;font-size:.875rem}
.sms-table thead tr{background:var(--cinza-1);border-bottom:2px solid var(--cinza-3)}
.sms-table thead th{padding:10px 14px;text-align:left;font-family:var(--font-display);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.5px;color:var(--cinza-6);white-space:nowrap}
.sms-table tbody tr{border-bottom:1px solid var(--cinza-2);transition:background var(--transition)}
.sms-table tbody tr:hover{background:#F8FAFF}
.sms-table tbody td{padding:11px 14px;color:var(--texto-leve);vertical-align:middle}
.sms-table tbody td strong{color:var(--texto);font-weight:600}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:.72rem;font-weight:700;letter-spacing:.2px;white-space:nowrap}
.badge-protocolo{background:var(--cinza-1);border:1px solid var(--cinza-3);color:var(--cinza-7);font-family:'Courier New',monospace;font-size:.78rem;letter-spacing:1px;padding:3px 8px;border-radius:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 18px;border-radius:var(--radius-sm);font-family:var(--font-body);font-weight:600;font-size:.875rem;cursor:pointer;border:none;transition:all var(--transition);text-decoration:none;white-space:nowrap}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--azul);color:var(--branco)}
.btn-primary:hover{background:var(--azul-hover);color:var(--branco)}
.btn-success{background:var(--verde);color:var(--branco)}
.btn-success:hover{background:#1B5E20;color:var(--branco)}
.btn-outline{background:transparent;border:1.5px solid var(--cinza-4);color:var(--cinza-7)}
.btn-outline:hover{border-color:var(--azul);color:var(--azul);background:var(--azul-claro)}
.btn-danger{background:var(--vermelho);color:var(--branco)}
.btn-ghost{background:var(--cinza-1);border:1px solid var(--cinza-3);color:var(--cinza-7)}
.btn-ghost:hover{background:var(--cinza-2)}
.btn-sm{padding:5px 12px;font-size:.8rem}
.btn-lg{padding:11px 24px;font-size:1rem}
.btn-group{display:flex;gap:6px;flex-wrap:wrap}
.form-group{margin-bottom:18px}
.form-label{display:block;margin-bottom:5px;font-weight:600;font-size:.82rem;color:var(--texto)}
.form-label .req{color:var(--vermelho);margin-left:2px}
.form-control{width:100%;padding:9px 13px;border:1.5px solid var(--cinza-4);border-radius:var(--radius-sm);font-size:.88rem;font-family:var(--font-body);color:var(--texto);background:var(--branco);transition:border-color var(--transition),box-shadow var(--transition);outline:none}
.form-control:focus{border-color:var(--azul-medio);box-shadow:0 0 0 3px rgba(25,118,210,.12)}
.form-control::placeholder{color:var(--cinza-5)}
.form-control:disabled{background:var(--cinza-1);cursor:not-allowed}
textarea.form-control{resize:vertical;min-height:90px}
.form-row{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.form-hint{margin-top:4px;font-size:.75rem;color:var(--cinza-6)}
.flash-message{padding:12px 18px;border-radius:var(--radius-sm);margin-bottom:20px;display:flex;align-items:center;gap:10px;font-weight:500;font-size:.88rem;animation:slideIn .25s ease}
@keyframes slideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.flash-success{background:var(--verde-claro);color:var(--verde);border-left:4px solid var(--verde)}
.flash-error{background:#FFEBEE;color:var(--vermelho);border-left:4px solid var(--vermelho)}
.flash-info{background:var(--azul-claro);color:var(--azul);border-left:4px solid var(--azul)}
.flash-warning{background:var(--laranja-claro);color:var(--laranja);border-left:4px solid var(--laranja)}
.filtros-bar{background:var(--branco);border:1px solid var(--cinza-3);border-radius:var(--radius);padding:16px 20px;margin-bottom:20px;display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.filtros-bar .form-group{margin-bottom:0;min-width:160px;flex:1}
.paginacao{display:flex;align-items:center;gap:4px;padding:16px 20px;border-top:1px solid var(--cinza-2);font-size:.82rem}
.paginacao a,.paginacao span{padding:5px 10px;border-radius:var(--radius-sm);border:1px solid var(--cinza-3);color:var(--cinza-7);transition:all var(--transition)}
.paginacao a:hover{background:var(--azul-claro);border-color:var(--azul);color:var(--azul)}
.paginacao .atual{background:var(--azul);border-color:var(--azul);color:var(--branco)}
.paginacao-info{color:var(--cinza-6);margin-left:auto}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .15s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{background:var(--branco);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:620px;max-height:90vh;overflow-y:auto;animation:slideUp .2s ease}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.modal-header{padding:18px 22px;border-bottom:1px solid var(--cinza-2);display:flex;align-items:center;justify-content:space-between}
.modal-body{padding:22px}
.modal-footer{padding:14px 22px;border-top:1px solid var(--cinza-2);display:flex;justify-content:flex-end;gap:10px}
.empty-state{text-align:center;padding:48px 24px;color:var(--cinza-5)}
.empty-state svg{width:48px;height:48px;margin:0 auto 12px;opacity:.4}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--cinza-6);margin-bottom:20px}
.breadcrumb a{color:var(--azul)}
.breadcrumb .sep{color:var(--cinza-4)}
.tipo-tag{display:inline-flex;align-items:center;gap:5px;background:var(--azul-claro);color:var(--azul);border:1px solid rgba(25,118,210,.2);border-radius:20px;padding:2px 8px;font-size:.73rem;font-weight:600;margin:2px}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--cinza-2)}
::-webkit-scrollbar-thumb{background:var(--cinza-4);border-radius:3px}
.login-page{min-height:100vh;background:linear-gradient(135deg,#0D2B5E 0%,#1565C0 50%,#0D47A1 100%);display:flex;align-items:center;justify-content:center;padding:20px}
.login-box{background:var(--branco);border-radius:var(--radius-lg);box-shadow:0 20px 60px rgba(0,0,0,.3);width:100%;max-width:420px;overflow:hidden}
.login-header{background:linear-gradient(135deg,var(--azul-escuro),var(--azul-medio));padding:32px 32px 28px;text-align:center}
.login-header .logo-icon{width:56px;height:56px;border-radius:14px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.login-header .logo-icon svg{width:28px;height:28px;color:var(--branco)}
.login-header h1{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--branco);letter-spacing:-.3px}
.login-header p{font-size:.82rem;color:rgba(255,255,255,.7);margin-top:4px}
.login-form{padding:28px 32px 32px}
.login-form .btn-primary{width:100%;padding:11px;font-size:.95rem}
.login-footer{text-align:center;margin-top:20px;font-size:.75rem;color:var(--cinza-5)}
.text-center{text-align:center}.text-muted{color:var(--cinza-6)}.d-flex{display:flex}.align-center{align-items:center}
.mt-2{margin-top:8px}.mt-3{margin-top:16px}.mt-4{margin-top:24px}.mb-3{margin-bottom:16px}.mb-4{margin-bottom:24px}.w-100{width:100%}.hidden{display:none!important}
@media(max-width:768px){:root{--sidebar-w:0px}.sidebar{transform:translateX(-260px);width:260px}.sidebar.open{transform:translateX(0)}.main-content{margin-left:0}.btn-menu-toggle{display:flex}.page-body{padding:16px}.stats-grid{grid-template-columns:1fr 1fr}.form-row{grid-template-columns:1fr}}