/* Reset e fonte base */
 * {
 	margin: 0;
 	padding: 0;
 	box-sizing: border-box;
 	font-family: 'Poppins', sans-serif;
 }

body,
html {
        height: 100%;
}

/* Fundo com gradiente suave */
body {
        min-height: 100vh;
        /* remove margens do body se usar direto nele */
        margin: 0;

        /* camadas: manchas radiais + degradê de base */
        background:
        /* mancha turquesa (canto superior-esquerdo) */
        radial-gradient(64rem 40rem at 15% 22%,
        rgba(84, 214, 201, 0.55) 0%,
        rgba(84, 214, 201, 0.00) 60%),

        /* mancha azul (canto superior-direito) */
        radial-gradient(60rem 36rem at 86% 12%,
        rgba(120, 156, 233, 0.50) 0%,
        rgba(120, 156, 233, 0.00) 62%),

        /* mancha rosada (canto inferior-direito) */
        radial-gradient(60rem 40rem at 94% 92%,
        rgba(252, 194, 206, 0.45) 0%,
        rgba(252, 194, 206, 0.00) 55%),

        /* base clara do fundo */
        linear-gradient(180deg,
        #e3f4f1 0%,
        #eef3f8 50%,
        #f7eff4 100%);

        /* deixa o degradê “preso” ao viewport para telas longas */
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
}

/* Layout específico da página de login */
.login-body {
        display: flex;
        align-items: center;
        justify-content: center;
}

 /* Container principal */
 .login-container {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	width: 100%;
 	max-width: 500px;
 	padding: 2rem 1rem;
 }

 .login-logo {
 	position: relative;
 	/* Para que elementos dentro possam ser "absolutos" */
 	display: inline-block;
 	/* Ou block, dependendo da formatação desejada */
 	margin-bottom: 5rem;
 }

 .login-logo img {
 	max-width: 90%;
 	max-height: 95%;
 	display: block;
 	/* Garante que a imagem ocupe seu próprio espaço */
 }

 .login-subtitle {
 	position: absolute;
 	top: 100px;
 	right: 66px;
 	width: 240px;
 	color: #555;
 	text-align: center;
 	font-size: 1rem;
 	line-height: 1.2;
 	word-wrap: break-word;
 	font-family: 'Gelica Medium', sans-serif !important;
 	font-weight: 600;
 	margin-top: 13px;
 }

 /* Campos de input “pill” */
 .login-input {
 	border-radius: 50px;
 	/* torna o input mais “oval” */
 	height: 50px;
 	font-size: 1rem;
 	padding: 0 1.5rem;
 	border: 1px solid #ccc;
 	outline: none;
 	transition: border-color 0.3s;
 }

 .login-input:focus {
 	border-color: #48cae4;
 	/* cor de foco */
 }

 /* Container dos campos */
 .form-group {
 	margin-bottom: 1rem;
 	width: 100%;
 }

 textarea{
        resize: none;
 }

 /* Botão principal (Login) */
 .login-btn {
 	border-radius: 50px;
 	background-color: #05ab77;
 	/* cor do botão (verde menta) */
 	color: #fff;
 	border: none;
 	width: 150px;
 	height: 50px;
 	font-size: 1rem;
 	cursor: pointer;
 	transition: background-color 0.3s;
 }

 .login-btn:hover {
 	background-color: #049463;
 }


.outro-btn {
 	border-radius: 50px;
 	background-color: #0545ab;
 	/* cor do botão (azul) */
 	color: #fff;
 	border: none;
 	width: 150px;
 	height: 50px;
 	font-size: 1rem;
 	cursor: pointer;
 	transition: background-color 0.3s;
 }

 .outro-btn:hover {
 	background-color: #0b08ce92;
 }

 .cinza-btn {
 	border-radius: 50px;
 	background-color: #81878f;
 	/* cor do botão (cinza) */
 	color: #fff;
 	border: none;
 	width: 150px;
 	height: 50px;
 	font-size: 1rem;
 	cursor: pointer;
 	transition: background-color 0.3s;
 }

 .cinza-btn:hover {
 	background-color: #94949793;
 }


.transparent-btn {
        border-radius: 50px;
        background-color: transparent;
        color: #81878f;
        border: 2px solid #81878f;
        width: 150px;
        height: 50px;
        font-size: 1rem;
        cursor: pointer;
        transition: background-color 0.3s, color 0.3s;
}

.transparent-btn:hover {
        background-color: #81878f;
        color: #fff;
}

.logout-action {
        display: flex;
        justify-content: center;
        padding: 1.5rem 2rem 0;
        position: relative;
        z-index: 20;
}

.logout-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        border-radius: 999px;
        background: linear-gradient(120deg, #f87171, #dc2626);
        color: #fff;
        border: none;
        padding: 0.625rem 1.5rem;
        font-size: 1rem;
        font-weight: 600;
        box-shadow: 0 8px 20px rgba(220, 38, 38, 0.25);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        text-decoration: none;
}

.logout-btn:hover,
.logout-btn:focus {
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 12px 24px rgba(220, 38, 38, 0.35);
        text-decoration: none;
}

.logout-btn:focus {
        outline: none;
        box-shadow: 0 0 0 0.25rem rgba(220, 38, 38, 0.35);
}

.logout-btn i {
        font-size: 1.1rem;
}

@media (max-width: 768px) {
        .logout-action {
                justify-content: center;
                padding: 1.5rem 1rem 0;
        }

        .logout-btn {
                width: 100%;
                justify-content: center;
        }
}

.yellow-btn {
 	border-radius: 50px;
        background-color: #ffd700;
 	/* cor do botão (amarelo) */
 	color: black;
 	border: none;
 	width: 150px;
 	height: 50px;
 	font-size: 1rem;
 	cursor: pointer;
 	transition: background-color 0.3s;
 }

 .yellow-btn:hover {
 	background-color: #cdb83e;
 }


 /* Links de cadastro e esqueceu senha */
 .login-footer {
        margin-top: 2rem;
        display: flex;
        justify-content: flex-end;
        width: 100%;
        max-width: 500px;
 }

 .login-footer a {
 	text-decoration: none;
 	font-weight: 500;
 	color: #6c63ff;
 	/* Exemplo de cor roxa para links */
 }

 .login-footer a:hover {
 	text-decoration: underline;
 }

 /* Centralizar o botão de login */
 .login-btn-container {
 	display: flex;
 	justify-content: center;
 	margin-top: 1rem;
 }

 /* Responsividade para telas menores */
@media (max-width: 575.98px) {
       
}

/* Tela de seleção de unidade */
.unit-select-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 500px;
        padding: 2rem 1rem;
}

