/* Reset básico e fontes */
body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6; /* Fundo cinza claro */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: #333;
}

/* Container principal para centralizar o conteúdo */
.container {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 420px; /* Largura máxima para mobile */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Para telas pequenas, ocupe toda a altura */
}

/* Estilos específicos da tela de boas-vindas */
.welcome-screen {
    text-align: center;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #eee;
}

.logo {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 1.5rem;
    color: #10B981; /* Verde do logo */
}

.logo svg {
    margin-right: 0.5rem;
}

.menu-toggle {
    display: none; /* Ocultar em desktop */
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #555;
}

.main-nav {
    display: flex; /* Exibir em desktop */
    gap: 1.5rem;
}

.main-nav a {
    text-decoration: none;
    color: #555;
    font-weight: 600;
}

.main-nav a:hover {
    color: #10B981;
}

.main-content {
    flex-grow: 1; /* Faz o conteúdo crescer e ocupar espaço */
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.main-content h1 {
    font-size: 2.25rem; /* 36px */
    line-height: 1.2;
    margin-bottom: 1rem;
    color: #1a202c;
}

.main-content p {
    font-size: 1rem; /* 16px */
    line-height: 1.5;
    margin-bottom: 2rem;
    color: #4a5568;
    max-width: 380px;
}

.illustration {
    width: 90%;
    max-width: 300px;
    height: auto;
    margin-bottom: 2rem;
}

.action-buttons {
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.btn {
    display: block;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
    text-align: center;
}

.btn-primary {
    background-color: #10B981; /* Verde */
    color: #fff;
    border: 1px solid #10B981;
}

.btn-primary:hover {
    background-color: #0d9a6c; /* Verde mais escuro */
}

.btn-secondary {
    background-color: #fff;
    color: #10B981;
    border: 1px solid #10B981;
}

.btn-secondary:hover {
    background-color: #e6ffee; /* Verde claro */
}

.footer {
    padding: 1rem;
    border-top: 1px solid #eee;
    font-size: 0.875rem; /* 14px */
    color: #777;
}

/* Estilos gerais para formulários */
.form-group {
    margin-bottom: 1rem;
}

.form-control {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box; /* Garante que padding não aumente a largura total */
}

.form-control:focus {
    outline: none;
    border-color: #10B981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); /* Sombra de foco verde */
}

.radio-option {
    display: flex;
    align-items: center;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.radio-option:hover {
    background-color: #f0fdf4; /* Cor mais clara no hover */
    border-color: #10B981;
}

.radio-option input[type="radio"] {
    margin-right: 0.75rem;
    appearance: none; /* Remove estilo padrão */
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease;
}

.radio-option input[type="radio"]:checked {
    border-color: #10B981; /* Borda verde quando selecionado */
}

.radio-option input[type="radio"]:checked::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background-color: #10B981; /* Ponto central verde */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.radio-option span {
    font-size: 1.125rem;
    color: #333;
}

.radio-option input[type="radio"]:checked + span {
    color: #10B981;
    font-weight: 600;
}

.checkbox-group {
    display: flex;
    align-items: flex-start; /* Alinhar o checkbox ao topo do texto */
    margin-top: 1.5rem;
}

.checkbox-group input[type="checkbox"] {
    margin-top: 0.25rem; /* Ajuste fino para alinhar com o texto */
    margin-right: 0.5rem;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    appearance: none;
    position: relative;
    cursor: pointer;
    outline: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.checkbox-group input[type="checkbox"]:checked {
    background-color: #10B981;
    border-color: #10B981;
}

.checkbox-group input[type="checkbox"]:checked::after {
    content: '✔'; /* Símbolo de check */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    line-height: 1;
}

.checkbox-group label {
    font-size: 0.9rem;
    color: #555;
    flex: 1; /* Permite que o texto ocupe o espaço restante */
}

.checkbox-group label a {
    color: #10B981;
    text-decoration: none;
}

.checkbox-group label a:hover {
    text-decoration: underline;
}

.go-back-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #555;
    cursor: pointer;
    padding: 0.5rem;
}

.go-back-btn:hover {
    color: #10B981;
}

/* Estilos para Mensagens de Alerta */
.message-area {
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    word-break: break-word; /* Garante que o texto quebre linhas longas */
}

.alert.success {
    background-color: #d4edda; /* Verde claro */
    color: #155724; /* Verde escuro */
    border: 1px solid #c3e6cb;
}

.alert.error {
    background-color: #f8d7da; /* Vermelho claro */
    color: #721c24; /* Vermelho escuro */
    border: 1px solid #f5c6cb;
}


/* Estilos específicos para o Dashboard */
.dashboard-body {
    background-color: #f3f4f6;
}

.dashboard-container {
    max-width: 420px; /* Mantém a largura de mobile */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-bottom: 70px; /* Espaço para a barra de navegação inferior */
}

.dashboard-header {
    background-color: #fff;
    padding: 1.5rem 1rem;
    border-bottom: none; /* Sem borda no header do dashboard */
    text-align: left;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Sombra suave */
}

.welcome-text {
    font-size: 1.5rem; /* 24px */
    font-weight: 700; /* Bold */
    color: #1a202c;
    margin: 0;
}

.dashboard-content {
    flex-grow: 1; /* Faz o conteúdo principal ocupar o espaço restante */
    padding: 1.5rem 1rem;
    overflow-y: auto; /* Permite rolagem se o conteúdo for grande */
}

.notification-day-header {
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    color: #4a5568;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.notification-day-header:first-child {
    margin-top: 0; /* Remove margem superior do primeiro cabeçalho */
}

.notification-list {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 1.5rem;
}

.notification-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #eee;
}

.notification-item:last-child {
    border-bottom: none; /* Remove borda do último item */
}

.notification-icon {
    flex-shrink: 0; /* Impede que o ícone diminua */
    width: 24px;
    height: 24px;
    color: #10B981; /* Cor dos ícones */
    margin-right: 1rem;
}

.notification-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.notification-text {
    font-size: 1rem;
    color: #333;
    font-weight: 500;
}

.notification-time {
    font-size: 0.875rem; /* 14px */
    color: #777;
    margin-top: 0.25rem;
}

/* Barra de Navegação Inferior */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 420px; /* Corresponde ao .container max-width */
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    padding: 0.5rem 0;
    border-top: 1px solid #eee;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
    z-index: 1000; /* Garante que fique acima de outros elementos */
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #777;
    font-size: 0.75rem; /* 12px */
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.nav-item:hover {
    color: #10B981;
    background-color: #f0fdf4; /* Verde bem claro no hover */
}

.nav-item.active {
    color: #10B981; /* Cor ativa */
    font-weight: 600;
}

.nav-item svg {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    stroke-width: 2; /* Para ícones Feather */
}

/* Para telas maiores (desktop), ajustar o container principal */
@media (min-width: 768px) {
    .dashboard-container {
        max-width: 800px; /* Mais largo em desktop */
        padding-bottom: 0; /* Não precisa de padding para a bottom-nav fixa em desktop */
    }

    .dashboard-header {
        padding: 1.5rem 2rem; /* Mais padding */
    }
    
    .dashboard-content {
        padding: 1.5rem 2rem;
    }

    .bottom-nav {
        /* Se você quiser uma navegação lateral no desktop, ou uma barra superior,
           este é o lugar para adaptar o bottom-nav ou criar um novo menu.
           Por agora, ela continuará fixa na parte inferior, mas centralizada. */
        position: relative; /* Ou absolute/static, dependendo do design final */
        left: auto;
        transform: none;
        max-width: none; /* Ocupa a largura total do container */
        border-top: none;
        border-bottom: 1px solid #eee; /* Pode virar uma barra de rodapé ou ser removida */
        box-shadow: none;
        /* Pode ser movido para um "footer" normal ou desaparecer,
           se a navegação principal for para o topo ou lateral em desktop */
    }
    /* Para desktop, talvez a navegação seja no topo ou sidebar. */
    /* Por enquanto, vamos deixá-la no final do conteúdo para não "flutuar" no desktop,
       e ajustar seu display. No design fornecido, o foco é mobile. */
    .dashboard-container .footer {
        display: none; /* Oculta o footer duplicado se a nav-bar servir como footer */
    }
    
    /* Adaptar se a bottom-nav for apenas para mobile e tiver uma nav de desktop */
    /* Por enquanto, a bottom-nav serve em ambos, mas estilizada para mobile. */
}


/* PÁGINA PLANTÃO */

/* Header da Página de Plantões (ajustes) */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border-bottom: 1px solid #eee; /* Adiciona uma linha sutil abaixo do header */
}

