/* =========================================
   1. IMPORTAÇÃO DE FONTE E VARIÁVEIS
   ========================================= */
   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

   :root {
       /* Paleta 'Modern SaaS' (Inspirada em Tailwind/Vercel) */
       --bg-body: #f3f4f6;       /* Cinza muito suave */
       --bg-card: #ffffff;
       --primary: #4f46e5;       /* Indigo moderno (muito usado em React UIs) */
       --primary-hover: #4338ca;
       --text-main: #1f2937;     /* Cinza chumbo (não use preto puro) */
       --text-muted: #6b7280;    /* Cinza médio */
       
       /* Cores de Status Modernas */
       --success: #10b981;
       --warning: #f59e0b;
       --danger: #ef4444;
       --dark-surface: #111827;
       
       /* Sombras e Bordas */
       --radius-lg: 16px;
       --radius-md: 10px;
       --radius-sm: 6px;
       --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
       --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
       --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
       --border-light: #e5e7eb;
   }
   
   /* =========================================
      2. RESET E ESTRUTURA GLOBAL
      ========================================= */
   * {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }
   
   body {
       background-color: var(--bg-body);
       font-family: 'Inter', system-ui, -apple-system, sans-serif; /* A fonte chave do visual moderno */
       color: var(--text-main);
       padding: 30px;
       line-height: 1.5;
       -webkit-font-smoothing: antialiased; /* Renderização de fonte mais nítida */
   }
   
   a { text-decoration: none; }
   
   .container {
       max-width: 1280px; /* Levemente mais largo */
       margin: 0 auto;
   }
   
   /* =========================================
      3. COMPONENTES DE UI (BOTÕES)
      ========================================= */
   .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       padding: 10px 20px;
       border-radius: var(--radius-sm);
       font-size: 0.875rem;
       font-weight: 500;
       transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
       border: 1px solid transparent;
       cursor: pointer;
       letter-spacing: 0.025em;
   }
   
   .btn:active { transform: scale(0.98); }
   
   .btn-warning {
       background-color: #fffbeb;
       color: #b45309;
       border: 1px solid #fcd34d;
   }
   .btn-warning:hover { background-color: #fcd34d; color: #78350f; }
   
   .btn-danger {
       background-color: #fef2f2;
       color: #b91c1c;
       border: 1px solid #fecaca;
   }
   .btn-danger:hover { background-color: #ef4444; color: white; border-color: #ef4444; }
   
   /* =========================================
      4. HEADER (ESTILO DASHBOARD)
      ========================================= */
   .admin-header {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
       align-items: center;
       background: var(--bg-card);
       padding: 24px 32px;
       border-radius: var(--radius-lg);
       box-shadow: var(--shadow-sm);
       margin-bottom: 32px;
       border: 1px solid var(--border-light);
   }
   
   .admin-header h2 {
       font-size: 1.5rem;
       font-weight: 700;
       color: var(--text-main);
       letter-spacing: -0.025em;
   }
   
   .admin-header p {
       font-size: 0.9rem;
       color: var(--text-muted);
       margin-top: 4px;
   }
   
   /* =========================================
      5. CARDS E GRIDS
      ========================================= */
   .main-grid {
       display: grid;
       grid-template-columns: 2fr 1fr;
       gap: 24px;
       margin-bottom: 40px;
   }
   
   .stats-box {
       background: var(--bg-card);
       padding: 24px;
       border-radius: var(--radius-lg);
       box-shadow: var(--shadow-md);
       border: 1px solid var(--border-light);
       height: 100%; /* Garante altura igual */
       display: flex;
       flex-direction: column;
   }
   
   .stats-box h3 {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 24px;
       padding-bottom: 16px;
       border-bottom: 1px solid var(--border-light);
       font-size: 1.1rem;
       font-weight: 600;
       color: var(--text-main);
   }
   
   .stats-box h3 span i { margin-right: 8px; }
   
   .stats-box h3 small {
       font-weight: 500;
       font-size: 0.75rem;
       text-transform: uppercase;
       color: var(--text-muted);
       background: #f3f4f6;
       padding: 4px 8px;
       border-radius: 4px;
   }
   
   /* Barras de Progresso Modernas */
   .prog-row {
       display: flex;
       align-items: center;
       margin-bottom: 16px;
   }
   
   .prog-name {
       width: 25%;
       font-size: 0.85rem;
       font-weight: 600;
       color: var(--text-main);
   }
   
   .prog-bar-bg {
       flex: 1;
       height: 8px;
       background: #e5e7eb;
       border-radius: 999px; /* Pill shape */
       margin: 0 16px;
   }
   
   .prog-bar-fill {
       border-radius: 999px;
       box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Glow sutil na barra */
   }
   
   .prog-val {
       width: 60px;
       text-align: right;
       font-size: 0.75rem;
       font-weight: 700;
       font-variant-numeric: tabular-nums; /* Alinha números */
   }
   
   /* Ranking Clean */
   .rank-item {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 12px 0;
       border-bottom: 1px solid var(--border-light);
   }
   
   .rank-item:last-child { border-bottom: none; }
   
   .rank-badge {
       background: #e0e7ff; /* Fundo roxo bem claro */
       color: var(--primary);
       padding: 4px 10px;
       border-radius: 20px;
       font-size: 0.75rem;
       font-weight: 700;
   }
   
   /* Número Gigante (Total) */
   .total-stat span:first-child {
       font-size: 3rem;
       font-weight: 800;
       color: var(--text-main);
       letter-spacing: -0.05em;
       line-height: 1;
   }
   
   /* =========================================
      6. GRID DE MINISTÉRIOS (CARDS MODERNOS)
      ========================================= */
   .section-title {
       font-size: 1.25rem;
       font-weight: 600;
       color: var(--text-main);
       margin-bottom: 20px;
       display: flex;
       align-items: center;
   }
   .section-title::before {
       content: '';
       display: inline-block;
       width: 4px;
       height: 24px;
       background: var(--primary);
       margin-right: 12px;
       border-radius: 2px;
   }
   
   .ministry-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
       gap: 20px;
   }
   
   .mini-card {
       background: var(--bg-card); /* Fundo branco agora */
       color: var(--text-main);
       padding: 24px;
       border-radius: var(--radius-md);
       text-align: center;
       text-decoration: none;
       transition: all 0.3s ease;
       border: 1px solid var(--border-light);
       box-shadow: var(--shadow-sm);
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 12px;
   }
   
   /* Efeito Hover "Lift" típico de landing pages */
   .mini-card:hover {
       transform: translateY(-4px);
       box-shadow: var(--shadow-lg);
       border-color: var(--primary);
   }
   
   .mini-card i {
       font-size: 1.8rem;
       color: var(--primary); /* Ícones coloridos no fundo branco */
       background: #eef2ff;
       width: 50px;
       height: 50px;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 50%; /* Ícone circular */
       transition: background 0.2s;
   }
   
   .mini-card:hover i {
       background: var(--primary);
       color: white;
   }
   
   .mini-card span {
       font-size: 0.9rem;
       font-weight: 600;
   }
   
   /* =========================================
      7. SEÇÃO "HOJE" (LISTA CLEAN)
      ========================================= */
   .today-section {
       margin-top: 40px;
       border-top: 1px solid var(--border-light); /* Borda sólida fina em vez de dashed */
       padding-top: 30px;
   }
   
   .today-title {
       font-size: 1.25rem;
       color: var(--text-main);
       margin-bottom: 24px;
       display: flex;
       align-items: center;
       gap: 12px;
   }
   
   .today-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
       gap: 24px;
   }
   
   .card-today {
       background: var(--bg-card);
       border: 1px solid var(--border-light);
       border-radius: var(--radius-md);
       overflow: hidden;
       box-shadow: var(--shadow-sm);
       transition: box-shadow 0.2s;
   }
   
   .card-today:hover { box-shadow: var(--shadow-md); }
   
   .card-today-header {
       background: #f9fafb; /* Cinza muito leve */
       padding: 16px 20px;
       border-bottom: 1px solid var(--border-light);
       font-weight: 600;
       color: var(--text-main);
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   
   .badge-turno {
       font-size: 0.7rem;
       background: white;
       padding: 4px 8px;
       border-radius: 6px;
       color: var(--text-muted);
       border: 1px solid var(--border-light);
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.5px;
   }
   
   .card-today-body { padding: 10px 0; }
   
   .card-today li {
       padding: 8px 20px;
       border-bottom: 1px solid #f3f4f6;
       font-size: 0.9rem;
       color: var(--text-muted);
       display: flex;
       align-items: center;
       gap: 10px;
   }
   .card-today li:last-child { border-bottom: none; }
   .card-today li:hover { background-color: #f9fafb; color: var(--text-main); }
   
   /* =========================================
      RESPONSIVIDADE
      ========================================= */
   @media (max-width: 768px) {
       body { padding: 15px; }
       .main-grid { grid-template-columns: 1fr; }
       .admin-header { flex-direction: column; text-align: center; gap: 20px; }
       .admin-header div[style="text-align:right;"] { width: 100%; display: flex; flex-direction: column; gap: 10px; }
       .btn { width: 100%; }
       .prog-row { flex-direction: column; align-items: flex-start; gap: 5px; }
       .prog-name, .prog-bar-bg, .prog-val { width: 100%; margin: 5px 0; }
       .prog-val { text-align: left; }
   }