/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    width: 100%;
    font-family: Arial, sans-serif;
    background: #f4f4f4;
}

/* Corpo centralizado com pequenas margens laterais */
body {
    display: flex;
    justify-content: center;
    padding: 0 1rem; /* margem lateral */
}



/* Container principal com layout flex vertical */
#mainInterface {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    width: 100%; /* ocupa toda a largura disponível */
    min-height: 100vh; /* ocupa a altura inteira da tela */ 
	visibility:hidden;
}

/* Header fixo no topo */
.header {
    background: #0077cc;
    color: #fff;
    padding: 0.5rem;
    text-align: center;
    flex-shrink: 0;
	letter-spacing: 2px;/* adiciona 2px de espaço extra entre cada caractere */
}

/* Article ocupa o espaço restante */
.article {
	position: relative; /* agora o overlay absoluto será relativo a este artigo */
    flex: 1;
    padding: 0; /* retiramos o padding para que as divs ocupem toda a área */
    overflow-y: auto;
	/*background-color: #e6f0fa; /* azul bem suave */
	/*background-color: #f5f5dc; /* bege clássico */
	/*background-color: #f0f4f8; /* tom frio e leve */
	/*background-color: #faf3e0; /* bege puxado para areia */	
	/*background-color:#e0e6eb; /* um pouco mais escuro, ainda leve*/
	background-color:#d9e0e7;/* → cinza-azulado médio, mantém suavidade*/
	/*background-color:#cfd8df;/* → mais marcado, mas ainda confortável*/
}

/* Footer fixo no rodapé */

.footer {
    color: #000;              /* cor do texto */
    font-size: 0.8rem;        /* tamanho pequeno e discreto */
    padding: 0.5rem;
    text-align: center;
    flex-shrink: 0;
    background-color: #d9e0e7; /* mesma cor do article */
  //  opacity: 0.7;             /* opcional: deixa o texto ainda mais discreto */
}
/* Mensagem para quem não tem JS */
.no-js-message {
    background: #ffe0e0;
    color: #900;
    padding: 1rem;
    text-align: center;
    border-radius: 8px;
    margin: 2rem;
}

/* Container principal permanece absoluto */
#principal {
   /* position: relative; /* relativo para que a camada possa usar absolute relativa a ele */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

/* Menu lateral */

#menu {
    flex: 0 0 20%;      
    min-width: 12.5rem; /* 200px aproximado */
    height: 100%;
    background-color: #b0c4de; 
    padding: 0; /* para ocupar toda altura */
    box-sizing: border-box;

   display: flex;        
    flex-direction: column;   /* alinhamento vertical */
}

#menu > div {
    width: 100%;       /* ocupam toda a largura do menu */
    height: 50%;       /* dividem a altura igualmente */
   display: flex; 
    justify-content: center; /* centraliza horizontalmente */
    align-items: flex-start; /* conteúdo alinhado ao topo, não centralizado verticalmente */
    padding-top: 0.5rem;    /* pequeno espaçamento do topo */
    box-sizing: border-box;
	
	
	//background-color:rgba(0,0,0,0.2);  /*SO PARA SE LOCALIZAR  APAGAR DEPOIS*/
	//border: 3px solid silver; /*SO PARA SE LOCALIZAR APAGAR DEPOIS*/
	//border-radius: 18px; /*SO PARA SE LOCALIZAR APAGAR DEPOIS*/
}

/* Estilos opcionais para diferenciar visualmente */


#divIdentificacao {

}

#identificacaoSelect {
  margin-top: 2rem;   /* desce apenas o select */
  width: 80%;         /* largura ajustável */
  padding: 0.5rem;    /* espaçamento interno */
  border-radius: 8px; /* cantos arredondados */
  border: 1px solid #ccc;
  font-size: 1rem;
}


#divLogout {

}
/* Bloco de permissões */
.permissoes {
    width: 90%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #222;
}

.permissoes-titulo {
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
    line-height: 1.3;
}

.perfil-usuario {
    font-weight: 600;
}

/* Lista */
.permissoes-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

.permissoes-lista li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0.6rem;
    margin-bottom: 0.3rem;

    background: rgba(255,255,255,0.5);
    border-radius: 10px;
    font-size: 0.85rem;
}

.permissoes-lista img {
    width: 1.2rem;
    height: 1.2rem;
}