.page-title {
    font-size: 1.8rem; /* Aumenta um pouco o tamanho do título */
    font-weight: 700;
    color: #1a202c;
    margin: 0;
    flex-grow: 1;
    text-align: left; /* Alinha o título à esquerda, como no design */
    padding-left: 0.5rem; /* Pequeno espaçamento do lado esquerdo */
}

.add-button {
    font-size: 2.5rem; /* Ajusta o tamanho do '+' */
    color: #10B981;
    text-decoration: none;
    font-weight: bold;
    padding: 0 0.5rem;
    line-height: 1; /* Garante que o '+' não altere a altura da linha */
    /* Posiciona à direita */
}

/* Sub-Navegação (Abas - Próximos, Ofertas, Escalas, Receita) */
.sub-nav {
    display: flex;
    justify-content: flex-start; /* Alinha à esquerda */
    background-color: #fff; /* Fundo branco */
    border-bottom: 1px solid #eee; /* Linha divisória inferior */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Sombra sutil */
    padding: 0 0.5rem; /* Espaçamento lateral */
    overflow-x: auto; /* Permite rolagem horizontal se muitos itens */
    white-space: nowrap; /* Impede que os itens quebrem linha */
    -webkit-overflow-scrolling: touch; /* Rolagem suave em iOS */
}

