/* =========================================
   1. ESTILO "CORPORATE ENTERPRISE"
   ========================================= */
   @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

   :root {
       /* Paleta Corporativa Clássica */
       --primary-dark: #0f172a;   /* Navy Blue muito escuro (Header) */
       --primary-blue: #2563eb;   /* Azul Royal (Ações/Destaques) */
       --bg-body: #eaeff2;        /* Cinza azulado bem claro */
       --bg-card: #ffffff;
       
       /* Texto */
       --text-header: #ffffff;
       --text-body: #334155;
       --text-muted: #64748b;
       
       /* Bordas e Linhas */
       --border-color: #cbd5e1;
       --card-border-top: 3px solid var(--primary-blue); /* Identidade visual */
       
       /* Métricas */
       --radius: 4px;             /* Bordas quase retas (Sério) */
       --shadow: 0 1px 3px rgba(0,0,0,0.1); /* Sombra técnica mínima */
   }
   
   /* =========================================
      2. BASE E TIPOGRAFIA
      ========================================= */
   * { box-sizing: border-box; margin: 0; padding: 0; }
   
   body {
       background-color: var(--bg-body);
       font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
       color: var(--text-body);
       font-size: 15px;
       padding: 0; /* Remove padding do corpo para o header encostar no topo */
   }
   
   a { text-decoration: none; color: inherit; }
   
   .container {
       max-width: 1200px;
       margin: 30px auto;
       padding: 0 20px;
   }
   
   /* =========================================
      3. CABEÇALHO (BARRA SUPERIOR SÓLIDA)
      ========================================= */
   .admin-header {
       background-color: var(--primary-dark);
       color: var(--text-header);
       border-radius: 0; /* Reto, ocupando a largura total se necessário */
       padding: 20px 0;  /* Ajustado para alinhar com o container */
       margin-bottom: 30px;
       box-shadow: 0 2px 5px rgba(0,0,0,0.2);
       display: block; /* Garante bloco */
   }
   
   /* Criamos um container interno via CSS para alinhar o conteúdo do header */
   .admin-header > * { 
       max-width: 1200px; 
       margin: 0 auto; 
       padding: 0 20px;
       display: flex; 
       justify-content: space-between; 
       align-items: center; 
   }
   
   /* Como o HTML original não tem essa div interna, aplicamos flex no pai 
      mas com cuidado. Se o seu HTML for fixo, o estilo abaixo força o visual */
   .admin-header {
       display: flex;
       justify-content: space-between;
       padding: 15px 30px;
       border-radius: 0;
       margin: 0 0 30px 0;
   }
   
   .admin-header h2 {
       font-size: 1.4rem;
       font-weight: 500;
       letter-spacing: 0.5px;
       color: #fff;
   }
   .admin-header h2 i { margin-right: 10px; opacity: 0.8; }
   
   .admin-header p {
       color: #94a3b8; /* Cinza claro para texto secundário no escuro */
       font-size: 0.85rem;
       margin-top: 2px;
   }
   
   /* Botões Estilo "Bootstrap/Admin" */
   .btn {
       padding: 8px 16px;
       border-radius: 4px;
       font-size: 0.85rem;
       font-weight: 500;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       border: 1px solid transparent;
       cursor: pointer;
       transition: all 0.2s;
   }
   
   .btn-warning {
       background-color: #f59e0b; /* Amarelo ouro */
       color: #fff;
   }
   .btn-warning:hover { background-color: #d97706; }
   
   .btn-danger {
       background-color: #dc2626; /* Vermelho padrão */
       color: #fff;
   }
   .btn-danger:hover { background-color: #b91c1c; }
   
   /* =========================================
      4. ESTRUTURA DE CARDS (PAINÉIS)
      ========================================= */
   .main-grid {
       display: grid;
       grid-template-columns: 2fr 1fr;
       gap: 25px;
       margin-bottom: 40px;
   }
   
   .stats-box {
       background: var(--bg-card);
       border: 1px solid var(--border-color);
       border-top: var(--card-border-top); /* Acento colorido no topo */
       border-radius: var(--radius);
       padding: 20px;
       box-shadow: var(--shadow);
   }
   
   .stats-box h3 {
       font-size: 1rem;
       text-transform: uppercase;
       color: #1e293b; /* Texto escuro */
       font-weight: 700;
       border-bottom: 1px solid #e2e8f0;
       padding-bottom: 12px;
       margin-bottom: 20px;
       display: flex; justify-content: space-between; align-items: center;
   }
   
   .stats-box h3 small {
       font-size: 0.75rem;
       color: var(--text-muted);
       font-weight: 400;
       text-transform: none;
   }
   
   /* --- Barras de Progresso Técnicas --- */
   .prog-row {
       margin-bottom: 15px;
       display: flex;
       align-items: center;
   }
   
   .prog-name {
       width: 30%;
       font-size: 0.85rem;
       font-weight: 500;
       color: var(--text-body);
   }
   
   .prog-bar-bg {
       flex: 1;
       height: 12px;
       background: #e2e8f0;
       border-radius: 2px; /* Cantos pouco arredondados */
       margin: 0 15px;
       box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); /* Profundidade interna */
   }
   
   .prog-bar-fill {
       height: 100%;
       border-radius: 2px;
   }
   
   .prog-val {
       width: 60px;
       text-align: right;
       font-size: 0.8rem;
       font-weight: 600;
       color: var(--text-body);
   }
   
   /* --- Lista de Ranking --- */
   .rank-item {
       padding: 10px 0;
       border-bottom: 1px solid #f1f5f9;
       display: flex; justify-content: space-between;
   }
   .rank-item:last-child { border: none; }
   
   .rank-badge {
       background: #eff6ff;
       color: var(--primary-blue);
       border: 1px solid #bfdbfe;
       padding: 2px 8px;
       border-radius: 3px;
       font-size: 0.75rem;
       font-weight: 700;
   }
   
   .total-stat {
       margin-top: 15px;
       padding-top: 15px;
       border-top: 1px solid #e2e8f0;
       text-align: center;
   }
   .total-stat span:first-child {
       font-size: 2.2rem;
       font-weight: 300; /* Fonte fina, elegante */
       color: var(--primary-dark);
   }
   
   /* =========================================
      5. ACESSO RÁPIDO (GRID SÓBRIA)
      ========================================= */
   .section-title {
       font-size: 1.1rem;
       color: var(--primary-dark);
       margin-bottom: 15px;
       font-weight: 700;
       border-left: 4px solid var(--primary-blue);
       padding-left: 12px;
   }
   
   .ministry-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
       gap: 15px;
   }
   
   .mini-card {
       background: var(--bg-card);
       border: 1px solid var(--border-color);
       border-radius: var(--radius);
       padding: 15px;
       color: var(--text-body);
       display: flex;
       flex-direction: row; /* Ícone ao lado do texto */
       align-items: center;
       gap: 15px;
       transition: all 0.2s ease;
   }
   
   .mini-card:hover {
       border-color: var(--primary-blue);
       background-color: #f8fafc;
       transform: none; /* Profissional evita movimentos bruscos */
       box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
   }
   
   .mini-card i {
       font-size: 1.2rem;
       color: var(--text-muted);
       width: 36px;
       height: 36px;
       background: #f1f5f9;
       display: flex; align-items: center; justify-content: center;
       border-radius: 4px;
   }
   
   .mini-card:hover i {
       background: var(--primary-blue);
       color: #fff;
   }
   
   .mini-card span {
       font-weight: 500;
       font-size: 0.9rem;
   }
   
   /* =========================================
      6. TABELA DE ESCALAS (ESTILO RELATÓRIO)
      ========================================= */
   .today-section {
       margin-top: 40px;
       background: var(--bg-card);
       border: 1px solid var(--border-color);
       border-top: var(--card-border-top);
       border-radius: var(--radius);
       padding: 20px;
   }
   
   .today-title {
       font-size: 1.1rem;
       color: var(--primary-dark);
       margin-bottom: 20px;
       font-weight: 700;
       padding-bottom: 10px;
       border-bottom: 2px solid #f1f5f9;
       display: flex; align-items: center; gap: 10px;
   }
   
   .today-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
       gap: 20px;
   }
   
   .card-today {
       background: #fff;
       border: 1px solid #e2e8f0;
       border-radius: 4px;
   }
   
   .card-today-header {
       background: #f8fafc;
       padding: 10px 15px;
       border-bottom: 1px solid #e2e8f0;
       color: var(--primary-dark);
       font-weight: 600;
       font-size: 0.9rem;
       display: flex; justify-content: space-between;
   }
   
   .badge-turno {
       background: #e2e8f0;
       color: #475569;
       font-size: 0.7rem;
       padding: 2px 6px;
       border-radius: 2px;
       text-transform: uppercase;
       font-weight: 700;
   }
   
   .card-today-body { padding: 0; }
   
   .card-today ul { list-style: none; }
   
   .card-today li {
       padding: 8px 15px;
       font-size: 0.85rem;
       color: var(--text-body);
       border-bottom: 1px solid #f1f5f9;
   }
   /* Efeito Zebrado (Típico de relatórios profissionais) */
   .card-today li:nth-child(even) { background-color: #fcfcfc; }
   .card-today li:last-child { border: none; }
   
   /* =========================================
      RESPONSIVIDADE
      ========================================= */
   @media (max-width: 768px) {
       .main-grid { grid-template-columns: 1fr; }
       .admin-header { flex-direction: column; text-align: center; gap: 15px; }
       .btn { width: 100%; display: block; margin-bottom: 5px; }
       .prog-row { flex-wrap: wrap; }
       .prog-name { width: 100%; margin-bottom: 5px; }
       .prog-bar-bg { width: 100%; margin: 5px 0; }
       .prog-val { width: 100%; text-align: left; }
   }