:root{
  --pv-primary:#184c75;
  --pv-primary-2:#2f6f9d;
  --pv-accent:#00c2a8;
  --pv-accent-2:#5eead4;
  --pv-ink:#0b1b2a;
  --pv-muted:#5b6b7a;
  --pv-bg:#f5f8ff;
  --pv-card:#ffffff;
  --pv-border:rgba(15,59,94,.12);
  --pv-shadow:0 14px 34px rgba(15,59,94,.10);
  --pv-radius:18px;
  --pv-radius-sm:14px;
  --pv-focus:0 0 0 4px rgba(0,194,168,.20);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--pv-ink);
  background:
    radial-gradient(1000px 600px at 20% -10%, rgba(47,111,157,.22), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(0,194,168,.14), transparent 55%),
    var(--pv-bg);
}

a{color:inherit;text-decoration:none}

.container{
  max-width:1180px;
  margin:0 auto;
  padding:18px 18px 28px;
}

/* Header */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px 18px;
  border:1px solid var(--pv-border);
  border-radius:var(--pv-radius);
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  box-shadow:var(--pv-shadow);
  backdrop-filter: blur(10px);
}

.logo{display:flex;align-items:center;gap:12px;min-width:240px}
.logo img{width:44px;height:44px;object-fit:contain}
.logo h1{
  margin:0;
  font-size:20px;
  font-weight:600;
  letter-spacing:.2px;
}
.logo h1 .pipe{opacity:.45;font-weight:500;margin:0 8px}
.subtitle{
  display:block;
  margin-top:2px;
  font-size:12px;
  color:var(--pv-muted);
  font-weight:500;
}

.nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nav a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:600;
  font-size:13px;
  color:rgba(11,27,42,.84);
  transition:transform .08s ease, background .15s ease, border-color .15s ease;
}
.nav a:hover{background:rgba(24,76,117,.06); border-color:rgba(24,76,117,.10)}
.nav a:active{transform:translateY(1px)}
.nav a.active{
  background:linear-gradient(180deg, rgba(24,76,117,.14), rgba(0,194,168,.10));
  border-color:rgba(24,76,117,.16);
}

/* Main sections */
.main-content{margin-top:16px}
.hero{
  border:1px solid var(--pv-border);
  border-radius:var(--pv-radius);
  background:
    radial-gradient(900px 340px at 20% 0%, rgba(0,194,168,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
  box-shadow:var(--pv-shadow);
  overflow:hidden;
}
.hero-content{padding:22px}
.hero h2{margin:0 0 10px;font-size:26px;letter-spacing:.2px}
.lead{margin:0 0 18px;color:var(--pv-muted);font-weight:500;line-height:1.55}

.quick-actions{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  margin:18px 0 16px;
}
.action-card{
  border:1px solid var(--pv-border);
  border-radius:var(--pv-radius);
  background:rgba(255,255,255,.86);
  padding:16px 16px 14px;
  box-shadow:0 10px 22px rgba(15,59,94,.08);
  transition:transform .10s ease, box-shadow .18s ease, border-color .18s ease;
}
.action-card:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 30px rgba(15,59,94,.12);
  border-color:rgba(24,76,117,.22);
}
.action-icon{
  width:42px;height:42px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg, rgba(24,76,117,.14), rgba(0,194,168,.12));
  border:1px solid rgba(24,76,117,.16);
  margin-bottom:10px;
  font-size:20px;
}
.action-card h3{margin:0 0 6px;font-size:15px}
.action-card p{margin:0;color:var(--pv-muted);font-size:13px;line-height:1.45}