/* Mobile ajustes */
@media (pointer: coarse), (max-width: 768px) {
    .permissoes-titulo {
        font-size: 1rem;
    }

    .permissoes-lista li {
        font-size: 0.95rem;
    }

    .permissoes-lista img {
        width: 1.4rem;
        height: 1.4rem;
    }
}

/* Botão sair */
.btn-sair {
    margin-top: 0.8rem;
    width: 100%;
    padding: 0.3rem;

   /* background: linear-gradient(135deg, #c0392b, #e74c3c);*/
    background: rgba(255,255,255,0.5);
    color: #000;
    font-size: 1.2rem;
    font-weight: 550;
	letter-spacing: 2px;
    border: none;
    border-radius: 12px;
    cursor: pointer;

    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-sair:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

.btn-sair:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

/* Mobile */
@media (pointer: coarse), (max-width: 768px) {
    .btn-sair {
        padding: 0.8rem;
        font-size: 1rem;
    }
}



/* Conteúdo principal */
#conteudo {
    flex: 1;            
    min-width: 37.5rem; /* 600px aproximado */
    height: 100%;
    background-color: #e6f0fa; 
    padding: 1rem;      /* distância do topo */
    box-sizing: border-box;
    border: 3px solid silver;
    border-radius: 8px;

    display: flex;            
    flex-direction: column;   
    align-items: center;      /* centraliza horizontalmente */
    gap: 1rem;                /* espaço entre elementos */
}
/* topo do conteudo */
#conteudoTopo {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#dadosPaciente {
    font-size: 1rem;
    font-weight: 600;
	max-width: calc(100% - 4rem);
	margin: 0 auto;
    text-align: center;
}

/* botão fechar */
#btnFecharConsulta {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

#btnFecharConsulta img {
    width: 2rem;
    height: 2rem;
}

/* area das imagens */
#divConteudoImagens {
    width: 100%;
    margin-top: 1rem;

    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;

    overflow-y: auto;
}

/* miniaturas */
#divConteudoImagens img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 8px;
}

#divConteudoImagens img,
.miniaturaArquivo {
    cursor: pointer;
}
/* mobile */
@media (pointer: coarse), (max-width: 768px) {
    #divConteudoImagens img {
        width: 100px;
        height: 100px;
    }
}


/*campo SENHA*/
/* Bloco senha */
#divSenha {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 0.5rem;
    box-sizing: border-box;
}

#divSenha input {
    width: 80%;
    padding: 0.6rem 0.7rem;

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.9rem;
    color: #222;

    border-radius: 10px;
    border: 1px solid #ccc;
    background: rgba(255,255,255,0.7);

    box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
    outline: none;

    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#divSenha input::placeholder {
    color: #666;
    font-size: 0.85rem;
}

#divSenha input:focus {
    border-color: #0077cc;
    box-shadow: 0 0 0 2px rgba(0,119,204,0.25);
}

/* Mobile */
@media (pointer: coarse), (max-width: 768px) {
    #divSenha input {
        width: 90%;
        font-size: 1rem;
        padding: 0.75rem;
    }
}

/*alerta sim nao  quando adimin vai deletar um paciente*/

#divAlertaDeletPac {
    width: 100%;
    padding: 0.5rem 0.6rem;
    display: none;
	/*display: flex;*/
    flex-direction: column;
    box-sizing: border-box;
}

/* Caixa principal */
.alerta-deletar {
    background: #fff3f3;
    border: 1px solid #f3bcbc;
    border-left: 6px solid #e53935;
    border-radius: 10px;
    padding: 0.9rem;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
    animation: aparecer 0.25s ease-out;
}

/* Texto */
.alerta-deletar h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #b71c1c;
    line-height: 1.35;
}

/* Destaques */
.alerta-deletar strong {
    color: #7f0000;
}

/* Área dos botões */
.alerta-botoes {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.8rem;
}

/* Botões */
.alerta-botoes button {
    flex: 1;
    padding: 0.6rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: transform 0.1s ease, opacity 0.1s ease;
}

/* Botão SIM */
.btn-sim {
    background: #e53935;
    color: #fff;
}

/* Botão NÃO */
.btn-nao {
    background: #e0e0e0;
    color: #333;
}

/* Hover (desktop) */
.alerta-botoes button:hover {
    transform: scale(1.03);
    opacity: 0.95;
}

/* Animação suave */
@keyframes aparecer {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* divPesquisas*/
/* Div de pesquisa adaptada ao layout existente */
#divPesquisa {
    width: 100%;            /* ocupa toda a largura do menu ou área designada */
    padding: 0.5rem 0.6rem; /* espaçamento interno semelhante aos outros inputs */
    display: flex;
    flex-direction: column;
    gap: 0.4rem;            /* espaço entre input e resultados */
    box-sizing: border-box;
}