.sub-nav-item {
    flex-shrink: 0; /* Impede que os itens encolham */
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: #555;
    font-weight: 600;
    font-size: 0.95rem; /* Ajusta o tamanho da fonte */
    border-bottom: 3px solid transparent; /* Borda para item ativo */
    transition: all 0.2s ease;
    margin-right: 0.5rem; /* Espaçamento entre os itens */
}

.sub-nav-item:last-child {
    margin-right: 0; /* Remove margem do último item */
}

.sub-nav-item:hover {
    color: #10B981;
    /* background-color: #e6ffee; <-- Removido para ter apenas sublinhado no hover */
}

.sub-nav-item.active {
    color: #10B981;
    border-color: #10B981; /* Borda verde para o item ativo */
    background-color: transparent; /* Fundo transparente para ativo, se preferir o sublinhado */
}

/* Filtros (Botões - Data, Especialidade, Local) */
.filters {
    display: flex;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background-color: #f3f4f6; /* Fundo levemente cinza */
    border-bottom: 1px solid #eee;
    /* Não há sombra no design fornecido para esta seção */
}

.filter-btn {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 20px; /* Borda arredondada (pill-shaped) */
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    color: #555;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Sombra suave, como no design */
}

.filter-btn:hover {
    background-color: #e6ffee;
    border-color: #10B981;
    color: #10B981;
}

/* Lista de Plantões (Itens Individuais) */
.plantoes-content {
    padding: 0.5rem 0; /* Ajuste o padding para o conteúdo da lista */
}

.plantao-list {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Sombra mais pronunciada para a lista toda */
    margin: 1rem; /* Margem da lista em relação à tela */
}

.plantao-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease;
}

.plantao-item:hover {
    background-color: #f9f9f9;
}

.plantao-item:last-child {
    border-bottom: none;
}

.plantao-date-icon {
    flex-shrink: 0;
    width: 36px; /* Aumenta o tamanho do container do ícone */
    height: 36px;
    color: #10B981;
    margin-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.plantao-date-icon svg {
    width: 28px; /* Ícone visivelmente maior */
    height: 28px;
}

.plantao-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column; /* Coloca data e local em linhas separadas */
    text-align: left;
}

.plantao-date {
    font-size: 1.05rem; /* Ajusta o tamanho da fonte */
    font-weight: 600; /* Mais negrito */
    color: #333;
    margin-bottom: 0.2rem; /* Pequeno espaçamento entre data e local */
}

.plantao-location {
    font-size: 0.875rem; /* 14px */
    color: #777;
}

.plantao-time {
    flex-shrink: 0;
    font-size: 1rem; /* Ajusta o tamanho da fonte */
    font-weight: 600; /* Mais negrito */
    color: #555;
    margin-left: 1rem;
    text-align: right;
}