.stats-overview{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}
.stat-item{
  border:1px solid var(--pv-border);
  border-radius:var(--pv-radius);
  background:rgba(255,255,255,.78);
  padding:14px 14px 12px;
}
.stat-value{
  font-size:28px;
  font-weight:700;
  letter-spacing:.2px;
  background:linear-gradient(90deg, var(--pv-primary), var(--pv-accent));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.stat-label{color:var(--pv-muted);font-weight:600;font-size:12px;margin-top:2px}

.instructions{
  margin-top:16px;
  border:1px solid var(--pv-border);
  border-radius:var(--pv-radius);
  background:rgba(255,255,255,.86);
  box-shadow:var(--pv-shadow);
  padding:18px;
}
.instructions h2{margin:0 0 12px;font-size:18px}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.instructions .step{
  border:1px solid var(--pv-border);
  border-radius:var(--pv-radius);
  background:rgba(255,255,255,.9);
  padding:14px;
}
.instructions .step-number{
  width:32px;height:32px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg, rgba(24,76,117,.16), rgba(0,194,168,.12));
  border:1px solid rgba(24,76,117,.16);
  font-weight:800;
  margin-bottom:10px;
}
.instructions .step h3{margin:0 0 6px;font-size:14px}
.instructions .step p{margin:0;color:var(--pv-muted);font-size:13px;line-height:1.45}

/* Forms */
.form-group{margin:12px 0}
label{display:block;font-weight:700;font-size:13px;margin-bottom:6px}
.form-input,.form-select,.form-textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(15,59,94,.18);
  padding:12px 12px;
  font-size:14px;
  outline:none;
  background:rgba(255,255,255,.92);
  transition:box-shadow .15s ease, border-color .15s ease;
}
.form-textarea{min-height:92px;resize:vertical}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:rgba(0,194,168,.55);
  box-shadow:var(--pv-focus);
}
.form-hint{display:block;margin-top:6px;color:var(--pv-muted);font-size:12px}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 14px;
  border-radius:14px;
  border:1px solid transparent;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  transition:transform .08s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  user-select:none;
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  color:#fff;
  background:linear-gradient(90deg, var(--pv-primary), var(--pv-primary-2));
  box-shadow:0 10px 22px rgba(24,76,117,.22);
}
.btn-primary:hover{box-shadow:0 16px 26px rgba(24,76,117,.26)}
.btn-outline{
  background:rgba(255,255,255,.9);
  border-color:rgba(15,59,94,.18);
  color:rgba(11,27,42,.86);
}
.btn-outline:hover{border-color:rgba(24,76,117,.26); background:rgba(24,76,117,.05)}
.btn-danger{
  background:linear-gradient(90deg, #b91c1c, #ef4444);
  color:#fff;
}

.step-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

/* Tickets / grids */
.ticket-process .step{
  display:none;
  padding:18px;
  border:1px solid var(--pv-border);
  border-radius:var(--pv-radius);
  background:rgba(255,255,255,.88);
  box-shadow:var(--pv-shadow);
}
.ticket-process .step.active{display:block}
.step-description{margin:0 0 10px;color:var(--pv-muted);font-weight:500}

.queues-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.queue-card{
  border:1px solid var(--pv-border);
  border-radius:var(--pv-radius);
  padding:14px;
  background:rgba(255,255,255,.9);
  box-shadow:0 10px 22px rgba(15,59,94,.08);
  cursor:pointer;
  transition:transform .10s ease, border-color .18s ease;
}
.queue-card:hover{transform:translateY(-1px); border-color:rgba(24,76,117,.24)}
.queue-card.selected{border-color:rgba(0,194,168,.7); box-shadow:0 14px 26px rgba(0,194,168,.12)}
.queue-name{font-weight:800;margin:0 0 6px}
.queue-desc{margin:0;color:var(--pv-muted);font-size:13px;line-height:1.45}

/* Cards / panels */
.card{
  border:1px solid var(--pv-border);
  border-radius:var(--pv-radius);
  background:rgba(255,255,255,.9);
  box-shadow:var(--pv-shadow);
}
.card-header{padding:16px 16px 0}
.card-body{padding:16px}
.card-title{margin:0;font-size:16px}
.card-subtitle{margin:6px 0 0;color:var(--pv-muted);font-size:13px}

/* Tables */
.table-wrap{overflow:auto;border-radius:var(--pv-radius-sm);border:1px solid var(--pv-border)}
table{width:100%;border-collapse:collapse;background:rgba(255,255,255,.92)}
th,td{padding:12px 12px;border-bottom:1px solid rgba(15,59,94,.08);text-align:left;font-size:13px}
th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:rgba(11,27,42,.68)}
tr:hover td{background:rgba(24,76,117,.04)}