#divPesquisa input#inputNome {
    width: 100%;
    padding: 0.5rem;
    font-size: 16px;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: rgba(255,255,255,0.7);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#divPesquisa input#inputNome::placeholder {
    color: #666;
    font-size: 0.85rem;
}

#divPesquisa input#inputNome:focus {
    border-color: #0077cc;
    box-shadow: 0 0 0 2px rgba(0,119,204,0.25);
}

/* Cabeçalho dinâmico da pesquisa */
#divTituloPesquisa {
    width: 100%;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1f3c88;
    background: linear-gradient(135deg, rgba(0,119,204,0.12), rgba(0,119,204,0.04));
    border-left: 4px solid #0077cc;
    border-radius: 6px;
    box-sizing: border-box;
	margin-bottom: 0.3rem;
   // display: none; /* só aparece quando tiver texto */
}

/* Ajuste fino para telas maiores */
@media (min-width: 768px) {
    #divTituloPesquisa {
        font-size: 0.9rem;
        padding: 0.4rem 0.6rem;
    }
}


/* Resultados da pesquisa */
#divRetornoNomes {
    width: 100%;
    max-height: 300px;     /* limita altura e cria scroll se necessário */
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

/* Cada item retornado */
.itemNome {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    font-size: 0.85rem;
}

.itemNome:hover {
    background: #e6f0fa; /* tom similar ao conteúdo principal */
}

/* Botão carregar mais */
#btnMais {
    margin: 0.5rem 0;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    cursor: pointer;
    border: 1px solid #0077cc;
    border-radius: 6px;
    background: #f0f8ff;
    color: #0077cc;
    align-self: center;
}

#btnMais:hover {
    background: #e0f0ff;
}

/* sem conteudo */
#conteudoVazio {
    flex: 1;            
    min-width: 37.5rem; /* 600px aproximado */
    height: 100%;
    background-color: #e6f0fa; 
    padding: 1rem;      /* distância do topo */
    box-sizing: border-box;
    border: 3px solid silver;
    border-radius: 8px;

    display: flex;            
    flex-direction: column;   
    align-items: center;      /* centraliza horizontalmente */
    gap: 1rem;                /* espaço entre elementos */
}

/* miniatura de arquivo (pdf/txt) */
.miniaturaArquivo {
    width: 140px;
    height: 140px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 8px;
    cursor: pointer;

    background-size: 64px 64px;
    background-repeat: no-repeat;
    background-position: center 30%;
    background-color: #f5f5f5;

    text-align: center;
}

.miniaturaArquivo span {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem;
    word-break: break-word;
    margin-top: 3.5rem;
}

/* tipos */
.miniaturaArquivo.pdf {
    background-image: url('imagens/pdf.png');
}

.miniaturaArquivo.txt {
    background-image: url('imagens/txt.png');
}

/* mobile */
@media (pointer: coarse), (max-width: 768px) {
    .miniaturaArquivo {
        width: 100px;
        height: 100px;
        background-size: 48px 48px;
    }

    .miniaturaArquivo span {
        font-size: 0.7rem;
        margin-top: 2.8rem;
    }
}

/*Camada sobreposta que exibe  ## imagem ampliada*/
#divImagemAmpliada {
    position: fixed;
    inset: 0;

    background-color: #faf3e0;
    border: 5px solid silver;

    display: flex;
    flex-direction: column;

    z-index: 10;
	visibility: hidden; /*invisível inicialmente */
	/*visibility:visible;  controlar pelo js*/
}

/* Topo  ## imagem ampliada*/
#topoImagemAmpliada {
    padding: 0.5rem;
    font-size: 0.95rem;
  /*  font-weight: 600;*/
	max-width: calc(100% - 8rem);
	margin: 0 auto;
    text-align: center;
}

#topoImagemAmpliada .rotulo {
    color: #2570e3; /* azul escuro */
    font-weight: bold;
}

#topoImagemAmpliada .espaco {
    margin-left: 30px; /* espaço maior entre JPG e Data */
}


/* Área da imagem  ## <!-- IMAGEM -->*/
#imagemAmpliada {
    flex: 1;

    /*display: flex;   ajustar no JS*/
	display:none; 
    justify-content: center;
    align-items: center;

    overflow: hidden;
}