.unit-select-title {
        background: #fff;
        padding: 1rem 2rem;
        border-radius: 50px;
        font-weight: 600;
}

.unit-select-title-gold {
        background: #ffd700;
        padding: 1rem 2rem;
        border-radius: 50px;
        font-weight: 600;
}

.unit-btn {
        border-radius: 50px;
        background-color: #05ab77;
        color: #fff;
        border: none;
        height: 50px;
        font-size: 1rem;
        transition: background-color 0.3s;
}

.unit-btn:hover {
        background-color: #049463;
}

.unit-selected-container {
        padding: 2rem;
}

.password-toggle-wrapper {
        position: relative;
        width: 100%;
 }

.password-toggle-input {
        padding-right: 3rem;
 }

.password-toggle-btn {
        position: absolute;
        top: 50%;
        right: 1.5rem;
        transform: translateY(-50%);
        border: none;
        background: transparent;
        padding: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6c757d;
        transition: color 0.2s ease-in-out;
}

.password-toggle-btn:focus {
        outline: none;
}

.password-toggle-btn:focus-visible {
        outline: 2px solid #48cae4;
        border-radius: 50%;
}

.password-toggle-btn:hover {
        color: #4a4f55;
}

.password-toggle-btn i {
        font-size: 1.1rem;
        line-height: 1;
}

/* Página de unidade do médico */
.patient-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 500px;
        padding: 2rem 1rem;
}

.patient-title {
        background: #ffc107;
        color: #000;
        padding: 1rem 2rem;
        border-radius: 50px;
        font-weight: 600;
}

.patient-heading {
        background: #fff;
        padding: 1rem 2rem;
        border-radius: 50px;
        font-weight: 600;
}

.logo-bottom-left {
        position: fixed;
        bottom: 1rem;
        left: 1rem;
        width: 200px;
}

/* Página de evolução do paciente */
.evolution-layout {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 900px;
        padding: 2rem 1rem;
}

.evolution-container {
        display: flex;
        width: 100%;
        gap: 2rem;
}
.evolution-patient-name {
        background: #05ab77;
        color: #fff;
        padding: 1rem;
        border-radius: 50px;
        font-weight: 600;
        text-align: center;
}

.evolution-textarea {
        width: 100%;
        height: 300px;
        border-radius: 20px;
}

.evolution-submit {
        border-radius: 50px;
        padding: 0.5rem 2rem;
}

/* Botões de navegação na página do paciente */
.evolucao-nav-btn {
        border: none;
        border-radius: 50px;
        padding: 1rem 2rem;
        font-weight: 600;
}

.evolucao-nav-btn-prev {
        background: #fff;
        color: #000;
}

.evolucao-nav-btn-familia {
        background: #ffc107;
        color: #000;
}

#selecionar-outro-paciente{
        width: 30%;
}


@media (max-width: 768px) {
        .evolution-container {
                flex-direction: column;
        }
        .evolution-sidebar {
                width: 100%;
        }
        .evolution-textarea {
                height: 200px;
        }
         .login-container {
                margin: 1rem;
        }

 	.login-footer {
 		flex-direction: column;
 		align-items: center;
 		gap: 1rem;
        }
         .login-footer {
                flex-direction: column;
                align-items: flex-end;
                gap: 1rem;
        }

        .login-logo {
                display: flex;
                flex-direction: column;
                align-items: center;
        }

        .login-subtitle {
                position: static;
                top: auto;
                right: auto;
                width: 240px;
                margin: 1rem auto 0;
        }

        .logo-bottom-left {
                display: block;
                margin: 20px auto 0;
                position: initial;
                left: auto;
                right: auto;
                bottom: auto;
                width: 90px;
        }

        #selecionar-outro-paciente{
                width: 100%;
        }
}