/* Modals */
.modal{
  position:fixed;inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(6,14,24,.55);
  z-index:50;
}
.modal.open{display:flex}
.modal-content{
  width:min(720px, 100%);
  border-radius:22px;
  border:1px solid rgba(255,255,255,.20);
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.88));
  box-shadow:0 26px 70px rgba(0,0,0,.25);
  overflow:hidden;
}
.modal-header{padding:16px 16px 10px;border-bottom:1px solid rgba(15,59,94,.10)}
.modal-body{padding:16px}
.modal-footer{padding:14px 16px;display:flex;gap:10px;justify-content:flex-end;border-top:1px solid rgba(15,59,94,.10)}

/* Footer */
.footer{
  margin-top:16px;
  padding:14px 16px;
  color:rgba(11,27,42,.70);
  text-align:center;
  font-size:12px;
}
.footer .version{opacity:.7}

/* ===== Emissão / Acompanhamento ===== */
.ticket-process,.tracking-container{
  margin-top:16px;
  border:1px solid var(--pv-border);
  border-radius:var(--pv-radius);
  background:rgba(255,255,255,.86);
  box-shadow:var(--pv-shadow);
  padding:18px;
}

.ticket-process .step{display:none}
.ticket-process .step.active{display:block}

.step-description{color:var(--pv-muted);font-weight:500;margin-top:-4px}

.queues-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.queue-card{
  border:1px solid var(--pv-border);
  border-radius:var(--pv-radius);
  background:rgba(255,255,255,.92);
  padding:14px;
  cursor:pointer;
  transition:transform .10s ease, box-shadow .18s ease, border-color .18s ease;
}
.queue-card:hover{transform:translateY(-1px);box-shadow:0 18px 30px rgba(15,59,94,.12);border-color:rgba(24,76,117,.22)}
.queue-card.selected{border-color:rgba(0,194,168,.55);box-shadow:var(--pv-focus)}

.ticket-result{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:14px;
  margin-top:12px;
}

.ticket-card{
  border:1px solid var(--pv-border);
  border-radius:var(--pv-radius);
  background:rgba(255,255,255,.92);
  padding:16px;
}

.ticket-code{
  font-size:42px;
  font-weight:900;
  letter-spacing:1px;
  margin:4px 0 6px;
  background:linear-gradient(90deg, var(--pv-primary), var(--pv-accent));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.qr-box{
  border:1px solid var(--pv-border);
  border-radius:var(--pv-radius);
  background:rgba(255,255,255,.92);
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:220px;
}

/* ===== Atendimento ===== */
.attendance-container{
  max-width:1180px;
  margin:0 auto;
  padding:18px;
}

.attendance-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border:1px solid var(--pv-border);
  border-radius:var(--pv-radius);
  background:rgba(255,255,255,.86);
  box-shadow:var(--pv-shadow);
}

.status-indicator{font-weight:900}
.status-indicator.active{color:var(--pv-accent)}

.attendance-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:12px;
}

.panel{
  border:1px solid var(--pv-border);
  border-radius:var(--pv-radius);
  background:rgba(255,255,255,.88);
  box-shadow:var(--pv-shadow);
  padding:16px;
}

@media (max-width: 860px){
  .ticket-result{grid-template-columns:1fr}
  .attendance-grid{grid-template-columns:1fr}
}

/* Responsive */
@media (max-width: 980px){
  .quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .queues-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logo{min-width:unset}
}

@media (max-width: 640px){
  .header{flex-direction:column;align-items:flex-start}
  .nav{justify-content:flex-start}
  .quick-actions{grid-template-columns:1fr}
  .stats-overview{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .queues-grid{grid-template-columns:1fr}
}

/* TV / painel helpers (painel.html usa classes próprias, mas isso ajuda) */
.tv-body{
  background:#060e18;
  color:#e9f2ff;
}