#imagemAmpliada img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* PDF */
#pdfAmpliado {
    flex: 1;

    display: none;
	/*display:flex;  exibido via JS com display:flex */
    justify-content: center;
    align-items: center;

    overflow-y: auto;       /* scroll vertical se precisar */
    overflow-x: hidden;     /* nunca scroll horizontal */
}

/* iframe do PDF */
#pdfAmpliado iframe {
    width: 100%;
    height: 100%;

    border: none;
    outline: none;
    box-shadow: none;

    display: block;
}

/* PDF */
#txtAmpliado {
    flex: 1;

    display: none;
	/*display:flex;  exibido via JS com display:flex */
    justify-content: center;
    align-items: center;

    overflow-y: auto;       /* scroll vertical se precisar */
    overflow-x: hidden;     /* nunca scroll horizontal */
}

/* iframe do PDF */
#txtAmpliado iframe {
    width: 90%;
    height: 90%;

    border: none;
    outline: none;
    box-shadow: none;

    display: block;
}


/* Rodapé  ## imagem ampliada*/
#rodapeImagemAmpliada {
    padding: 0.5rem 1rem;

    font-size: 1rem;
    font-weight: 600;
    text-align: center;

    display: flex;
    align-items: center;
}

/* Botão crítico */
#apagarImagem {
    margin-left: auto;              /* empurra para a direita */
    margin-right: 5%;               /* ~75% visual à direita */

    padding: 0.5rem 1rem;
    min-width: 140px;

    font-size: 0.95rem;
    font-weight: 600;

    background-color: #c62828;      /* vermelho forte */
    color: #fff;

    border: none;
    border-radius: 6px;

    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
	display:none;
}

/* Feedback visual */
#apagarImagem:hover {
    background-color: #b71c1c;
}

#apagarImagem:active {
    transform: scale(0.97);
}

/* Mobile */
@media (max-width: 768px) {
    #apagarImagem {
        min-width: 120px;
        font-size: 0.9rem;
        padding: 0.45rem 0.9rem;
        margin-right: 2%;
    }
}


/* Botão fechar  ## imagem ampliada*/
#btnFecharImagemAmpliada {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;

    width: 2rem;
    height: 2rem;

    background: transparent;
    border: none;
    padding: 0;

    cursor: pointer;
    z-index: 11;
}

#btnFecharImagemAmpliada img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Mobile   ## imagem ampliada*/
@media (max-width: 768px) {
    #topoImagemAmpliada,
    #rodapeImagemAmpliada {
        font-size: 0.9rem;
        padding: 0.4rem;
    }

    #apagarImagem {
        min-width: 120px;
        font-size: 0.9rem;
        padding: 0.45rem 0.9rem;
        margin-right: 2%;
    }	
}


/* Overlay */
#overlayConfirmacaoDelecao {
    position: fixed;
    inset: 0;

    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);

    display: none; 
	/*display:flex; exibido via JS */
    justify-content: center;
    align-items: center;

    z-index: 20;
}

/* Caixa de confirmação */
#caixaConfirmacao {
    background-color: #fff4f4;
    border: 2px solid #c62828;
    border-radius: 10px;

    width: 90%;
    max-width: 420px;

    padding: 1.2rem;

    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* Texto */
#textoConfirmacao {
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: #4a0000;

    line-height: 1.4;
}

#textoConfirmacao span {
    display: block;
    margin-top: 0.5rem;

    font-size: 0.9rem;
    font-weight: 500;
    color: #8b0000;
}

/* Botões */
#botoesConfirmacao {
    margin-top: 1.2rem;

    display: flex;
    gap: 0.8rem;
    justify-content: center;
}

#btnConfirmarSim,
#btnConfirmarNao {
    min-width: 110px;
    padding: 0.5rem 1rem;

    font-size: 0.95rem;
    font-weight: 600;

    border-radius: 6px;
    border: none;

    cursor: pointer;
    transition: transform 0.1s ease, background-color 0.2s ease;
}

/* Botão SIM (crítico) */
#btnConfirmarSim {
    background-color: #c62828;
    color: #fff;
}

#btnConfirmarSim:hover {
    background-color: #b71c1c;
}

/* Botão NÃO */
#btnConfirmarNao {
    background-color: #e0e0e0;
    color: #333;
}

#btnConfirmarNao:hover {
    background-color: #d5d5d5;
}

/* Feedback */
#btnConfirmarSim:active,
#btnConfirmarNao:active {
    transform: scale(0.96);
}

