/* ═══════════════════════════════════════════════
   ALLREGTECH — Design System
   Tema: Institucional Roxo Profundo
   Fonte: DM Sans + Lora
═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Lora:wght@600;700&display=swap');

:root {
  --primary:       #752174;
  --primary-dark:  #581158;
  --primary-light: #9b3a9a;
  --primary-muted: #e8d0e8;
  --accent:        #e6b800;
  --accent-dark:   #b8900a;
  --bg-body:       #f3edf3;
  --bg-panel:      #f7f2f7;
  --surface:       #ffffff;
  --surface-2:     #f2edf2;
  --border:        #ddd0dd;
  --text-main:     #2a0d2a;
  --text-muted:    #7a5a7a;
  --danger:        #c0392b;
  --success:       #27ae60;
  --warning:       #d68910;
  --info:          #1a6fa8;
  --shadow-sm:     0 2px 6px rgba(117,33,116,0.10);
  --shadow:        0 4px 16px rgba(117,33,116,0.14);
  --shadow-lg:     0 8px 32px rgba(117,33,116,0.18);
  --radius:        14px;
  --radius-sm:     8px;
}

* { margin:0; padding:0; box-sizing:border-box; font-family:'DM Sans', 'Segoe UI', sans-serif; }

body {
  background: var(--bg-body);
  background-image:
    radial-gradient(ellipse at 0% 0%, rgba(117,33,116,0.07) 0%, transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(230,184,0,0.05) 0%, transparent 60%);
  color: var(--text-main);
  min-height: 100vh;
  overflow-x: hidden;
  padding-bottom: 36px;
}

/* ── UTILITÁRIOS ── */
.hidden    { display:none!important; }
.flex      { display:flex; gap:10px; align-items:center; }
.flex-col  { display:flex; flex-direction:column; gap:10px; }
.space-between { justify-content:space-between; }
.center    { text-align:center; }
.mt-2      { margin-top:1rem; }
.mb-2      { margin-bottom:1rem; }
.small     { font-size:0.85rem; color:var(--text-muted); }
.bold      { font-weight:700; }

/* ── BOTÕES — Sistema padronizado ── */
/* Variáveis de tamanho de botão */
:root {
  --btn-font:        0.875rem;   /* 14px — tamanho único para todos os botões */
  --btn-font-sm:     0.8125rem;  /* 13px — variante pequena */
  --btn-font-mini:   0.75rem;    /* 12px — variante mini */
  --btn-pad-y:       9px;
  --btn-pad-x:       18px;
  --btn-pad-y-sm:    5px;
  --btn-pad-x-sm:    12px;
  --btn-pad-y-mini:  3px;
  --btn-pad-x-mini:  8px;
  --btn-radius:      var(--radius-sm);
  --btn-weight:      600;
  --btn-line-height: 1.4;
  --btn-height:      36px;       /* altura mínima padrão */
  --btn-height-sm:   28px;       /* altura mínima pequena */
}

.btn {
  /* Dimensões padronizadas */
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  /* Tipografia uniforme */
  font-size: var(--btn-font);
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
  font-weight: var(--btn-weight);
  line-height: var(--btn-line-height);
  letter-spacing: 0;
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Aparência base */
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-main);
  text-decoration: none;
  /* Transição */
  transition: background .18s, box-shadow .18s, transform .18s, border-color .18s, color .18s;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); box-shadow: none; }