/* -------------------------------------- */
/* Ajustes para Desktop (seções específicas) */
/* -------------------------------------- */
@media (min-width: 768px) {
    /* ... (Mantenha seus ajustes de container e header do dashboard existentes) ... */

    .page-header {
        padding: 1.5rem 2rem;
    }
    .page-title {
        font-size: 2rem;
    }
    .add-button {
        font-size: 2.5rem;
    }

    .sub-nav {
        justify-content: flex-start; /* Mantém alinhado à esquerda em desktop */
        padding: 0 2rem; /* Mais padding nas laterais */
    }
    .sub-nav-item {
        font-size: 1rem;
        padding: 0.75rem 1.2rem;
        margin-right: 1rem; /* Mais espaçamento entre os itens */
    }

    .filters {
        padding: 1rem 2rem;
    }
    .filter-btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.95rem;
    }

    .plantoes-content {
        padding: 1rem 2rem; /* Mais padding nas laterais */
    }
    .plantao-list {
        margin: 1rem 0; /* Remove margens laterais extras em desktop, se o padding do content já for o suficiente */
    }
    .plantao-item {
        padding: 1.2rem 1.5rem; /* Mais padding interno */
    }
    .plantao-date-icon {
        width: 40px; /* Ícone maior em desktop */
        height: 40px;
    }
    .plantao-date-icon svg {
        width: 32px;
        height: 32px;
    }
    .plantao-date {
        font-size: 1.15rem;
    }
    .plantao-location {
        font-size: 0.95rem;
    }
    .plantao-time {
        font-size: 1.1rem;
    }
}


/* FIM DA PÁGINA PLANTÃO */


/* PÁGINA CRIAR OFERTA */

/* Estilos para o formulário de Criar Oferta */
.create-offer-page .page-header {
    justify-content: flex-start; /* Alinha o "X" à esquerda e o título centralizado */
    gap: 1rem;
}

.create-offer-page .go-back-btn {
    font-size: 2rem;
    color: #555;
    text-decoration: none;
    line-height: 1;
    padding: 0.2rem 0.5rem;
}

.create-offer-page .page-title {
    flex-grow: 1;
    text-align: center;
    padding-left: 0; /* Remove padding extra */
}

.form-label {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 0.5rem;
}

/* Ajustes para inputs com ícone (R$) */
.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}
.input-with-icon .form-control {
    padding-right: 2.5rem; /* Espaço para o ícone */
}
.input-with-icon .input-icon {
    position: absolute;
    right: 1rem;
    color: #777;
    font-size: 1rem;
}

.form-hint {
    font-size: 0.8rem;
    color: #777;
    margin-top: 0.25rem;
    display: block;
}

/* Grupo de Rádio Buttons Horizontal */
.radio-group-horizontal {
    display: flex;
    gap: 1rem; /* Espaçamento entre os botões */
    margin-top: 0.5rem;
}

.radio-button {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border: 1px solid #ccc;
    border-radius: 20px; /* Borda arredondada */
    cursor: pointer;
    font-size: 0.95rem;
    color: #555;
    transition: all 0.2s ease;
    background-color: #fff;
}

.radio-button:hover {
    border-color: #10B981;
    background-color: #f0fdf4;
    color: #10B981;
}

.radio-button input[type="radio"] {
    margin-right: 0.5rem;
    /* Estilos customizados para radio button */
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease;
}

.radio-button input[type="radio"]:checked {
    border-color: #10B981;
}

.radio-button input[type="radio"]:checked::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background-color: #10B981;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.radio-button input[type="radio"]:checked + span {
    color: #10B981;
    font-weight: 600;
}


/* Ajustes para Desktop na página de Criar Oferta */
@media (min-width: 768px) {
    .create-offer-page .page-header {
        padding: 1.5rem 2rem;
    }
    .create-offer-page .page-title {
        font-size: 2rem;
    }
    .create-offer-page .go-back-btn {
        font-size: 2.5rem;
    }
    .create-offer-page .main-content.form-content {
        padding: 2rem; /* Mais padding em desktop */
    }
    .radio-group-horizontal {
        justify-content: flex-start; /* Alinhar à esquerda */
    }
}

/* FIM DA PÁGINA CRIAR OFERTA */
/**/