/* Mobile */
@media (max-width: 768px) {
    #caixaConfirmacao {
        padding: 1rem;
    }

    #textoConfirmacao {
        font-size: 0.95rem;
    }

    #textoConfirmacao span {
        font-size: 0.85rem;
    }

    #btnConfirmarSim,
    #btnConfirmarNao {
        min-width: 100px;
        font-size: 0.9rem;
    }
}

/* janela deletar ou inserir paciente*/
/* Container externo — SEM cor */
#divEditarInserirPac {
    width: 100%;
    padding: 0.8rem 0.6rem;
    box-sizing: border-box;

    display: flex;
    justify-content: center;
}

/* Card interno */
.cardEditarInserirPac {
    width: 100%;
    max-width: 360px;

    padding: 0.9rem 0.8rem;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;

    background-color: #1a527f;
    border: 3px solid ##c0c0c0;
    border-radius: 8px;
	margin-top:3rem;
}


/* Título */
.tituloEditarInserir {
    width: 100%;
    text-align: center;

    font-size: 1.05rem;
    font-weight: 600;
    color: #e6e6e6;
}

/* Botões */
.botoesEditarInserir {
    width: 100%;
    display: flex;
    gap: 0.6rem;
}

.botoesEditarInserir button {
    flex: 1;
    padding: 0.5rem;

    font-size: 0.95rem;
    font-weight: 500;

    border: none;
    border-radius: 6px;
    cursor: pointer;

    background-color: #b0c4de; /* cor do menu */
    color: #1f2f44;

    transition: background-color 0.2s ease;
}

.botoesEditarInserir button:hover {
    background-color: #9fb9dd;
}

/* Mobile */
@media (max-width: 480px) {
    .botoesEditarInserir {
        flex-direction: column;
    }
}


/* JANELA INSERE NOVO PACIENTE */

#divInsereNovoPaciente {
    width: 100%;
    display: flex;
    flex-direction: column; /* <<< chave para empilhar */
    align-items: center;
    padding: 0.5rem 0;
    box-sizing: border-box;	
    border-radius: 10px;
    border: 2px solid #ccc;
}

#divInsereNovoPaciente label {
    width: 80%;
    font-size: 0.85rem;
    color: #333;
    margin-top: 1rem;
    margin-bottom: 0.2rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	margin-left: 2rem;
}

#divInsereNovoPaciente input {
    width: 80%;
    padding: 0.6rem 0.7rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.9rem;
    color: #222;
    border-radius: 10px;
    border: 1px solid #ccc;
    background: rgba(255,255,255,0.7);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
	margin-left: 1rem;
}

#divInsereNovoPaciente input::placeholder {
    color: #000;
    font-size: 0.85rem;
}

#divInsereNovoPaciente input:focus {
    border-color: #0077cc;
    box-shadow: 0 0 0 2px rgba(0,119,204,0.25);
}

/* Mobile */
@media (pointer: coarse), (max-width: 768px) {
    #divInsereNovoPaciente label,
    #divInsereNovoPaciente input {
        width: 90%;
    }

    #divInsereNovoPaciente input {
        font-size: 1rem;
        padding: 0.75rem;
    }
}

/* botoes envia cadastro sair*/
#enviarCadastro {
    width: 80%;
    margin: 1.5rem 0 1rem 1rem; /* espaço em cima e alinhado à esquerda */
    padding: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #0077cc, #005fa3);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

#enviarCadastro:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    background: linear-gradient(135deg, #0088e6, #006bb8);
}

#enviarCadastro:active {
    transform: translateY(0);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

/* Mobile */
@media (pointer: coarse), (max-width: 768px) {
    #enviarCadastro {
        width: 90%;
        margin-left: 1rem;
        font-size: 1rem;
        padding: 0.85rem;
    }
}

#fecharCadastro {
    width: 80%;
    margin: 0.5rem 0 1rem 1rem; /* espaço em cima e alinhado à esquerda */
    padding: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #0077cc, #005fa3);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

#fecharCadastro:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    background: linear-gradient(135deg, #0088e6, #006bb8);
}

#fecharCadastro:active {
    transform: translateY(0);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

/* Mobile */
@media (pointer: coarse), (max-width: 768px) {
    #fecharCadastro {
        width: 90%;
        margin-left: 1rem;
        font-size: 1rem;
        padding: 0.85rem;
    }
}

/* JANELA QUE EDITA PACIENTE */