/* Variantes de cor */
.btn-primary   { background: var(--primary);   color: white; border-color: var(--primary-dark); }
.btn-primary:hover   { background: var(--primary-dark); }
.btn-accent    { background: var(--accent);    color: #1a2e1a; border-color: var(--accent-dark); }
.btn-accent:hover    { background: var(--accent-dark); color: white; }
.btn-danger    { background: var(--danger);    color: white; border-color: #a93226; }
.btn-danger:hover    { background: #a93226; }
.btn-warning   { background: #f1c40f;          color: #333;  border-color: #d4ac0d; }
.btn-warning:hover   { background: #d4ac0d; }
.btn-info      { background: var(--info);      color: white; border-color: #155d8e; }
.btn-info:hover      { background: #155d8e; }
.btn-secondary { background: #6c757d;          color: white; border-color: #5a6268; }
.btn-secondary:hover { background: #5a6268; }
.btn-success   { background: var(--success);   color: white; border-color: #1e8a50; }
.btn-success:hover   { background: #1e8a50; }

/* Variante pequena */
.btn-sm {
  padding: var(--btn-pad-y-sm) var(--btn-pad-x-sm);
  font-size: var(--btn-font-sm);
}

/* Botões de ação: tamanho uniforme sem sair do container */
#view-operator > .panel-container > header > .flex,
#view-admin > .panel-container > header > .flex,
#view-driver > .panel-container > header > .flex,
#adm-tab-dashboard .flex.space-between > .flex {
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 8px;
}

#view-operator > .panel-container > header > .flex > .btn,
#view-admin > .panel-container > header > .flex > .btn,
#view-driver > .panel-container > header > .flex > .btn,
#adm-tab-dashboard .flex.space-between > .flex > .btn.btn-sm,
#view-driver .card .flex.mt-2 > .btn {
  flex: 1 1 118px;
  max-width: 132px;
  min-width: 0;
  font-size: 0.75rem;
  padding-left: 10px;
  padding-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#view-operator #op-desk {
  flex: 0 0 120px;
}

#session-timer-op,
#session-timer-admin {
  flex: 0 0 auto;
}

/* ADMIN: forçar botões com o mesmo tamanho visual */
#view-admin .admin-tabs {
  flex-wrap: wrap;
  gap: 8px;
}

#view-admin > .panel-container > header > .flex > .btn,
#view-admin .admin-tabs > .btn,
#adm-tab-dashboard .flex.space-between > .flex > .btn.btn-sm {
  flex: 0 0 132px;
  width: 132px;
  min-width: 132px;
  max-width: 132px;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  #view-operator > .panel-container > header > .flex > .btn,
  #view-admin > .panel-container > header > .flex > .btn,
  #view-driver > .panel-container > header > .flex > .btn,
  #adm-tab-dashboard .flex.space-between > .flex > .btn.btn-sm,
  #view-driver .card .flex.mt-2 > .btn {
    flex-basis: 110px;
    max-width: 118px;
    font-size: 0.72rem;
  }

  #view-admin .admin-tabs > .btn,
  #view-admin > .panel-container > header > .flex > .btn,
  #adm-tab-dashboard .flex.space-between > .flex > .btn.btn-sm {
    flex-basis: 112px;
    width: 112px;
    min-width: 112px;
    max-width: 112px;
  }
}

/* Variante mini (ex: ações em tabela) */
.btn-cancel-mini {
  padding: var(--btn-pad-y-mini) var(--btn-pad-x-mini);
  font-size: var(--btn-font-mini);
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
  font-weight: var(--btn-weight);
  background: var(--danger);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background .18s;
}
.btn-cancel-mini:hover { background: #a93226; }

/* ── INPUTS ── */
input, select, textarea {
  width: 100%; padding: 10px 12px; margin: 4px 0 14px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: 0.92rem; outline: none; background: var(--surface);
  color: var(--text-main); transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(117,33,116,0.12);
}

/* ── SEÇÕES ── */
.view-section { display:none; padding:24px; animation:fadeIn .3s; }
.view-section.active { display:block; }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* ── PANEL CONTAINER ── */
.panel-container {
 max-width: 1240px; /* Altere este valor para 1400px ou 1500px */
  margin: 0 auto;
  background: var(--surface);
  padding: 28px 32px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
 }

/* ── CARDS ── */
.card {
  background: var(--surface-2);
  padding: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* ── DASHBOARD (cores sólidas) ── */
#dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.dash-card {
  text-align: center;
  padding: 20px;
  color: #fff;
}

.dash-card-value {
  font-size: 2rem;
  font-weight: 700;
}

.dash-card-label {
  font-size: 0.9rem;
  opacity: 0.92;
}

.dash-card-primary   { background: var(--primary); }
.dash-card-success   { background: var(--success); }
.dash-card-info      { background: var(--info); }
.dash-card-warning   { background: var(--warning); }
.dash-card-accent    { background: var(--accent-dark); }
.dash-card-secondary { background: var(--primary-light); }
.dash-card-muted {
  background: var(--primary-muted);
  color: var(--text-main);
}

.module-card-solid {
  text-align: center;
  padding: 20px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
}

/* ── TABELAS ── */
table { width:100%; border-collapse:collapse; margin-top:10px; }
th, td { padding:11px 14px; text-align:left; border-bottom:1px solid var(--border); }
th { background: linear-gradient(135deg, #f0e0f0 0%, #ead0ea 100%); color: var(--primary-dark); font-weight:700; font-size:0.85rem; letter-spacing:0.3px; }
tr:hover td { background: #f7faf6; }

/* ── FILA DE ATENDIMENTO ── */
.queue-item {
  background: var(--surface);
  padding: 14px 16px;
  border-left: 5px solid var(--primary);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
  display: flex; justify-content: space-between; align-items: flex-start;
  border: 1px solid var(--border); border-left: 5px solid var(--primary);
}
.queue-item.priority { border-left-color: #8e44ad; background: #fdf5ff; }
.queue-item.called   { border-left-color: var(--accent); background: #fffde7; }

/* ── CALENDÁRIO (legado) ── */
.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:10px; }
.calendar-day  { padding:9px; background:var(--surface-2); text-align:center; cursor:pointer; border-radius:5px; border:1px solid transparent; }
.calendar-day:hover { background:var(--primary-muted); }
.calendar-day.selected { border-color:var(--primary); color:var(--primary); font-weight:700; }
.calendar-day.has-slots { background:var(--primary); color:white; font-weight:700; border-radius:5px; }

/* ── MODAIS ── */
.modal-overlay {
  position:fixed; inset:0;
  background: rgba(15,30,15,0.55);
  backdrop-filter: blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:1000;
}
.modal-box {
  background: var(--surface);
  padding: 26px;
  border-radius: var(--radius);
  width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
/* Alias: .modal = .modal-box (used in capacitação) */
.modal {
  background: var(--surface);
  border-radius: var(--radius);
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.modal-overlay input, .modal-overlay select, .modal-overlay textarea { pointer-events:auto; cursor:auto; }

/* Generic input utility */
.input {
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
  background: white;
}
.input:focus { border-color: var(--primary); }

/* ── TV ── */
.tv-layout { background:#ffffff; color:#1a1a1a; height:100vh; display:grid; grid-template-columns:70% 30%; }
.tv-layout .flex-col.center { padding-top:15vh; }
.ticket-big { font-size:10rem; font-weight:800; color:#1a1a1a; text-align:center; }
#tv-info  { margin-top:40px; font-size:2.5rem; color:#333333; }
#tv-desk  { font-weight:800; color:#c0392b; margin-top:30px; font-size:3.5rem; }
.blink { animation:blinker 1s linear infinite; }
@keyframes blinker { 50%{opacity:0;} }

/* ── LOGIN ── */
.login-header { display:flex; align-items:normal; gap:14px; margin-bottom:1px; }
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 8px 16px;
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(244, 247, 243, 0.92);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--border);
  z-index: 900;
  letter-spacing: 0.2px;
}
.logo-prefeitura  { width:80px; height:auto; object-fit:contain; }
.login-header h2  { margin:0; font-size:1.3rem; color:var(--primary); }
.login-header .small { margin:2px 0 0; color:#666; }

/* ── STATUS OPERADOR ── */
.status-waiting          { border-left:6px solid var(--primary); background:var(--surface-2); }
.status-served           { border-left:6px solid var(--accent); background:#fffde7; }
.status-called-elsewhere { border-left:6px solid #f1c40f; background:#fff9c4; }
.status-default          { border-left:6px solid #95a5a6; background:#f5f5f5; }
.selected                { background-color:var(--primary)!important; color:white!important; }
.visible-queue-item      { padding:8px 12px!important; font-size:0.9rem!important; margin-bottom:5px!important; }
.status-active           { color:var(--primary); font-weight:bold; }
.status-inactive         { color:var(--danger); font-weight:bold; }

/* ── LOGOS ── */
.prefeitura-wrap  { display:flex; justify-content:center; margin-top:4vh; margin-bottom:6px; pointer-events:none; }
.prefeitura-logo  { width:200px; max-width:28vw; height:auto; object-fit:cover; display:block; }
.logo-allregtech  { display:block; margin:0 auto 0px; width:120px; max-width:80%; object-fit:contain; }
.prefeitura-wrap  { margin-bottom:-28px; }
.panel-container  { padding-top:44px; }
.logo-allregtech[alt]:not([src]) { display:inline-block; font-weight:700; color:var(--primary); text-align:center; }

/* ── MODAL RADIO ── */
.modal-box input[type="radio"] { width:auto; margin:0 5px 0 0; accent-color:var(--primary); }
.modal-box label.flex { margin-bottom:10px; font-weight:normal; }

/* ── PORTAL HISTÓRICO ── */
#portal-history-list { padding:0; margin:0; list-style:none; }
#portal-history-list li { background:var(--surface-2); padding:12px 15px; margin-bottom:8px; border-radius:var(--radius-sm); border-left:4px solid var(--primary); box-shadow:var(--shadow-sm); }
.appt-info   { display:flex; flex-direction:column; gap:4px; }
.appt-time   { font-weight:600; color:var(--primary); }
.appt-status { font-size:0.85rem; color:var(--text-muted); }

/* ── BOTÕES ESPECIAIS ── */
.btn-exclamation { background:none; border:none; color:#ff6b6b; font-size:1.2rem; cursor:pointer; padding:0; margin-left:8px; transition:color .2s; }
.btn-exclamation:hover { color:var(--danger); }
.btn-close { background:none; border:none; font-size:1.5rem; color:#888; cursor:pointer; padding:0; margin:0; line-height:1; }
.btn-close:hover { color:var(--primary); }
.calendar-nav-btn { background:var(--primary); color:white; border:none; padding:7px 11px; border-radius:5px; cursor:pointer; font-size:1.2rem; font-weight:bold; transition:background .2s; }
.calendar-nav-btn:hover { background:var(--primary-dark); }
.filter-toggle { display:flex; align-items:center; font-weight:500; background:var(--primary-muted); padding:5px 10px; border-radius:5px; border:1px solid var(--primary); cursor:pointer; transition:background .2s; margin-right:20px; }
.filter-toggle.selected { background:var(--primary); color:white; }
.filter-toggle input[type="checkbox"] { margin-right:5px; }

/* ── WHATSAPP BALLOON ── */
.whatsapp-balloon {
  position:fixed; bottom:30px; right:30px; z-index:1000;
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(135deg, #25D366, #128C7E);
  color:white; padding:12px 20px; border-radius:50px;
  text-decoration:none; box-shadow:0 4px 18px rgba(37,211,102,0.4);
  transition:all .3s; animation:pulse-whatsapp 2s infinite;
}
.whatsapp-balloon:hover { transform:scale(1.05); box-shadow:0 6px 24px rgba(37,211,102,0.6); }
.whatsapp-icon { width:28px; height:28px; display:flex; align-items:center; justify-content:center; }
.whatsapp-icon svg { width:100%; height:100%; }
.whatsapp-text { font-weight:600; font-size:14px; }
@keyframes pulse-whatsapp {
  0%   { box-shadow:0 0 0 0 rgba(37,211,102,0.7); }
  70%  { box-shadow:0 0 0 15px rgba(37,211,102,0); }
  100% { box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

/* ── CLASSES AUSENTES ── */
.past            { opacity:0.38; cursor:not-allowed; pointer-events:none; }
.text-muted      { color:var(--text-muted); font-size:0.9rem; }
.text-danger     { color:var(--danger); font-size:0.9rem; }
.list-item       { background:var(--surface-2); padding:10px 14px; margin-bottom:8px; border-radius:var(--radius-sm); border-left:4px solid var(--primary); list-style:none; font-size:0.9rem; }
.scale-105       { transform:scale(1.05); }

/* ── ABAS DO ADMIN ── */
#view-admin .flex button.btn-primary {
  background: var(--primary);
  box-shadow: 0 2px 8px rgba(117,33,116,0.3);
  color: white;
}

/* ── RESPONSIVO ── */
@media (max-width: 640px) {
  .prefeitura-logo { width:86px; }
  .logo-allregtech { width:140px; }
  .panel-container { margin-top:6vh!important; padding:20px 16px; }
  .whatsapp-balloon { bottom:20px; right:20px; padding:10px 16px; }
  .whatsapp-icon   { width:24px; height:24px; }
  .whatsapp-text   { font-size:13px; }
}
@media (max-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns:1fr; }
}

/* ── TAILWIND COMPAT ── */
.min-h-screen { min-height:100vh; }
.p-8  { padding:2rem; }
.p-6  { padding:1.5rem; }
.p-4  { padding:1rem; }
.p-3  { padding:0.75rem; }
.p-2  { padding:0.5rem; }
.p-1  { padding:0.25rem; }
.px-4 { padding-left:1rem; padding-right:1rem; }
.px-3 { padding-left:0.75rem; padding-right:0.75rem; }
.py-2 { padding-top:0.5rem; padding-bottom:0.5rem; }
.py-3 { padding-top:0.75rem; padding-bottom:0.75rem; }
.py-8 { padding-top:2rem; padding-bottom:2rem; }
.mb-1 { margin-bottom:0.25rem; }
.mb-2 { margin-bottom:1rem; }
.mb-3 { margin-bottom:0.75rem; }
.mb-4 { margin-bottom:1rem; }
.mt-4 { margin-top:1rem; }
.max-w-6xl { max-width:72rem; }
.max-w-md  { max-width:28rem; }
.mx-auto   { margin-left:auto; margin-right:auto; }
.overflow-hidden { overflow:hidden; }
.items-center    { align-items:center; }
.justify-center  { justify-content:center; }
.justify-between { justify-content:space-between; }
.gap-1 { gap:0.25rem; }
.gap-2 { gap:0.5rem; }
.gap-3 { gap:0.75rem; }
.gap-6 { gap:1.5rem; }
/* .flex — já definida no sistema */
/* .flex-col — já definida no sistema */
.flex-wrap  { flex-wrap:wrap; }
.grid       { display:grid; }
.grid-cols-7 { grid-template-columns:repeat(7,1fr); }
.grid-cols-3 { grid-template-columns:repeat(3,1fr); }
.grid-cols-2 { grid-template-columns:repeat(2,1fr); }
.bg-white    { background-color:white; }
.bg-gray-50  { background-color:var(--surface-2); }
.bg-blue-600 { background-color:var(--primary); }
.bg-green-100{ background-color:var(--primary-muted); }
.bg-blue-100 { background-color:var(--surface-2); }
.bg-blue-50  { background-color:#f0f4ef; }
.bg-black    { background-color:black; }
.bg-gradient-to-br { background:linear-gradient(to bottom right, var(--surface-2), var(--primary-muted)); }
.bg-gradient-to-r  { background:linear-gradient(to right, var(--primary), var(--primary-dark)); }
.text-white      { color:white; }
.text-3xl        { font-size:1.875rem; line-height:2.25rem; }
.text-xl         { font-size:1.25rem; line-height:1.75rem; }
.text-lg         { font-size:1.125rem; line-height:1.75rem; }
.text-sm         { font-size:0.875rem; line-height:1.25rem; }
.text-blue-100   { color:var(--primary-muted); }
.text-gray-600   { color:var(--text-muted); }
.text-gray-700   { color:var(--text-main); }
.text-gray-800   { color:#1a2e1a; }
.text-gray-500   { color:#5a7058; }
.text-green-800  { color:var(--primary-dark); }
.text-blue-800   { color:var(--primary); }
.text-blue-600   { color:var(--primary); }
.font-bold       { font-weight:700; }
.font-semibold   { font-weight:600; }
.font-medium     { font-weight:500; }
.rounded-2xl { border-radius:1rem; }
.rounded-xl  { border-radius:0.75rem; }
.rounded-lg  { border-radius:0.5rem; }
.rounded-full{ border-radius:9999px; }
.shadow-2xl  { box-shadow:var(--shadow-lg); }
.shadow-lg   { box-shadow:var(--shadow); }
.shadow      { box-shadow:var(--shadow-sm); }
.w-8  { width:2rem; }  .h-8  { height:2rem; }
.w-5  { width:1.25rem; } .h-5 { height:1.25rem; }
.w-4  { width:1rem; }  .h-4  { height:1rem; }
.w-3  { width:0.75rem; }.h-3  { height:0.75rem; }
.w-12 { width:3rem; }  .h-12 { height:3rem; }
.w-6  { width:1.5rem; } .h-6 { height:1.5rem; }
.w-full { width:100%; }
.aspect-square { aspect-ratio:1; }
.relative { position:relative; }
.fixed    { position:fixed; }
.block    { display:block; }
.inset-0  { top:0; right:0; bottom:0; left:0; }
.z-50     { z-index:50; }
.opacity-50 { opacity:0.5; }
.space-y-3 > * + * { margin-top:0.75rem; }
.space-y-2 > * + * { margin-top:0.5rem; }
.hover\:bg-white:hover       { background-color:white; }
.hover\:bg-gray-100:hover    { background-color:var(--surface-2); }
.hover\:bg-blue-50:hover     { background-color:#f0f4ef; }
.hover\:bg-blue-200:hover    { background-color:#a5d6a7; }
.hover\:bg-blue-700:hover    { background-color:var(--primary-dark); }
.hover\:bg-green-200:hover   { background-color:#a5d6a7; }
.hover\:scale-105:hover      { transform:scale(1.05); }
.hover\:scale-125:hover      { transform:scale(1.25); }
.hover\:shadow-xl:hover      { box-shadow:var(--shadow); }
.transition-all    { transition:all 0.2s; }
.transition-colors { transition:background-color 0.2s; }
.transition-transform { transition:transform 0.2s; }
.bg-opacity-50     { background-color:rgba(0,0,0,0.5); }
.focus\:border-blue-600:focus { border-color:var(--primary); }
.focus\:outline-none:focus    { outline:none; }
.border-2     { border-width:2px; }
.border-gray-300 { border-color:var(--border); }
.bg-green-100    { background-color:var(--primary-muted); }
.text-green-800  { color:var(--primary-dark); }

/* ── NORMALIZAÇÃO GLOBAL DE BOTÕES ──────────────────────────────
   Apenas tipografia base — sem !important para não quebrar
   botões com estilo inline específico no HTML.
──────────────────────────────────────────────────────────────── */
button {
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
  box-sizing: border-box;
  cursor: pointer;
}

/* Abas de navegação do módulo de Transporte */
.op-tr-tab {
  padding: var(--btn-pad-y-sm) var(--btn-pad-x);
  font-size: var(--btn-font-sm);
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
  font-weight: var(--btn-weight);
}

/* ══════════════════════════════════════════════════════
   INTRANET — Design renovado
══════════════════════════════════════════════════════ */

/* Header */
.intranet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
}

.intranet-header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.intranet-header-logo {
  width: 40px;
  height: 40px;
  background: var(--primary);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.intranet-header-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--primary-dark);
}

.intranet-header-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 1px;
}

.intranet-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.intranet-badge {
  background: var(--primary-muted);
  color: var(--primary-dark);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Grid layout */
.intranet-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 18px;
  align-items: start;
}

/* Sidebar */
.intranet-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  position: sticky;
  top: 12px;
}

.intranet-sidebar-section {
  padding: 16px;
}

.intranet-sidebar-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

#intranet-menu-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.intranet-menu-item {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s;
  display: block;
}

.intranet-menu-item:hover {
  background: var(--bg-panel);
  border-color: var(--primary-muted);
}

.intranet-menu-item.active,
.intranet-menu-item:focus {
  background: var(--primary-muted);
  border-color: var(--primary);
}

.intranet-menu-item.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.intranet-menu-item.locked:hover {
  background: transparent;
  border-color: transparent;
}

.intranet-menu-item .title {
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 0.9rem;
}

.intranet-menu-item.locked .title {
  color: var(--text-muted);
}

.intranet-menu-item .desc {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.35;
}

/* Intranet cards */
.intranet-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px;
}

.intranet-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.intranet-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Capacitação material cards */
.cap-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}

.cap-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.cap-card-thumb {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: white;
  position: relative;
}

.cap-card-body {
  padding: 14px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cap-card-title {
  font-weight: 700;
  color: var(--text-main);
  font-size: 0.95rem;
  line-height: 1.3;
}

.cap-card-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
  flex: 1;
}

.cap-card-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.cap-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
}

/* Categoria tabs */
.cap-cat-tab {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  color: var(--text-main);
}

.cap-cat-tab:hover,
.cap-cat-tab.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary-dark);
}

/* Visualizador de conteúdo */
#cap-view-body iframe {
  width: 100%;
  border: none;
  border-radius: 0 0 10px 10px;
}

#cap-view-body .cap-text-content {
  padding: 20px 24px;
  line-height: 1.7;
  font-size: 0.92rem;
  color: var(--text-main);
  white-space: pre-wrap;
  max-height: 75vh;
  overflow-y: auto;
}

.intranet-notice {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.intranet-notice + .intranet-notice {
  margin-top: 10px;
}

.intranet-notice-title {
  font-size: 1rem;
}

.notice-pill {
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.72rem;
}

.notice-pill-pin {
  background: var(--primary-muted);
  color: var(--primary-dark);
}

.notice-pill-style {
  background: #e2e8f0;
  color: #334155;
}

.intranet-notice .meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.intranet-notice .body {
  margin-top: 10px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.notice-carousel {
  margin-top: 12px;
}

.notice-carousel-frame {
  width: 100%;
  height: 220px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

.notice-carousel-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.notice-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.intranet-notice.intranet-style-standard {
  border-left: 6px solid #64748b;
}

.intranet-notice.intranet-style-info {
  border-left: 6px solid #2563eb;
  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
}

.intranet-notice.intranet-style-urgent {
  border-left: 6px solid #dc2626;
  background: linear-gradient(180deg, #ffffff 0%, #fff1f2 100%);
}

.intranet-notice.intranet-style-success {
  border-left: 6px solid #16a34a;
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
}

.intranet-notice.intranet-style-celebration {
  border-left: 6px solid #ea580c;
  background: linear-gradient(125deg, #fff7ed 0%, #fefce8 55%, #ecfeff 100%);
}

.intranet-notice.intranet-style-dark {
  border-left: 6px solid #0f172a;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  color: #f8fafc;
}

.intranet-notice.intranet-style-dark .meta,
.intranet-notice.intranet-style-dark .intranet-notice-title {
  color: #cbd5e1;
}

.intranet-notice.intranet-style-dark .notice-pill-style {
  background: #334155;
  color: #f8fafc;
}

.intranet-notice.intranet-style-dark .notice-carousel-frame {
  border-color: #334155;
  background: #0f172a;
}

.intranet-panels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.intranet-panels-grid .panel-choice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.intranet-panels-grid .panel-choice input {
  margin-top: 2px;
}

.intranet-panels-grid .panel-choice .label {
  font-weight: 800;
  color: var(--primary-dark);
}

.intranet-panels-grid .panel-choice .help {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.intranet-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ── FATURAMENTO ── */
.fat-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.fat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border-radius: var(--radius);
  border: 1px solid rgba(117,33,116,0.16);
  background:
    linear-gradient(135deg, rgba(117,33,116,0.96), rgba(88,17,88,0.96)),
    radial-gradient(circle at top right, rgba(230,184,0,0.22), transparent 48%);
  color: #fff;
  box-shadow: var(--shadow);
}

.fat-header h2 {
  margin: 0;
  font-size: 1.3rem;
}

.fat-header .small {
  color: rgba(255,255,255,0.82);
}

.fat-toolbar,
.fat-tabs,
.fat-actions,
.fat-inline {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.fat-flash {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #f8fafc;
  color: #1e293b;
  font-weight: 600;
}

.fat-flash.success {
  background: #ecfdf5;
  border-color: #86efac;
  color: #166534;
}

.fat-flash.error {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}

.fat-metrics,
.fat-report-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.fat-metric-card {
  background: linear-gradient(180deg, #fff 0%, #fbf7fb 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.fat-metric-card .label {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.fat-metric-card .value {
  margin-top: 8px;
  font-size: 1.48rem;
  font-weight: 700;
  color: var(--primary-dark);
}

.fat-metric-card .hint {
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.fat-tab {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text-main);
}

.fat-tab.active {
  background: var(--primary);
  border-color: var(--primary-dark);
  color: #fff;
}

.fat-panel {
  display: none;
}

.fat-panel.active {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fat-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
}

.fat-accordion {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.fat-accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 700;
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fat-accordion summary::-webkit-details-marker {
  display: none;
}

.fat-accordion[open] summary {
  border-bottom: 1px solid var(--border);
}

.fat-accordion-body {
  padding: 16px;
}

.fat-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.fat-form-grid .fat-col-span-2 {
  grid-column: span 2;
}

.fat-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}

.fat-card-list {
  display: none;
  grid-template-columns: 1fr;
  gap: 12px;
}

.fat-row-card,
.fat-list-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow-sm);
}

.fat-row-card .title,
.fat-list-item .title {
  font-weight: 700;
  color: var(--primary-dark);
}

.fat-meta {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 0.84rem;
}

.fat-kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.fat-kv .item {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.fat-kv .item strong {
  display: block;
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fat-empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--text-muted);
}

.fat-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
}

.fat-badge.inprogress {
  background: #fef3c7;
  color: #92400e;
}

.fat-badge.done {
  background: #dcfce7;
  color: #166534;
}

.fat-badge.cancelled {
  background: #fee2e2;
  color: #b91c1c;
}

.fat-badge.pending {
  background: #e0f2fe;
  color: #075985;
}

.fat-modal-box {
  width: min(820px, 94vw);
}

.fat-modal-box form {
  padding: 18px 20px 20px;
}

.fat-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.fat-caption {
  font-size: 0.84rem;
  color: var(--text-muted);
}

@media (max-width: 980px) {
  .intranet-grid { grid-template-columns: 1fr; }
  .intranet-sidebar { position: static; }
  .intranet-header { flex-direction: column; align-items: flex-start; }
  .fat-dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  #cap-materials-grid { grid-template-columns: 1fr !important; }
  .intranet-header-actions { flex-wrap: wrap; gap: 6px; }
  .fat-header { padding: 18px; }
  .fat-table-wrap { display: none; }
  .fat-card-list { display: grid; }
  .fat-toolbar .btn,
  .fat-tabs .btn,
  .fat-actions .btn {
    flex: 1 1 140px;
  }
  .fat-form-grid {
    grid-template-columns: 1fr;
  }
  .fat-form-grid .fat-col-span-2 {
    grid-column: span 1;
  }
}

/* Correção para os botões da lista de espera não saírem do card */
#op-queue-list .card .flex {
  flex-wrap: wrap; 
  gap: 8px;        
}

#op-queue-list .card button {
  flex: 1 1 auto;  
  min-width: 120px; 
}

/* Força a quebra de linha em textos gigantes sem espaço (ex: observações de senhas) */
#op-queue-list .card,
#op-queue-list .card * {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}