/* STYLE DE OFERTAS */

/* Estilos adicionais para a lista de ofertas */
.plantao-item .action-button-oferta {
    flex-shrink: 0;
    margin-left: 1rem;
}

.btn-small-primary {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background-color: #10B981;
    border: 1px solid #10B981;
    transition: background-color 0.2s ease;
}

.btn-small-primary:hover {
    background-color: #0d9a6c;
}

/* Adicione esta regra para exibir o nome completo dos meses em português */
/* Pode ser necessário um polyfill para navegadores mais antigos ou usar strftime com setlocale no PHP */
/* Este CSS não é para isso, mas apenas para o caso de ter algum estilo impactando a exibição */

/* Correção para alinhar o título do cabeçalho */
.page-header .page-title {
    text-align: left; /* Alinha o título à esquerda, como no design */
    flex-grow: 1; /* Permite que o título ocupe o espaço necessário */
}
/* Para o botão '+', talvez precise de um ajuste se não estiver à direita */
.page-header .add-button {
    margin-left: auto; /* Empurra o botão para a direita */
    /* Mantenha os outros estilos do add-button */
}

/* FIM DO STYLE DE OFERTAS */

/* Estilos para o filtro de sub-aba (Ativas/Histórico) */
.filters .active-filter {
    background-color: #10B981;
    color: #fff;
    border-color: #10B981;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombra para o ativo */
}

/* Estilos para os botões de ação (Editar/Excluir) nos itens da lista */
.action-buttons-item {
    display: flex;
    gap: 0.5rem; /* Espaçamento entre os botões */
    margin-left: 1rem;
    flex-shrink: 0;
}

.btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px; /* Tamanho fixo para o botão */
    height: 32px;
    border-radius: 50%; /* Botão redondo */
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.edit-btn {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #555;
}

.edit-btn:hover {
    background-color: #e6ffee;
    border-color: #10B981;
    color: #10B981;
}

.delete-btn {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #dc3545; /* Cor vermelha para excluir */
}

.delete-btn:hover {
    background-color: #f8d7da;
    border-color: #dc3545;
    color: #dc3545;
}

.btn-action svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

/* Estilos para o Modal */
.modal {
    display: none; /* Oculto por padrão */
    position: fixed; /* Fica sobre tudo */
    z-index: 1000; /* Alto z-index para garantir que esteja acima de outros elementos */
    left: 0;
    top: 0;
    width: 100%; /* Largura total */
    height: 100%; /* Altura total */
    overflow: auto; /* Habilita scroll se o conteúdo for muito grande */
    background-color: rgba(0,0,0,0.4); /* Fundo escuro semi-transparente */
    display: flex; /* Usar flexbox para centralizar */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
}

.modal-content {
    background-color: #fefefe;
    margin: auto; /* Centraliza a caixa do modal */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Largura padrão */
    max-width: 500px; /* Largura máxima */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    position: relative; /* Para posicionar o botão de fechar */
}

.modal-content h2 {
    margin-top: 0;
    color: #333;
}

.modal-content p {
    margin-bottom: 20px;
    color: #555;
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.modal-buttons {
    text-align: right; /* Alinha os botões à direita */
}

.modal-buttons button {
    margin-left: 10px; /* Espaçamento entre os botões */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.btn-danger {
    background-color: #dc3545; /* Vermelho para excluir */
    color: white;
}

.btn-secondary {
    background-color: #6c757d; /* Cinza para cancelar */
    color: white;
}


/* Responsividade */
@media (min-width: 768px) { /* Para telas maiores que 768px (desktop/tablet) */
    .container {
        min-height: auto;
        max-width: 800px; /* Aumenta a largura em desktop */
        min-height: 600px; /* Altura mínima para não ficar muito pequeno */
    }
    .welcome-screen .header {
        border-bottom: none; /* Remove a borda inferior do header na welcome screen */
    }
    .menu-toggle {
        display: none; /* Garante que o menu hamburguer não apareça no desktop */
    }
    .main-nav {
        display: flex; /* Garante que o menu de navegação apareça no desktop */
    }
    .main-content h1 {
        font-size: 3rem; /* Título maior no desktop */
    }
    .illustration {
        max-width: 400px; /* Ilustração maior no desktop */
    }
}