/* styles.css */

/* Estilos Gerais para a Seção de Medicações */
.medication-section {
    margin-bottom: 40px; /* Espaçamento entre as seções */
  }
  
  /* Títulos das Seções */
  .medication-section h2 {
    font-size: 1.5em;
    color: #1d1d1f; /* Texto escuro no light mode */
    margin-bottom: 10px;
    border-bottom: 2px solid #e5e7eb; /* Linha de separação clara */
    padding-bottom: 5px;
  }
  
  body.dark-mode .medication-section h2 {
    color: #ffffff; /* Texto branco no dark mode */
    border-bottom: 2px solid #444;
  }
  
  /* Estilos Gerais para as Tabelas */
  .dose-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff; /* Fundo branco no light mode */
    color: #1d1d1f; /* Texto escuro */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  }
  
  body.dark-mode .dose-table {
    background-color: #1e1e1e; /* Fundo escuro */
    color: #e0e0e0; /* Texto claro */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  /* Cabeçalhos das Colunas */
  .dose-table thead tr {
    background-color: #f3f4f6; /* Fundo cinza claro no light mode */
  }
  
  body.dark-mode .dose-table thead tr {
    background-color: #3a3a3a; /* Fundo intermediário no dark mode */
  }
  
  .dose-table thead th {
    padding: 12px 16px;
    text-align: center;
    font-weight: bold;
    border-bottom: 1px solid #e5e7eb; /* Linha de separação clara */
  }
  
  body.dark-mode .dose-table thead th {
    border-bottom: 1px solid #555; /* Linha de separação escura */
  }
  
  /* Células de Dados */
  .dose-table tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid #e5e7eb; /* Linha de separação clara */
    text-align: center;
  }
  
  body.dark-mode .dose-table tbody td {
    border-bottom: 1px solid #444; /* Linha de separação escura */
  }
  
  /* Células de Dose */
  .dose-cell {
    font-weight: bold;
    color: #0071e3; /* Azul no light mode */
  }
  
  body.dark-mode .dose-cell {
    color: #00ffcc; /* Cyan no dark mode */
  }
  
  /* Alternância de Cores nas Linhas para Melhor Legibilidade */
  .dose-table tbody tr:nth-child(even) {
    background-color: #f9fafb;
  }
  
  body.dark-mode .dose-table tbody tr:nth-child(even) {
    background-color: #2a2a2a;
  }
  
  .dose-table tbody tr:nth-child(odd) {
    background-color: #ffffff;
  }
  
  body.dark-mode .dose-table tbody tr:nth-child(odd) {
    background-color: #1e1e1e;
  }
  
  /* Hover Effect para as Linhas */
  .dose-table tbody tr:hover {
    background-color: #f3f4f6;
    cursor: pointer;
  }
  
  body.dark-mode .dose-table tbody tr:hover {
    background-color: #3a3a3a;
  }
  
  /* Responsividade: Ajuste para Dispositivos Móveis */
  @media screen and (max-width: 768px) {
    .dose-table, .dose-table thead, .dose-table tbody, .dose-table th, .dose-table td, .dose-table tr {
      display: block;
    }
  
    /* Remover cabeçalhos das colunas em dispositivos móveis */
    .dose-table thead {
      display: none;
    }
  
    /* Células de Dados em Dispositivos Móveis */
    .dose-table tbody tr {
      margin-bottom: 15px;
      background-color: #1e1e1e;
      border: none;
    }
  
    .dose-table tbody td {
      text-align: left;
      padding-left: 50%;
      position: relative;
      border-bottom: 1px solid #444;
    }
    .dose-table tbody td::before {
      content: attr(data-label);
      position: absolute;
      left: 16px;
      width: 45%;
      padding-right: 10px;
      font-weight: bold;
      text-align: left;
      color: #ffffff;
    }
  }
  
  /* Estilos para o rótulo BETA */
  .beta-label {
    position: absolute;
    top: 53px; /* Posição vertical */
    left: 11px; /* Posição horizontal */
    background-color: #4f73fe; /* Vermelho semi-transparente */
    color: #FFFFFF; /* Texto branco */
    padding: 2px 6px;
    border-radius: 12px; /* Formato de pílula */
    font-size: 0.6rem; /* Tamanho da fonte */
    font-weight: bold;
    text-transform: uppercase;
    pointer-events: none; /* Evita que o rótulo capture eventos de mouse */
    z-index: 10; /* Garante que o rótulo fique acima dos ícones */
    
    /* Pequena sombra para destaque */
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    
    /* Transição suave */
    transition: background-color 0.3s ease, transform 0.3s ease;
  }
  
  /* Efeitos de Hover e Focus para o rótulo BETA */
  .app-square:hover .beta-label,
  .app-square:focus .beta-label {
    background-color: rgba(200, 0, 0, 0.85); /* Vermelho mais escuro ao passar o mouse */
    transform: scale(1.05); /* Pequeno aumento para efeito de destaque */
  }
  
  /* Responsividade para o rótulo BETA */
  @media (max-width: 600px) {
    .beta-label {
      font-size: 0.5rem;
      padding: 1px 4px;
      top: 41px;
      left: 11px;
    }
  }