/* =========================================
   1. ESTILO "SOFT MODERN" - VARIÁVEIS
   ========================================= */
   @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

   :root {
       /* Fundo Cremoso/Cinza suave */
       --bg-body: #F4F5F7;
       --bg-card: #FFFFFF;
   
       /* Cores de Contraste */
       --text-dark: #1A202C;    /* Quase preto */
       --text-grey: #718096;    /* Cinza médio */
       --text-light: #A0AEC0;   /* Cinza claro */
   
       /* Acento Principal (Indigo Suave) */
       --brand-color: #667EEA; 
       --brand-grad: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
   
       /* Sombras "Soft" (O segredo deste estilo) */
       --shadow-card: 0 10px 30px -5px rgba(0, 0, 0, 0.04);
       --shadow-hover: 0 20px 40px -5px rgba(0, 0, 0, 0.08);
   
       --radius: 20px; /* Cantos bem arredondados */
   }
   
   /* =========================================
      2. ESTRUTURA GERAL
      ========================================= */
   * { box-sizing: border-box; margin: 0; padding: 0; }
   
   body {
       background-color: var(--bg-body);
       font-family: 'Plus Jakarta Sans', sans-serif; /* Fonte geométrica moderna */
       color: var(--text-dark);
       padding: 40px;
       line-height: 1.6;
   }
   
   a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
   
   .container {
       max-width: 1200px;
       margin: 0 auto;
   }
   
   /* =========================================
      3. CABEÇALHO LIMPO
      ========================================= */
   .admin-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 40px;
       /* Removemos o fundo branco do header para ele "flutuar" no fundo cinza */
       background: transparent; 
       padding: 0;
       box-shadow: none;
       border: none;
   }
   
   .admin-header h2 {
       font-size: 1.8rem;
       font-weight: 700;
       color: var(--text-dark);
       letter-spacing: -0.5px;
   }
   
   .admin-header p {
       color: var(--text-grey);
       font-size: 1rem;
       margin-top: 5px;
   }
   
   /* Botões Modernos (Pills) */
   .btn {
       padding: 10px 24px;
       border-radius: 50px; /* Formato de pílula */
       font-size: 0.9rem;
       font-weight: 600;
       border: none;
       cursor: pointer;
       box-shadow: 0 4px 12px rgba(0,0,0,0.05);
   }
   
   .btn-warning {
       background: #fff;
       color: var(--text-dark);
   }
   .btn-warning:hover { transform: translateY(-2px); box-shadow: 0 8px 15px rgba(0,0,0,0.1); }
   
   .btn-danger {
       background: #FFF5F5;
       color: #E53E3E;
   }
   .btn-danger:hover { background: #FED7D7; }
   
   /* =========================================
      4. CARDS FLUTUANTES (Sem bordas)
      ========================================= */
   .main-grid {
       display: grid;
       grid-template-columns: 1.8fr 1.2fr;
       gap: 30px;
       margin-bottom: 50px;
   }
   
   .stats-box {
       background: var(--bg-card);
       padding: 35px;
       border-radius: var(--radius);
       box-shadow: var(--shadow-card); /* Sombra difusa em vez de borda */
       border: none;
       position: relative;
       overflow: hidden;
   }
   
   /* Títulos dos Cards */
   .stats-box h3 {
       font-size: 1.1rem;
       color: var(--text-dark);
       margin-bottom: 30px;
       border-bottom: none;
       display: flex; justify-content: space-between; align-items: center;
   }
   .stats-box h3 span i { color: var(--brand-color); margin-right: 10px; }
   .stats-box h3 small {
       background: #EDF2F7;
       color: var(--text-grey);
       padding: 5px 12px;
       border-radius: 12px;
       font-size: 0.75rem;
       font-weight: 700;
   }
   
   /* --- Barras de Progresso "Bolha" --- */
   .prog-row { margin-bottom: 20px; }
   
   .prog-name {
       font-size: 0.9rem;
       font-weight: 600;
       margin-bottom: 8px;
       display: block; /* Nome em cima da barra */
       width: 100%;
       color: var(--text-grey);
   }
   
   .prog-row {
       display: flex;
       flex-direction: column; /* Layout vertical para modernidade */
       align-items: flex-start;
   }
   
   .prog-bar-bg {
       width: 100%;
       height: 10px;
       background: #EDF2F7;
       border-radius: 20px;
       margin: 0; /* Remove margem lateral pois agora está em coluna */
       position: relative;
   }
   
   .prog-bar-fill {
       border-radius: 20px;
       background: var(--brand-grad); /* Gradiente roxo/azul */
       box-shadow: 0 2px 10px rgba(102, 126, 234, 0.4); /* Glow na barra */
   }
   
   .prog-val {
       align-self: flex-end; /* Joga o valor para a direita */
       font-size: 0.8rem;
       color: var(--text-light);
       margin-top: -28px; /* Truque para alinhar na mesma linha do título */
       margin-bottom: 15px;
   }
   
   /* --- Top Voluntários Clean --- */
   .rank-item {
       display: flex;
       align-items: center;
       padding: 15px 0;
       border-bottom: 1px solid #f7f9fc;
   }
   .rank-item:last-child { border: none; }
   
   .rank-item span:first-child {
       font-weight: 600;
       font-size: 0.95rem;
   }
   /* Bolinha de número do ranking */
   .rank-item span span {
       background: #EDF2F7;
       color: var(--text-grey);
       width: 24px;
       height: 24px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       border-radius: 50%;
       font-size: 0.75rem;
       margin-right: 12px;
   }
   
   .rank-badge {
       background: #EBF4FF; /* Azul clarinho */
       color: #4299E1;
       border-radius: 8px;
       padding: 4px 10px;
   }
   
   .total-stat { margin-top: 20px; text-align: center; }
   .total-stat span:first-child { 
       font-size: 3.5rem; 
       font-weight: 800; 
       background: var(--brand-grad);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent; /* Texto gradiente */
   }
   
   /* =========================================
      5. MINISTÉRIOS (ESTILO APP ICON)
      ========================================= */
   .section-title {
       font-size: 1.2rem;
       margin-bottom: 25px;
       font-weight: 700;
       color: var(--text-dark);
       margin-left: 10px;
   }
   
   .ministry-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
       gap: 25px;
   }
   
   .mini-card {
       background: var(--bg-card);
       border-radius: var(--radius);
       padding: 30px 20px;
       text-align: center;
       box-shadow: var(--shadow-card);
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 15px;
       color: var(--text-dark);
   }
   
   .mini-card:hover {
       transform: translateY(-8px);
       box-shadow: var(--shadow-hover);
   }
   
   /* O "App Icon" Container */
   .mini-card i {
       width: 60px;
       height: 60px;
       background: #F7FAFC; /* Fundo do ícone padrão */
       border-radius: 18px; /* Quadrado arredondado estilo iOS */
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.5rem;
       color: var(--brand-color);
       transition: all 0.3s;
   }
   
   .mini-card:hover i {
       background: var(--brand-color);
       color: white;
       transform: scale(1.1) rotate(-5deg); /* Pequena animação lúdica */
   }
   
   .mini-card span { font-weight: 600; font-size: 0.95rem; }
   
   /* =========================================
      6. ESCALAS DE HOJE (CARDS HORIZONTAIS)
      ========================================= */
   .today-section {
       margin-top: 60px;
       border-top: 1px solid #E2E8F0;
       padding-top: 40px;
   }
   
   .today-title {
       font-size: 1.4rem;
       color: var(--text-dark);
       margin-bottom: 30px;
       display: flex; align-items: center; gap: 15px;
   }
   
   .today-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
       gap: 25px;
   }
   
   .card-today {
       background: var(--bg-card);
       border-radius: 16px;
       box-shadow: var(--shadow-card);
       overflow: hidden;
       transition: transform 0.2s;
   }
   .card-today:hover { transform: translateY(-3px); }
   
   .card-today-header {
       background: #fff; /* Header branco também */
       padding: 20px 25px 10px 25px; /* Espaço maior */
       color: var(--text-dark);
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   .card-today-header span:first-child { font-size: 1.1rem; font-weight: 700; }
   
   .badge-turno {
       background: #F0FFF4;
       color: #38A169;
       font-size: 0.75rem;
       padding: 5px 12px;
       border-radius: 20px;
       font-weight: 700;
       letter-spacing: 0.5px;
   }
   
   .card-today-body { padding: 0 25px 25px 25px; }
   
   .card-today li {
       padding: 8px 0;
       color: var(--text-grey);
       border-bottom: 1px dashed #edf2f7;
       font-size: 0.95rem;
       display: flex; align-items: center; gap: 10px;
   }
   .card-today li:last-child { border: none; }
   
   /* Emoji substituto visual */
   .card-today li::before {
       content: '';
       width: 8px;
       height: 8px;
       background: #CBD5E0;
       border-radius: 2px;
   }
   
   /* =========================================
      RESPONSIVIDADE
      ========================================= */
   @media (max-width: 768px) {
       body { padding: 20px; }
       .main-grid { grid-template-columns: 1fr; }
       .admin-header { flex-direction: column; text-align: center; gap: 20px; }
       .btn { width: 100%; }
       .prog-val { margin-top: 0; align-self: flex-start; }
   }