#divEditarPaciente {
    width: 100%;
    display: flex;
    flex-direction: column; /* <<< chave para empilhar */
    align-items: center;
    padding: 0.5rem 0;
    box-sizing: border-box;	
    border-radius: 10px;
    border: 2px solid #ccc;
}

#divEditarPaciente label {
    width: 80%;
    font-size: 0.85rem;
    color: #333;
    margin-top: 1rem;
    margin-bottom: 0.2rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	margin-left: 2rem;
}

#divEditarPaciente input {
    width: 80%;
    padding: 0.6rem 0.7rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.9rem;
    color: #222;
    border-radius: 10px;
    border: 1px solid #ccc;
    background: rgba(255,255,255,0.7);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
	margin-left: 1rem;
}

#divEditarPaciente input::placeholder {
    color: #000;
    font-size: 0.85rem;
}

#divEditarPaciente input:focus {
    border-color: #0077cc;
    box-shadow: 0 0 0 2px rgba(0,119,204,0.25);
}

/* Mobile */
@media (pointer: coarse), (max-width: 768px) {
    #divEditarPaciente label,
    #divEditarPaciente input {
        width: 90%;
    }

    #divEditarPaciente input {
        font-size: 1rem;
        padding: 0.75rem;
    }
}
/* botoes editar cadastro sair*/
#editarCadastro {
    width: 80%;
    margin: 1.5rem 0 1rem 1rem; /* espaço em cima e alinhado à esquerda */
    padding: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #0077cc, #005fa3);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

#editarCadastro:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    background: linear-gradient(135deg, #0088e6, #006bb8);
}

#editarCadastro:active {
    transform: translateY(0);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

/* Mobile */
@media (pointer: coarse), (max-width: 768px) {
    #editarCadastro {
        width: 90%;
        margin-left: 1rem;
        font-size: 1rem;
        padding: 0.85rem;
    }
}

#fecharEdicao {
    width: 80%;
    margin: 0.5rem 0 1rem 1rem; /* espaço em cima e alinhado à esquerda */
    padding: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #0077cc, #005fa3);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

#fecharEdicao:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    background: linear-gradient(135deg, #0088e6, #006bb8);
}

#fecharEdicao:active {
    transform: translateY(0);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

/* Mobile */
@media (pointer: coarse), (max-width: 768px) {
    #fecharEdicao {
        width: 90%;
        margin-left: 1rem;
        font-size: 1rem;
        padding: 0.85rem;
    }
}


#divUpload {
    width: 100%;
	height: 50%;
	 flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 0.5rem;
    box-sizing: border-box;
}
 #areaDrop{
 border:2px dashed #999;
 text-align:center;
 cursor:pointer;
 width: 100%;
 padding: 5rem 0.6rem
 }
 
/* Div sobreposta para metadados EXIF */
#exibindoMetadados {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background-color: #f7f8f9; /* branco gelo */
    border: 2px solid silver;
    border-radius: 12px;

    width: 60%;
    height: 90%;
    padding: 2.5rem 1rem 1rem; /* espaço extra para o botão */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);

    overflow-y: auto;
    overflow-x: hidden;

    z-index: 20;
    visibility: hidden;
}

/* Botão fechar – canto superior direito 
#fecharMetadados {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;

    width: 32px;
    height: 32px;

    border: none;
    border-radius: 50%;
    background-color: silver;
    color: red;

    font-size: 1.2rem;
    font-weight: bold;
    line-height: 32px;
    text-align: center;

    cursor: pointer;
}

#fecharMetadados {
    position: fixed;          
    top: 1rem;              
    right: 1rem;             

    width: 36px;
    height: 36px;

    border: none;
    border-radius: 50%;
    background-color: silver;
    color: #000;

    font-size: 1.3rem;
    font-weight: bold;
    line-height: 36px;
    text-align: center;

    cursor: pointer;
    z-index: 25;              
}
*/

#fecharMetadados {
    position: sticky;
    top: 0.6rem;
    float: right;

    width: 36px;
    height: 36px;

    border: none;
    border-radius: 50%;
    background-color: silver;
    color: #d30000;

    font-size: 1.3rem;
    font-weight: bold;
    line-height: 36px;
    text-align: center;

    cursor: pointer;
    z-index: 30;
}


/* Conteúdo dos metadados */
#conteudoMetadados {
    font-size: 0.9rem;
    line-height: 1.4rem;
    color: #333;
}

/* Mobile */
@media (max-width: 768px) {
    #exibindoMetadados {
        width: 95%;
        padding: 2.2rem 0.8rem 0.8rem;
    }
}