/* Mobile Header Styles */
@media (max-width: 767px) {
  /* Ajustes gerais do cabeçalho */
  header .max-w-6xl {
    padding: 0.75rem 1rem;
  }

  /* Container principal do header no mobile */
  header .flex.justify-between.items-center {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  /* Botão de tema - posicionado no topo centralizado apenas no mobile */
  header #theme-toggle-btn {
    position: relative;
    margin: 0.5rem auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 30; /* Valor alto para garantir que fique acima de tudo */
    background-color: #f1f5f9;
    border-radius: 9999px;
    padding: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    width: 3rem;
    height: 3rem;
    /* No mobile, o botão aparece depois do título */
    order: 1 !important;
  }

  html.dark header #theme-toggle-btn {
    background-color: #334155;
  }

  /* Título principal */
  header .flex.items-center.space-x-3 {
    width: 100%;
    justify-content: center;
    order: 0 !important;
  }

  /* Container da navegação */
  header .flex.justify-center {
    width: 100%;
    order: 2 !important;
  }

  /* Tamanho do título */
  header h1#home-title {
    font-size: 1.5rem;
    text-align: center;
  }

  /* Cor do título no modo escuro */
  html.dark header h1#home-title {
    color: #ffffff;
  }

  /* Navegação com os botões */
  header nav.flex.gap-4 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    width: 100%;
  }

  /* Estilo dos botões de navegação */
  header nav.flex.gap-4 a.btn {
    height: auto;
    padding: 0.75rem 0.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.25rem;
    width: 100%;
    border-radius: 0.5rem;
  }

  /* Texto dos botões */
  header nav.flex.gap-4 a.btn .mobile-btn-text {
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: normal;
    display: block;
    margin-top: 0.25rem;
  }

  /* Texto dos botões no modo escuro */
  html.dark header nav.flex.gap-4 a.btn .mobile-btn-text {
    color: #ffffff;
  }

  /* Ícones nos botões */
  header nav.flex.gap-4 a.btn svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
    margin: 0 auto;
  }

  /* Adiciona ícones aos botões que não têm */
  header nav.flex.gap-4 a.btn:first-child::before {
    content: "";
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23374151' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z' /%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 auto;
  }

  header nav.flex.gap-4 a.btn:nth-child(2)::before {
    content: "";
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23374151' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 auto;
  }

  /* Ajuste para o tema escuro */
  html.dark header nav.flex.gap-4 a.btn:first-child::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23e2e8f0' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z' /%3E%3C/svg%3E");
  }

  html.dark header nav.flex.gap-4 a.btn:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23e2e8f0' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E");
  }

  /* Melhorias visuais para os botões */
  header nav.flex.gap-4 a.btn {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
  }

  html.dark header nav.flex.gap-4 a.btn {
    background-color: #1e293b;
    border: 1px solid #334155;
  }

  header nav.flex.gap-4 a.btn:active {
    transform: translateY(1px);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
  }

  /* Ajuste para o ícone do YouTube */
  header nav.flex.gap-4 a.btn svg.text-red-600 {
    color: #ef4444 !important;
  }

  /* Esconde o texto original dos botões */
  @media (max-width: 767px) {
    header nav.flex.gap-4 a.btn {
      font-size: 0;
      line-height: 0;
    }

    header nav.flex.gap-4 a.btn .mobile-btn-text {
      font-size: 0.75rem;
      line-height: 1.2;
    }
  }

  /* Centraliza os botões de ação (salvar, importar, limpar, exportar CSV, exportar docs, imprimir) */
  main .action-buttons {
    justify-content: center !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
    margin-bottom: 1.5rem;
    width: 100% !important;
    flex-wrap: nowrap !important;
  }

  /* Fallback para seletor mais específico */
  main .flex.justify-end.gap-2.action-buttons {
    justify-content: center !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
    margin-bottom: 1.5rem;
    width: 100% !important;
    flex-wrap: nowrap !important;
  }

  /* Estilo dos botões de ação */
  main .action-buttons button,
  main .flex.justify-end.gap-2.action-buttons button {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0.25rem !important;
    padding: 0.75rem 0.5rem !important;
    border-radius: 0.75rem !important;
    height: auto !important;
    min-height: 4rem !important;
    width: 100% !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease !important;
    display: flex !important;
  }

  /* Ícones dos botões de ação */
  main .action-buttons button .action-icon,
  main .flex.justify-end.gap-2.action-buttons button .action-icon {
    width: 1.75rem !important;
    height: 1.75rem !important;
    margin: 0 auto !important;
    display: block !important;
    flex-shrink: 0 !important;
  }

  /* Texto dos botões de ação */
  main .action-buttons button .action-text,
  main .flex.justify-end.gap-2.action-buttons button .action-text {
    display: block !important;
    font-size: 0.7rem !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    font-weight: 500 !important;
    text-align: center !important;
    margin-top: 0.25rem !important;
  }

  /* Efeito de pressionar nos botões */
  main .action-buttons button:active,
  main .flex.justify-end.gap-2.action-buttons button:active {
    transform: translateY(1px) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  }

  /* Ajuste para o botão de tema ficar acima do card de progresso */
  .sticky-card {
    z-index: 10 !important;
  }

  /* Ajuste para o card de progresso - colado à margem superior no mobile */
  section.sticky-card {
    top: 0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  }

  /* Ajuste para o modo escuro */
  html.dark section.sticky-card {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2),
      0 2px 4px -1px rgba(0, 0, 0, 0.15) !important;
  }
}

/* Ajustes específicos para telas muito pequenas */
@media (max-width: 480px) {
  main .action-buttons,
  main .flex.justify-end.gap-2.action-buttons {
    gap: 0.375rem !important;
  }

  main .action-buttons button,
  main .flex.justify-end.gap-2.action-buttons button {
    padding: 0.625rem 0.375rem !important;
    min-height: 3.5rem !important;
  }

  main .action-buttons button .action-icon,
  main .flex.justify-end.gap-2.action-buttons button .action-icon {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }

  main .action-buttons button .action-text,
  main .flex.justify-end.gap-2.action-buttons button .action-text {
    font-size: 0.65rem !important;
    line-height: 1 !important;
  }
}

/* Ajustes para telas médias (tablets pequenos) */
@media (min-width: 481px) and (max-width: 767px) {
  main .action-buttons,
  main .flex.justify-end.gap-2.action-buttons {
    gap: 0.75rem !important;
    max-width: 600px !important;
    margin: 0 auto 1.5rem auto !important;
  }

  main .action-buttons button,
  main .flex.justify-end.gap-2.action-buttons button {
    padding: 1rem 0.75rem !important;
    min-height: 4.5rem !important;
  }

  main .action-buttons button .action-icon,
  main .flex.justify-end.gap-2.action-buttons button .action-icon {
    width: 2rem !important;
    height: 2rem !important;
  }

  main .action-buttons button .action-text,
  main .flex.justify-end.gap-2.action-buttons button .action-text {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
  }
}