/*
|--------------------------------------------------------------------------
| TKConsulta
|--------------------------------------------------------------------------
| Arquivo: app.css
| Camada: Assets / CSS
|
| Responsabilidade:
| Estilos globais da aplicação pública
| e da área administrativa.
|--------------------------------------------------------------------------
*/


/* =========================================================
   VARIÁVEIS
========================================================= */

:root {
    --cor-primaria: #1565c0;
    --cor-primaria-hover: #0d55a5;

    --cor-texto: #1f2937;
    --cor-texto-secundario: #6b7280;

    --cor-fundo: #f5f7fa;
    --cor-card: #ffffff;

    --cor-borda: #e5e7eb;

    --cor-sucesso-fundo: #eef7ee;
    --cor-sucesso: #16803c;

    --sombra-card:
        0 4px 18px rgba(0, 0, 0, 0.06);

    --raio-card: 18px;
    --raio-campo: 10px;
}


/* =========================================================
   RESET / GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;

    min-height: 100vh;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        var(--cor-fundo);

    color:
        var(--cor-texto);
}

h1 {
    margin-top: 0;
    margin-bottom: 12px;

    font-size: 30px;
}

p {
    line-height: 1.5;
}


/* =========================================================
   TOPO PÚBLICO
========================================================= */

.topo {
    padding:
        18px
        max(
            20px,
            env(safe-area-inset-left)
        );

    padding-top:
        max(
            18px,
            env(safe-area-inset-top)
        );

    background: #ffffff;

    border-bottom:
        1px solid
        var(--cor-borda);
}

.topo-conteudo {
    width: 100%;
    max-width: 720px;

    margin: 0 auto;
}

.logo {
    display: inline-block;

    color:
        var(--cor-primaria);

    font-size: 22px;
    font-weight: 700;

    text-decoration: none;
}

.logo span {
    color:
        var(--cor-texto);
}


/* =========================================================
   ESTRUTURA PÚBLICA
========================================================= */

.container {
    width: 100%;
    max-width: 720px;

    margin: 0 auto;

    padding:
        40px
        20px
        calc(
            40px
            +
            env(safe-area-inset-bottom)
        );
}

.card {
    padding: 28px;

    background:
        var(--cor-card);

    border-radius:
        var(--raio-card);

    box-shadow:
        var(--sombra-card);
}


/* =========================================================
   BOTÕES GLOBAIS
========================================================= */

.btn {
    display: inline-flex;

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

    width: 100%;

    min-height: 48px;

    padding:
        12px
        18px;

    border: 0;
    border-radius: 10px;

    background:
        var(--cor-primaria);

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;

    text-align: center;
    text-decoration: none;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
}

.btn:hover {
    background:
        var(--cor-primaria-hover);
}

.btn-secundario {
    border:
        1px solid
        #d6dee7;

    background: #ffffff;

    color:
        var(--cor-texto);
}

.btn-secundario:hover {
    border-color:
        #b7c4d0;

    background:
        #f6f8fb;

    color:
        var(--cor-texto);
}

.btn-perigo {
    border:
        1px solid
        #efc1bd;

    background: #ffffff;

    color: #b42318;
}

.btn-perigo:hover {
    border-color:
        #e5aaa5;

    background:
        #fff5f5;

    color:
        #9b1c13;
}


/* =========================================================
   ALERTAS / STATUS
========================================================= */

.status {
    margin-top: 20px;

    padding: 14px;

    background:
        var(--cor-sucesso-fundo);

    color:
        var(--cor-texto);

    border-radius:
        var(--raio-campo);

    line-height: 1.5;
}

.alerta {
    margin-bottom: 18px;

    padding:
        13px
        15px;

    border-radius: 10px;
}

.alerta-erro {
    background: #fff1f1;

    color: #b42318;
}

.alerta-sucesso {
    margin-bottom: 20px;

    background: #eaf7ed;

    color: #16743a;
}


/* =========================================================
   FLUXO DE AGENDAMENTO
========================================================= */

.link-voltar {
    display: inline-block;

    margin-bottom: 18px;

    color:
        var(--cor-primaria);

    font-size: 15px;
    font-weight: 600;

    text-decoration: none;
}

.link-voltar:hover {
    text-decoration: underline;
}

.cabecalho-etapa {
    margin-bottom: 22px;
}

.cabecalho-etapa h1 {
    margin-bottom: 6px;
}

.cabecalho-etapa p {
    margin: 0;

    color:
        var(--cor-texto-secundario);
}

.paciente-resumo {
    display: flex;
    flex-direction: column;

    gap: 3px;

    margin-bottom: 24px;

    padding:
        14px
        16px;

    background: #f7f9fc;

    border:
        1px solid
        var(--cor-borda);

    border-radius: 12px;
}

.paciente-resumo span {
    color:
        var(--cor-texto-secundario);

    font-size: 13px;
}

.lista-opcoes {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.form-opcao {
    margin: 0;
}

.opcao-card {
    display: flex;
    align-items: center;

    width: 100%;

    padding: 18px;

    background: #ffffff;

    border:
        1px solid
        #dbe3ea;

    border-radius: 14px;

    color:
        var(--cor-texto);

    font: inherit;

    text-align: left;

    cursor: pointer;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}

.opcao-card:hover {
    border-color:
        var(--cor-primaria);

    box-shadow:
        0 4px 14px
        rgba(21, 101, 192, .10);

    transform:
        translateY(-1px);
}

.opcao-icone {
    display: flex;
    align-items: center;
    justify-content: center;

    flex:
        0
        0
        48px;

    width: 48px;
    height: 48px;

    margin-right: 14px;

    background: #eef5fc;

    border-radius: 12px;

    font-size: 23px;
}

.opcao-conteudo {
    display: flex;
    flex: 1;
    flex-direction: column;

    min-width: 0;
}

.opcao-titulo {
    margin-bottom: 4px;

    font-size: 17px;
}

.opcao-tipo {
    margin-bottom: 4px;

    color:
        var(--cor-primaria);

    font-size: 13px;
    font-weight: 600;
}

.opcao-descricao {
    color:
        var(--cor-texto-secundario);

    font-size: 14px;

    line-height: 1.4;
}

.opcao-seta {
    margin-left: 12px;

    color: #94a3b8;

    font-size: 30px;
    font-weight: 300;
}

.estado-vazio {
    padding: 24px;

    background: #f8fafc;

    border:
        1px dashed
        #cbd5e1;

    border-radius: 14px;

    text-align: center;
}

.estado-vazio p {
    margin-bottom: 0;

    color:
        var(--cor-texto-secundario);
}


/* =========================================================
   CONFIRMAÇÃO / SUCESSO
========================================================= */

.form-confirmacao {
    margin-top: 24px;
}

.confirmacao-aviso {
    margin:
        12px
        0
        0;

    color:
        var(--cor-texto-secundario);

    font-size: 13px;

    text-align: center;
}

.sucesso-card {
    text-align: left;
}

.sucesso-icone {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;

    margin:
        0
        auto
        20px;

    border-radius: 50%;

    background: #e8f7ed;

    color: #16803c;

    font-size: 34px;
    font-weight: 700;
}

.sucesso-cabecalho {
    margin-bottom: 28px;

    text-align: center;
}

.protocolo-card {
    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 7px;

    margin-bottom: 24px;

    padding: 20px;

    background: #eef5fc;

    border:
        1px solid
        #cfe1f5;

    border-radius: 14px;
}

.protocolo-card span {
    color:
        var(--cor-texto-secundario);

    font-size: 13px;
}

.protocolo-card strong {
    color:
        var(--cor-primaria);

    font-size: 20px;

    letter-spacing: .4px;
}

.sucesso-data-hora {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 12px;
}


/* =========================================================
   ADMIN - ESTRUTURA
========================================================= */

.admin-estrutura {
    display: flex;

    min-height: 100vh;
}

.admin-sidebar {
    display: flex;
    flex-direction: column;

    flex:
        0
        0
        235px;

    width: 235px;

    padding:
        28px
        18px;

    background: #0f172a;

    color: #ffffff;
}

.admin-logo {
    margin-bottom: 34px;

    color: #4a90ff;

    font-size: 22px;
    font-weight: 700;
}

.admin-logo span {
    color: #ffffff;
}

.admin-menu {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.admin-menu a {
    display: block;

    padding:
        12px
        14px;

    border-radius: 10px;

    color: #dbe5f5;

    font-weight: 600;

    text-decoration: none;
}

.admin-menu a:hover,
.admin-menu a.ativo {
    background: #2563eb;

    color: #ffffff;
}

.admin-conteudo {
    flex: 1;

    min-width: 0;

    background: #f4f6f9;
}

.admin-topo {
    display: flex;

    align-items: center;
    justify-content: space-between;

    min-height: 70px;

    padding:
        0
        28px;

    background: #ffffff;

    border-bottom:
        1px solid
        #e5e7eb;
}

.admin-topo > span {
    color:
        var(--cor-texto-secundario);

    font-size: 14px;
}

.admin-main {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    padding: 32px;
}


/* =========================================================
   ADMIN - CABEÇALHOS DE PÁGINA
========================================================= */

.admin-pagina-cabecalho,
.admin-pagina-topo {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;
}

.admin-pagina-cabecalho h1,
.admin-pagina-topo h1 {
    margin:
        0
        0
        5px;
}

.admin-pagina-cabecalho p,
.admin-pagina-topo p {
    margin: 0;

    color:
        var(--cor-texto-secundario);

    font-size: 14px;
}

.admin-pagina-topo .btn,
.usuario-form-footer .btn,
.usuario-senha-acao .btn,
.usuario-card-acoes .btn {
    width: auto;
}

.admin-btn-auto {
    width: auto;

    white-space: nowrap;
}


/* =========================================================
   ADMIN - CARD
========================================================= */

.admin-card {
    padding: 22px;

    background: #ffffff;

    border-radius: 16px;

    box-shadow:
        0 3px 14px
        rgba(0, 0, 0, .05);
}

.admin-vazio {
    display: flex;
    flex-direction: column;

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

    gap: 8px;

    min-height: 190px;

    padding: 28px;

    border:
        1px dashed
        #cbd5e1;

    border-radius: 12px;

    background: #f8fafc;

    text-align: center;
}

.admin-vazio strong {
    font-size: 15px;
}

.admin-vazio p {
    max-width: 520px;

    margin: 0;

    color:
        var(--cor-texto-secundario);

    font-size: 13px;
}

.admin-vazio .btn {
    width: auto;

    margin-top: 8px;
}


/* =========================================================
   ADMIN - CAMPOS / FORMULÁRIOS
========================================================= */

.admin-form {
    max-width: 720px;
}

.admin-campo {
    display: flex;
    flex-direction: column;

    gap: 7px;

    margin-bottom: 18px;
}

.admin-campo label {
    font-weight: 600;
}

.admin-campo input,
.admin-campo select,
.admin-campo textarea {
    width: 100%;

    min-height: 46px;

    padding:
        11px
        13px;

    border:
        1px solid
        #cfd8e3;

    border-radius: 10px;

    background: #ffffff;

    color:
        var(--cor-texto);

    font: inherit;
}

.admin-campo textarea {
    resize: vertical;
}

.admin-campo input:focus,
.admin-campo select:focus,
.admin-campo textarea:focus {
    outline: none;

    border-color:
        var(--cor-primaria);

    box-shadow:
        0 0 0 3px
        rgba(21, 101, 192, .10);
}

.admin-grid-2 {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 16px;
}

.admin-form-subtitulo {
    margin:
        28px
        0
        18px;

    padding-bottom: 9px;

    border-bottom:
        1px solid
        var(--cor-borda);
}


/* =========================================================
   ADMIN - FILTROS GENÉRICOS
========================================================= */

.admin-filtros {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: end;

    gap: 14px;
}

.admin-filtros .campo {
    margin: 0;
}

.admin-filtros label {
    display: block;

    margin-bottom: 7px;

    color: #344454;

    font-size: 12px;
    font-weight: 700;
}

.admin-filtros input,
.admin-filtros select {
    width: 100%;

    min-height: 44px;

    padding:
        9px
        12px;

    border:
        1px solid
        #d6dee7;

    border-radius: 8px;

    background: #ffffff;

    color:
        var(--cor-texto);

    font: inherit;
}

.admin-filtros input:focus,
.admin-filtros select:focus {
    outline: none;

    border-color:
        var(--cor-primaria);

    box-shadow:
        0 0 0 3px
        rgba(21, 101, 192, .08);
}

.admin-filtros-acoes {
    display: flex;

    gap: 8px;
}

.admin-filtros-acoes .btn {
    width: auto;

    min-width: 95px;
}


/* =========================================================
   BADGES
========================================================= */

.badge {
    display: inline-flex;

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

    padding:
        5px
        9px;

    border-radius: 20px;

    font-size: 12px;
    font-weight: 700;
}

.badge-ativo,
.badge-sucesso {
    background: #e8f7ed;

    color: #16803c;
}

.badge-inativo,
.badge-neutro {
    background: #f1f3f5;

    color: #6b7280;
}

.admin-item-inativo {
    opacity: .7;
}


/* =========================================================
   ADMIN - AGENDA
========================================================= */

.admin-agenda-lista {
    display: flex;
    flex-direction: column;

    gap: 14px;
}

.admin-vaga {
    display: grid;

    grid-template-columns:
        120px
        minmax(260px, 1fr)
        170px
        auto;

    align-items: center;

    gap: 20px;
}

.admin-vaga-hora {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.admin-vaga-hora strong {
    font-size: 24px;
}

.admin-vaga-hora span {
    margin-top: 4px;

    color:
        var(--cor-texto-secundario);

    font-size: 14px;
}

.admin-vaga-info {
    display: flex;
    flex-direction: column;

    gap: 4px;

    min-width: 0;
}

.admin-vaga-info span,
.admin-vaga-info small {
    color:
        var(--cor-texto-secundario);
}

.admin-vaga-contador {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    min-width: 150px;

    text-align: right;

    line-height: 1.25;
}

.admin-vaga-contador strong {
    display: block;

    font-size: 22px;
}

.admin-vaga-contador span,
.admin-vaga-contador small {
    display: block;

    color:
        var(--cor-texto-secundario);

    white-space: nowrap;
}

.admin-vaga-acoes {
    display: flex;

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

    gap: 8px;

    flex-shrink: 0;
}

.admin-vaga-acoes a {
    white-space: nowrap;
}


/* =========================================================
   ADMIN - OPERAÇÃO DA AGENDA
========================================================= */

.agenda-detalhe-resumo {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 14px;

    margin-bottom: 18px;
}

.agenda-detalhe-resumo > div {
    display: flex;
    flex-direction: column;

    gap: 5px;

    padding: 14px;

    background: #f7f9fc;

    border:
        1px solid
        var(--cor-borda);

    border-radius: 11px;
}

.agenda-detalhe-resumo span,
.agenda-detalhe-resumo small {
    color:
        var(--cor-texto-secundario);

    font-size: 12px;
}

.agenda-pacientes-lista {
    display: flex;
    flex-direction: column;

    gap: 14px;
}

.agenda-paciente-card {
    display: grid;

    grid-template-columns:
        55px
        minmax(0, 1fr)
        minmax(320px, auto);

    align-items: center;

    gap: 16px;
}

.agenda-paciente-avatar {
    display: flex;

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

    width: 50px;
    height: 50px;

    border-radius: 50%;

    background: #eef5fc;

    font-size: 23px;
}

.agenda-paciente-info {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.agenda-paciente-nome {
    display: flex;
    align-items: center;

    gap: 8px;
}

.agenda-paciente-info > span {
    color:
        var(--cor-texto-secundario);

    font-size: 13px;
}

.agenda-paciente-info > a {
    margin-top: 3px;

    color:
        var(--cor-primaria);

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;
}

.agenda-paciente-acoes {
    display: flex;
    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 8px;
}

.agenda-paciente-acoes form {
    margin: 0;
}

.btn-resultado {
    min-height: 39px;

    padding:
        8px
        12px;

    border:
        1px solid
        #d8dee7;

    border-radius: 9px;

    background: #ffffff;

    font: inherit;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}

.btn-atendido {
    color: #16803c;

    border-color: #b7dec2;
}

.btn-faltou {
    color: #a15c00;

    border-color: #ecd0a7;
}

.btn-cancelar {
    color: #b42318;

    border-color: #efc1bd;
}

.form-cancelamento {
    display: flex;

    gap: 6px;
}

.form-cancelamento input {
    min-width: 210px;

    padding:
        8px
        10px;

    border:
        1px solid
        #d8dee7;

    border-radius: 9px;

    font: inherit;

    font-size: 13px;
}

.agenda-cancelamento-info {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.agenda-cancelamento-info span {
    color:
        var(--cor-texto-secundario);

    font-size: 12px;
}

.agenda-status-final {
    display: flex;
    flex-direction: column;

    align-items: flex-end;

    gap: 10px;
}

.btn-reabrir {
    border-color: #bfd5ed;

    background: #f7fbff;

    color:
        var(--cor-primaria);
}

.btn-reabrir:hover {
    background: #eef6ff;
}


/* =========================================================
   ADMIN - FILTROS DA AGENDA
========================================================= */

.agenda-filtros {
    margin-bottom: 16px;
}

.agenda-filtros-form {
    display: grid;

    grid-template-columns:
        180px
        minmax(220px, 1fr)
        minmax(220px, 1fr)
        auto;

    align-items: end;

    gap: 14px;
}

.agenda-filtros-form .admin-campo {
    margin-bottom: 0;
}

.agenda-filtros-botoes {
    display: flex;

    gap: 8px;
}

.agenda-filtros-botoes .btn {
    width: auto;

    min-width: 100px;
}

.agenda-filtros-botoes
.btn-secundario-admin {
    min-width: 85px;
}

.agenda-navegacao {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 16px;

    margin:
        16px
        0;
}

.agenda-navegacao-btn {
    color:
        var(--cor-primaria);

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;
}

.agenda-navegacao-btn:last-child {
    text-align: right;
}

.agenda-navegacao-data {
    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 3px;
}

.agenda-navegacao-data strong {
    font-size: 18px;
}

.agenda-navegacao-data span {
    padding:
        3px
        8px;

    border-radius: 20px;

    background: #e8f7ed;

    color: #16803c;

    font-size: 11px;
    font-weight: 700;
}

.agenda-navegacao-data a {
    color:
        var(--cor-primaria);

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;
}

.agenda-vazio-btn {
    display: inline-flex;

    width: auto;

    margin-top: 12px;
}
/* =========================================================
   ADMIN - UNIDADES
========================================================= */

.admin-unidades-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(330px, 1fr)
        );

    gap: 18px;
}

.admin-unidade-card {
    display: flex;
    flex-direction: column;

    gap: 16px;
}

.admin-unidade-topo {
    display: flex;

    align-items: center;
    justify-content: space-between;
}

.admin-unidade-icone {
    display: flex;

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

    width: 50px;
    height: 50px;

    border-radius: 12px;

    background: #eef5fc;

    font-size: 24px;
}

.admin-unidade-conteudo h2 {
    margin:
        0
        0
        3px;

    font-size: 19px;
}

.admin-unidade-tipo {
    color:
        var(--cor-primaria);

    font-size: 13px;
    font-weight: 700;
}

.admin-unidade-endereco {
    margin:
        12px
        0;

    color:
        var(--cor-texto-secundario);

    font-size: 14px;
}

.admin-unidade-dados {
    display: flex;
    flex-direction: column;

    gap: 5px;

    color:
        var(--cor-texto-secundario);

    font-size: 13px;
}

.admin-unidade-acoes {
    display: flex;

    gap: 10px;

    margin-top: auto;
}

.admin-unidade-acoes form {
    flex: 1;
}


/* ---------------------------------------------------------
   Botões administrativos secundários
--------------------------------------------------------- */

.btn-secundario-admin,
.btn-status-admin {
    display: flex;

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

    width: 100%;

    min-height: 40px;

    padding:
        9px
        14px;

    border-radius: 9px;

    font: inherit;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;
}

.btn-secundario-admin {
    flex: 1;

    border:
        1px solid
        var(--cor-primaria);

    background: #ffffff;

    color:
        var(--cor-primaria);
}

.btn-secundario-admin:hover {
    background: #f4f8ff;
}

.btn-status-admin {
    border:
        1px solid
        #d8dee7;
}

.btn-inativar {
    background: #ffffff;

    color: #b42318;
}

.btn-ativar {
    background: #ffffff;

    color: #16803c;
}


/* ---------------------------------------------------------
   Endereço
--------------------------------------------------------- */

.admin-grid-endereco {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        130px;

    gap: 16px;
}

.admin-grid-cidade {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        100px;

    gap: 16px;
}


/* =========================================================
   ADMIN - ATENDIMENTOS DA UNIDADE
========================================================= */

.btn-atendimentos-admin {
    display: flex;

    flex: 1;

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

    min-height: 40px;

    padding:
        9px
        14px;

    border:
        1px solid
        #cbd9eb;

    border-radius: 9px;

    background: #eef5fc;

    color:
        var(--cor-primaria);

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;
}

.btn-atendimentos-admin:hover {
    background: #e2effc;
}

.unidade-atendimento-cabecalho {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 24px;

    padding-bottom: 20px;

    border-bottom:
        1px solid
        var(--cor-borda);
}

.unidade-atendimento-cabecalho > div:last-child {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.unidade-atendimento-cabecalho strong {
    font-size: 20px;
}

.unidade-atendimento-cabecalho span {
    color:
        var(--cor-texto-secundario);

    font-size: 14px;
}

.lista-atendimentos-admin {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(300px, 1fr)
        );

    gap: 14px;
}

.atendimento-checkbox-card {
    display: flex;

    gap: 14px;

    padding: 18px;

    border:
        1px solid
        #dbe3ea;

    border-radius: 14px;

    background: #ffffff;

    cursor: pointer;

    transition:
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease;
}

.atendimento-checkbox-card:hover {
    border-color:
        var(--cor-primaria);

    background: #f8fbff;

    box-shadow:
        0 3px 12px
        rgba(21, 101, 192, .08);
}

.atendimento-checkbox {
    position: relative;

    flex:
        0
        0
        24px;

    width: 24px;
    height: 24px;
}

.atendimento-checkbox input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
}

.checkbox-visual {
    display: flex;

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

    width: 24px;
    height: 24px;

    border:
        2px solid
        #cbd5e1;

    border-radius: 7px;

    background: #ffffff;

    color: transparent;

    font-size: 15px;
    font-weight: 700;
}

.atendimento-checkbox
input:checked
+ .checkbox-visual {
    border-color:
        var(--cor-primaria);

    background:
        var(--cor-primaria);

    color: #ffffff;
}

.atendimento-checkbox-conteudo {
    display: flex;

    flex: 1;
    flex-direction: column;

    gap: 5px;
}

.atendimento-checkbox-conteudo strong {
    font-size: 16px;
}

.atendimento-checkbox-conteudo span {
    color:
        var(--cor-texto-secundario);

    font-size: 14px;

    line-height: 1.4;
}

.atendimento-checkbox-conteudo small {
    color:
        var(--cor-primaria);

    font-size: 12px;
    font-weight: 600;
}

.acoes-atendimentos-admin {
    display: flex;

    gap: 12px;

    margin-top: 26px;
}

.acoes-atendimentos-admin
.btn-secundario-admin {
    max-width: 170px;
}

.btn-salvar-atendimentos {
    width: auto;

    min-width: 210px;
}


/* =========================================================
   ADMIN - TIPOS DE ATENDIMENTO
========================================================= */

.admin-tipos-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(330px, 1fr)
        );

    gap: 18px;
}

.admin-tipo-card {
    display: flex;
    flex-direction: column;

    gap: 16px;
}

.admin-tipo-topo {
    display: flex;

    align-items: center;
    justify-content: space-between;
}

.admin-tipo-icone {
    display: flex;

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

    width: 50px;
    height: 50px;

    border-radius: 12px;

    background: #eef5fc;

    font-size: 24px;
}

.admin-tipo-conteudo {
    flex: 1;
}

.admin-tipo-conteudo h2 {
    margin:
        0
        0
        10px;

    font-size: 19px;
}

.admin-tipo-conteudo p {
    margin:
        0
        0
        14px;

    color:
        var(--cor-texto-secundario);

    font-size: 14px;

    line-height: 1.45;
}

.admin-tipo-dados {
    display: flex;
    flex-direction: column;

    gap: 5px;

    color:
        var(--cor-texto-secundario);

    font-size: 13px;
}

.campo-com-sufixo {
    display: flex;

    align-items: stretch;

    width: 100%;
}

.campo-com-sufixo input {
    border-radius:
        10px
        0
        0
        10px;
}

.campo-com-sufixo span {
    display: flex;

    align-items: center;

    padding:
        0
        14px;

    border:
        1px solid
        #cfd8e3;

    border-left: 0;

    border-radius:
        0
        10px
        10px
        0;

    background: #f6f8fb;

    color:
        var(--cor-texto-secundario);

    font-size: 14px;
}

.campo-ajuda {
    color:
        var(--cor-texto-secundario);

    line-height: 1.4;
}


/* =========================================================
   ADMIN - PACIENTES
========================================================= */

.admin-paciente-pesquisa {
    margin-bottom: 18px;
}

.form-pesquisa-paciente {
    display: flex;

    gap: 10px;
}

.form-pesquisa-paciente input {
    flex: 1;

    min-height: 46px;

    padding:
        11px
        14px;

    border:
        1px solid
        #cfd8e3;

    border-radius: 10px;

    font: inherit;
}

.btn-limpar-pesquisa {
    display: flex;

    align-items: center;

    padding:
        0
        14px;

    color:
        var(--cor-texto-secundario);

    text-decoration: none;
}

.admin-pacientes-lista {
    display: flex;
    flex-direction: column;

    gap: 14px;
}

.admin-paciente-card {
    display: grid;

    grid-template-columns:
        54px
        minmax(0, 1fr)
        120px
        240px;

    align-items: center;

    gap: 16px;
}

.admin-paciente-avatar {
    display: flex;

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

    width: 50px;
    height: 50px;

    border-radius: 50%;

    background: #eef5fc;

    font-size: 23px;
}

.admin-paciente-avatar.grande {
    width: 64px;
    height: 64px;

    font-size: 30px;
}

.admin-paciente-info {
    min-width: 0;
}

.admin-paciente-nome {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 8px;
}

.admin-paciente-nome > strong {
    font-size: 17px;
}

.admin-paciente-documentos {
    display: flex;
    flex-wrap: wrap;

    gap:
        7px
        18px;

    color:
        var(--cor-texto-secundario);

    font-size: 13px;
}

.admin-paciente-contador {
    display: flex;
    flex-direction: column;

    text-align: center;
}

.admin-paciente-contador > strong {
    font-size: 23px;
}

.admin-paciente-contador span,
.admin-paciente-contador small {
    color:
        var(--cor-texto-secundario);

    font-size: 12px;
}

.admin-paciente-contador small {
    margin-top: 3px;

    color:
        var(--cor-primaria);

    font-weight: 600;
}

.admin-paciente-acoes {
    display: flex;

    gap: 8px;
}


/* ---------------------------------------------------------
   Detalhes do paciente
--------------------------------------------------------- */

.paciente-detalhe-topo {
    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 28px;
}

.paciente-detalhe-topo h2 {
    margin:
        0
        0
        6px;
}

.paciente-detalhe-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 14px;
}

.paciente-detalhe-grid > div {
    display: flex;
    flex-direction: column;

    gap: 5px;

    padding: 15px;

    background: #f7f9fc;

    border:
        1px solid
        var(--cor-borda);

    border-radius: 11px;
}

.paciente-detalhe-grid span {
    color:
        var(--cor-texto-secundario);

    font-size: 12px;
}

.paciente-detalhe-grid strong {
    word-break: break-word;
}

.paciente-detalhe-acoes {
    margin-top: 26px;
}


/* ---------------------------------------------------------
   Histórico
--------------------------------------------------------- */

.historico-paciente-lista {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.historico-item {
    display: grid;

    grid-template-columns:
        130px
        minmax(0, 1fr)
        150px;

    align-items: center;

    gap: 18px;
}

.historico-data {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.historico-data strong {
    font-size: 17px;
}

.historico-data span {
    color:
        var(--cor-texto-secundario);
}

.historico-conteudo {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.historico-conteudo span,
.historico-conteudo small {
    color:
        var(--cor-texto-secundario);
}

.historico-status {
    text-align: right;
}


/* ---------------------------------------------------------
   Status
--------------------------------------------------------- */

.badge-status {
    display: inline-flex;

    padding:
        6px
        10px;

    border-radius: 20px;

    font-size: 11px;
    font-weight: 700;
}

.status-agendado {
    background: #eef5fc;

    color: #1565c0;
}

.status-confirmado {
    background: #eef2ff;

    color: #4338ca;
}

.status-atendido {
    background: #e8f7ed;

    color: #16803c;
}

.status-cancelado,
.status-faltou {
    background: #fff0f0;

    color: #b42318;
}

.status-padrao {
    background: #f1f3f5;

    color: #6b7280;
}


/* =========================================================
   ADMIN - DASHBOARD
========================================================= */

.dashboard-data {
    padding:
        8px
        13px;

    border:
        1px solid
        var(--cor-borda);

    border-radius: 9px;

    background: #ffffff;

    color:
        var(--cor-texto-secundario);

    font-size: 14px;
    font-weight: 600;
}

.dashboard-cards {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px, 1fr)
        );

    gap: 14px;

    margin-bottom: 22px;
}

.dashboard-card {
    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 112px;

    padding: 20px;

    background: #ffffff;

    border-radius: 15px;

    box-shadow:
        0 3px 14px
        rgba(0, 0, 0, .05);
}

.dashboard-card-icone {
    display: flex;

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

    flex:
        0
        0
        48px;

    width: 48px;
    height: 48px;

    border-radius: 12px;

    background: #eef5fc;

    font-size: 23px;
}

.dashboard-card > div {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.dashboard-card span {
    color:
        var(--cor-texto-secundario);

    font-size: 13px;
}

.dashboard-card strong {
    font-size: 28px;
}


/* ---------------------------------------------------------
   Seções
--------------------------------------------------------- */

.dashboard-secao {
    margin-bottom: 20px;
}

.dashboard-secao-titulo {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 14px;

    margin-bottom: 18px;
}

.dashboard-secao-titulo h2 {
    margin: 0;

    font-size: 19px;
}

.dashboard-secao-titulo p {
    margin:
        4px
        0
        0;

    color:
        var(--cor-texto-secundario);

    font-size: 13px;
}

.dashboard-secao-titulo > a {
    color:
        var(--cor-primaria);

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;
}


/* ---------------------------------------------------------
   Status
--------------------------------------------------------- */

.dashboard-status-grid {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 12px;
}

.dashboard-status-item {
    display: flex;
    flex-direction: column;

    gap: 7px;

    padding: 16px;

    border:
        1px solid
        var(--cor-borda);

    border-radius: 11px;

    background: #f8fafc;
}

.dashboard-status-item span {
    color:
        var(--cor-texto-secundario);

    font-size: 12px;
}

.dashboard-status-item strong {
    font-size: 22px;
}


/* ---------------------------------------------------------
   Colunas
--------------------------------------------------------- */

.dashboard-colunas {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 20px;
}


/* ---------------------------------------------------------
   Próximos pacientes
--------------------------------------------------------- */

.dashboard-pacientes {
    display: flex;
    flex-direction: column;
}

.dashboard-paciente {
    display: grid;

    grid-template-columns:
        65px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 12px;

    padding:
        13px
        0;

    border-bottom:
        1px solid
        var(--cor-borda);
}

.dashboard-paciente:last-child {
    border-bottom: 0;
}

.dashboard-hora {
    font-size: 18px;
    font-weight: 700;
}

.dashboard-paciente-info {
    display: flex;
    flex-direction: column;

    gap: 3px;

    min-width: 0;
}

.dashboard-paciente-info strong {
    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.dashboard-paciente-info span,
.dashboard-paciente-info small {
    color:
        var(--cor-texto-secundario);

    font-size: 13px;
}

.dashboard-link {
    color:
        var(--cor-primaria);

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;
}


/* ---------------------------------------------------------
   Próximos horários
--------------------------------------------------------- */

.dashboard-horarios {
    display: flex;
    flex-direction: column;
}

.dashboard-horario {
    display: grid;

    grid-template-columns:
        70px
        minmax(0, 1fr)
        55px;

    align-items: center;

    gap: 12px;

    padding:
        13px
        0;

    border-bottom:
        1px solid
        var(--cor-borda);
}

.dashboard-horario:last-child {
    border-bottom: 0;
}

.dashboard-horario-data {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.dashboard-horario-data strong {
    font-size: 14px;
}

.dashboard-horario-data span {
    font-size: 17px;
    font-weight: 700;
}

.dashboard-horario-info {
    display: flex;
    flex-direction: column;

    gap: 3px;

    min-width: 0;
}

.dashboard-horario-info strong {
    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.dashboard-horario-info span {
    color:
        var(--cor-texto-secundario);

    font-size: 13px;
}

.dashboard-vagas {
    display: flex;
    flex-direction: column;

    text-align: center;
}

.dashboard-vagas strong {
    color:
        var(--cor-primaria);

    font-size: 20px;
}

.dashboard-vagas span {
    color:
        var(--cor-texto-secundario);

    font-size: 11px;
}

.dashboard-vazio {
    display: flex;
    flex-direction: column;

    gap: 5px;

    padding: 25px;

    border:
        1px dashed
        #cbd5e1;

    border-radius: 12px;

    background: #f8fafc;

    text-align: center;
}

.dashboard-vazio span {
    color:
        var(--cor-texto-secundario);

    font-size: 13px;
}


/* =========================================================
   LOGIN ADMINISTRATIVO
========================================================= */

.login-container {
    display: flex;

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

    min-height:
        calc(
            100vh
            -
            70px
        );

    padding:
        30px
        18px;
}

.login-card {
    width: 100%;
    max-width: 440px;

    padding: 34px;

    background: #ffffff;

    border-radius: 18px;

    box-shadow:
        0 8px 30px
        rgba(0, 0, 0, .07);
}

.login-cabecalho {
    margin-bottom: 26px;

    text-align: center;
}

.login-logo {
    margin-bottom: 24px;

    color:
        var(--cor-primaria);

    font-size: 26px;
    font-weight: 700;
}

.login-logo span {
    color:
        var(--cor-texto);
}

.login-cabecalho h1 {
    margin:
        0
        0
        7px;

    font-size: 25px;
}

.login-cabecalho p {
    margin: 0;

    color:
        var(--cor-texto-secundario);
}

.login-form {
    display: flex;
    flex-direction: column;

    gap: 17px;
}

.login-form .campo {
    margin: 0;
}

.login-form label {
    display: block;

    margin-bottom: 7px;

    font-size: 14px;
    font-weight: 700;
}

.login-form input {
    width: 100%;

    min-height: 48px;

    padding:
        11px
        14px;

    border:
        1px solid
        #cfd8e3;

    border-radius: 10px;

    background: #ffffff;

    color:
        var(--cor-texto);

    font: inherit;
}

.login-form input:focus {
    outline: none;

    border-color:
        var(--cor-primaria);

    box-shadow:
        0 0 0 3px
        rgba(21, 101, 192, .10);
}

.login-form .btn {
    margin-top: 5px;
}

.login-exemplo {
    display: flex;

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

    gap: 5px;

    margin-top: 18px;

    color:
        var(--cor-texto-secundario);

    font-size: 12px;
}

.login-exemplo strong {
    color:
        var(--cor-texto);
}

.login-rodape {
    margin-top: 22px;

    text-align: center;
}

.login-rodape a {
    color:
        var(--cor-primaria);

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;
}


/* =========================================================
   LOGIN - MOSTRAR / OCULTAR SENHA
========================================================= */

.login-senha-wrapper {
    position: relative;

    width: 100%;
}

.login-senha-wrapper input {
    width: 100%;

    padding-right: 50px;
}

.login-toggle-senha {
    position: absolute;

    top: 50%;
    right: 7px;

    transform:
        translateY(-50%);

    display: flex;

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

    width: 36px;
    height: 34px;

    padding: 0;

    border: 0;
    border-radius: 7px;

    background: transparent;

    font-size: 17px;
    line-height: 1;

    cursor: pointer;

    transition:
        background .15s ease;
}

.login-toggle-senha:hover {
    background: #f1f5f9;
}

.login-toggle-senha:focus {
    outline: none;

    background: #eef5ff;
}


/* =========================================================
   ADMIN - USUÁRIO AUTENTICADO
========================================================= */

.admin-sidebar-usuario {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: auto;

    padding-top: 18px;

    border-top:
        1px solid
        rgba(255, 255, 255, .10);
}

.admin-sidebar-avatar {
    display: flex;

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

    flex:
        0
        0
        38px;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .10);

    color: #ffffff;

    font-size: 15px;
    font-weight: 700;
}

.admin-sidebar-usuario-info {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.admin-sidebar-usuario-info strong {
    overflow: hidden;

    color: #ffffff;

    font-size: 12px;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.admin-sidebar-usuario-info span {
    margin-top: 2px;

    color:
        rgba(255, 255, 255, .65);

    font-size: 11px;
}

.admin-sidebar-usuario-info small {
    overflow: hidden;

    margin-top: 2px;

    color:
        rgba(255, 255, 255, .50);

    font-size: 10px;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.admin-topo-usuario {
    display: flex;

    align-items: center;

    gap: 14px;
}

.admin-topo-identificacao {
    display: flex;
    flex-direction: column;

    align-items: flex-end;

    gap: 2px;
}

.admin-topo-identificacao strong {
    color:
        var(--cor-texto);

    font-size: 13px;
}

.admin-topo-identificacao span {
    color:
        var(--cor-texto-secundario);

    font-size: 11px;
}

.admin-form-logout {
    margin: 0;
}

.admin-btn-logout {
    min-height: 36px;

    padding:
        7px
        13px;

    border:
        1px solid
        #d8dee7;

    border-radius: 8px;

    background: #ffffff;

    color: #b42318;

    font: inherit;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease;
}

.admin-btn-logout:hover {
    border-color: #efc1bd;

    background: #fff5f5;
}


/* =========================================================
   ADMIN - USUÁRIOS
========================================================= */

.usuario-form-container {
    width: 100%;
    max-width: 980px;

    margin:
        0
        auto
        22px;

    background: #ffffff;

    border:
        1px solid
        #e5eaf0;

    border-radius: 14px;

    box-shadow:
        0 3px 14px
        rgba(31, 50, 70, .04);

    overflow: hidden;
}


/* ---------------------------------------------------------
   Seções do formulário
--------------------------------------------------------- */

.usuario-form-secao {
    padding:
        26px
        30px;

    border-bottom:
        1px solid
        #edf1f5;
}

.usuario-form-secao:last-of-type {
    border-bottom: none;
}

.usuario-form-secao-topo {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    margin-bottom: 22px;
}

.usuario-form-secao-icone {
    display: flex;

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

    flex:
        0
        0
        38px;

    width: 38px;
    height: 38px;

    border-radius: 9px;

    background: #eef5ff;

    font-size: 17px;
}

.usuario-form-secao-topo h2 {
    margin:
        1px
        0
        4px;

    color: #263238;

    font-size: 17px;
    font-weight: 700;
}

.usuario-form-secao-topo p {
    margin: 0;

    color: #758391;

    font-size: 12px;

    line-height: 1.5;
}


/* ---------------------------------------------------------
   Grid
--------------------------------------------------------- */

.usuario-form-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        20px
        22px;
}

.usuario-form-grid .campo {
    margin: 0;
}

.usuario-form-grid
.campo-span-2 {
    grid-column:
        1 / -1;
}


/* ---------------------------------------------------------
   Campos
--------------------------------------------------------- */

.usuario-form-grid label,
.usuario-senha-form label {
    display: block;

    margin-bottom: 7px;

    color: #344454;

    font-size: 12px;
    font-weight: 700;
}

.usuario-form-grid input,
.usuario-form-grid select,
.usuario-senha-form input {
    width: 100%;

    min-height: 44px;

    padding:
        9px
        12px;

    border:
        1px solid
        #d6dee7;

    border-radius: 8px;

    background: #ffffff;

    color: #263238;

    font: inherit;

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

.usuario-form-grid input:hover,
.usuario-form-grid select:hover,
.usuario-senha-form input:hover {
    border-color: #b7c4d0;
}

.usuario-form-grid input:focus,
.usuario-form-grid select:focus,
.usuario-senha-form input:focus {
    outline: none;

    border-color: #1565c0;

    box-shadow:
        0 0 0 3px
        rgba(21, 101, 192, .08);
}

.usuario-form-grid small {
    display: block;

    margin-top: 5px;

    color: #84919e;

    font-size: 10.5px;

    line-height: 1.4;
}

.campo-opcional {
    margin-left: 5px;

    color: #929eaa;

    font-size: 9px;
    font-weight: 500;
}

.campo-obrigatorio {
    color: #d32f2f;
}


/* ---------------------------------------------------------
   Status / switch
--------------------------------------------------------- */

.usuario-status-box {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        15px
        17px;

    border:
        1px solid
        #e5eaf0;

    border-radius: 9px;

    background: #fafbfd;
}

.usuario-status-box strong {
    display: block;

    margin-bottom: 3px;

    font-size: 12px;
}

.usuario-status-box p {
    margin: 0;

    color: #7c8995;

    font-size: 10.5px;
}

.usuario-switch {
    position: relative;

    flex:
        0
        0
        auto;

    width: 42px;
    height: 23px;

    cursor: pointer;
}

.usuario-switch input {
    display: none;
}

.usuario-switch span {
    position: absolute;

    inset: 0;

    border-radius: 30px;

    background: #c6ced6;

    transition:
        background .2s ease;
}

.usuario-switch span::after {
    content: '';

    position: absolute;

    top: 3px;
    left: 3px;

    width: 17px;
    height: 17px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 1px 3px
        rgba(0, 0, 0, .20);

    transition:
        transform .2s ease;
}

.usuario-switch
input:checked + span {
    background: #1565c0;
}

.usuario-switch
input:checked + span::after {
    transform:
        translateX(19px);
}

.usuario-switch-bloqueado {
    opacity: .6;

    cursor: default;
}


/* ---------------------------------------------------------
   Rodapé
--------------------------------------------------------- */

.usuario-form-footer {
    display: flex;

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

    gap: 10px;

    padding:
        18px
        30px;

    background: #fafbfd;

    border-top:
        1px solid
        #edf1f5;
}

.usuario-btn-salvar {
    min-width: 140px;
}


/* ---------------------------------------------------------
   Redefinir senha
--------------------------------------------------------- */

.usuario-redefinir-senha {
    padding:
        26px
        30px;
}

.usuario-senha-form {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        auto;

    align-items: end;

    gap: 18px;
}

.usuario-senha-form .campo {
    margin: 0;
}

.usuario-senha-acao {
    display: flex;
}


/* ---------------------------------------------------------
   Mostrar / ocultar senha
--------------------------------------------------------- */

.usuario-senha-wrapper {
    position: relative;
}

.usuario-senha-wrapper input {
    padding-right: 46px;
}

.usuario-toggle-senha {
    position: absolute;

    top: 50%;
    right: 8px;

    transform:
        translateY(-50%);

    display: flex;

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

    width: 34px;
    height: 34px;

    padding: 0;

    border: 0;
    border-radius: 7px;

    background: transparent;

    font-size: 17px;

    cursor: pointer;
}

.usuario-toggle-senha:hover {
    background: #f1f5f9;
}


/* ---------------------------------------------------------
   Lista de usuários
--------------------------------------------------------- */

.usuarios-lista {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.usuario-card {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        auto;

    align-items: center;

    gap: 18px;

    padding:
        16px
        18px;

    border:
        1px solid
        #e4e9ef;

    border-radius: 10px;

    background: #ffffff;

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

.usuario-card:hover {
    border-color: #cdd8e3;

    box-shadow:
        0 3px 12px
        rgba(31, 50, 70, .05);
}

.usuario-card-principal {
    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 0;
}

.usuario-avatar {
    display: flex;

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

    flex:
        0
        0
        42px;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: #eaf2ff;

    color: #1565c0;

    font-size: 15px;
    font-weight: 700;
}

.usuario-dados {
    display: flex;
    flex-direction: column;

    gap: 3px;

    min-width: 0;
}

.usuario-nome-linha {
    display: flex;

    align-items: center;

    gap: 7px;

    min-width: 0;
}

.usuario-nome-linha strong {
    overflow: hidden;

    font-size: 13px;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.usuario-voce {
    padding:
        2px
        6px;

    border-radius: 20px;

    background: #eef4ff;

    color: #1565c0;

    font-size: 9px;
    font-weight: 700;
}

.usuario-meta {
    display: flex;
    flex-wrap: wrap;

    gap:
        5px
        11px;

    color: #657483;

    font-size: 10.5px;
}

.usuario-dados small {
    color: #8995a1;

    font-size: 9.5px;
}

.usuario-card-status {
    white-space: nowrap;
}

.usuario-card-acoes {
    display: flex;

    align-items: center;

    gap: 7px;
}

.usuario-card-acoes form {
    margin: 0;
}


/* =========================================================
   AGENDA - EDIÇÃO / DISPONIBILIDADE
========================================================= */

.agenda-vaga-badges {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 8px;
}

.agenda-badge {
    display: inline-flex;

    align-items: center;

    padding:
        4px
        8px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;
}

.agenda-badge-publica {
    background: #e8f5e9;

    color: #2e7d32;
}

.agenda-badge-reservada {
    background: #fff3e0;

    color: #9a5a00;
}

.agenda-badge-inativa {
    background: #eeeeee;

    color: #616161;
}

.agenda-editar-resumo {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 12px;

    margin-bottom: 24px;
}

.agenda-editar-resumo > div {
    padding: 14px;

    border:
        1px solid
        #e1e6ec;

    border-radius: 10px;

    background: #f8fafc;
}

.agenda-editar-resumo span {
    display: block;

    margin-bottom: 4px;

    color: #667085;

    font-size: 12px;
}

.agenda-editar-resumo strong {
    font-size: 14px;
}

.agenda-editar-aviso {
    margin-bottom: 22px;
}

.agenda-editar-aviso p {
    margin:
        5px
        0
        0;
}

.agenda-editar-acoes {
    display: flex;

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

    gap: 10px;

    margin-top: 20px;
}


/* ---------------------------------------------------------
   Checkbox status
--------------------------------------------------------- */

.agenda-status-checkbox {
    display: inline-flex;

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

    width: auto;

    gap: 10px;

    cursor: pointer;

    font-weight: 600;
}

.agenda-status-checkbox
input[type="checkbox"] {
    width: 18px;
    height: 18px;

    min-width: 18px;

    margin: 0;
    padding: 0;

    flex:
        0
        0
        18px;

    cursor: pointer;

    accent-color: #1565c0;
}

.agenda-status-checkbox
input[type="checkbox"]:disabled {
    cursor: not-allowed;

    opacity: .65;
}


/* =========================================================
   AGENDA - AGENDAMENTO INTERNO / ENCAIXE
========================================================= */

.agenda-detalhe-acoes {
    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin:
        0
        0
        18px;
}

.agenda-paciente-busca {
    display: flex;

    align-items: flex-end;

    gap: 12px;

    margin-bottom: 22px;
}

.agenda-paciente-busca
.admin-campo {
    flex: 1;

    margin-bottom: 0;
}

.agenda-selecao-pacientes {
    display: grid;

    gap: 8px;

    max-height: 420px;

    overflow-y: auto;
}

.agenda-selecao-paciente {
    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        12px
        14px;

    border:
        1px solid
        #e0e5ec;

    border-radius: 10px;

    cursor: pointer;
}

.agenda-selecao-paciente:hover {
    background: #f8fafc;
}

.agenda-selecao-paciente
input[type="radio"] {
    width: 18px;
    height: 18px;

    margin: 0;

    flex:
        0
        0
        18px;
}

.agenda-selecao-paciente span {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.agenda-selecao-paciente small {
    color: #667085;
}

.agenda-badge-encaixe {
    background: #fff3e0;

    color: #b45309;
}


/* =========================================================
   GRADE SEMANAL
========================================================= */

.admin-pagina-acoes {
    display: flex;

    align-items: center;

    gap: 10px;
}

.grade-resumo {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 12px;

    margin-bottom: 16px;
}

.grade-resumo > div {
    padding: 12px;

    border:
        1px solid
        #e2e8f0;

    border-radius: 10px;

    background: #f8fafc;
}

.grade-resumo span {
    display: block;

    margin-bottom: 4px;

    color: #667085;

    font-size: 12px;
}

.grade-resumo strong {
    font-size: 14px;
}


/* ---------------------------------------------------------
   Cabeçalho
--------------------------------------------------------- */

.grade-cabecalho {
    margin-bottom: 18px;
}

.grade-cabecalho h2 {
    margin:
        0
        0
        4px;

    font-size: 18px;
}

.grade-cabecalho p {
    margin: 0;

    color: #667085;

    font-size: 13px;
}


/* ---------------------------------------------------------
   Toggle do dia
--------------------------------------------------------- */

.grade-dia-toggle {
    display: flex;

    align-items: center;

    gap: 10px;

    cursor: pointer;
}

.grade-dia-toggle
input[type="checkbox"] {
    width: 18px;
    height: 18px;

    min-width: 18px;

    margin: 0;

    accent-color: #1565c0;
}

.grade-dia-toggle span {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.grade-dia-toggle strong {
    font-size: 14px;
}

.grade-dia-toggle small {
    color: #667085;

    font-size: 11px;
}


/* ---------------------------------------------------------
   Ações
--------------------------------------------------------- */

.grade-acoes {
    display: flex;

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

    gap: 10px;

    margin-top: 22px;
}


/* =========================================================
   GRADE - MÚLTIPLOS PERÍODOS
========================================================= */

.grade-dias-multiplos {
    display: grid;

    gap: 14px;
}

.grade-dia-multiplo {
    padding: 16px;

    border:
        1px solid
        #e2e8f0;

    border-radius: 12px;

    background: #ffffff;

    transition:
        opacity .15s ease,
        background .15s ease;
}

.grade-dia-multiplo.grade-dia-inativo {
    background: #f8fafc;

    opacity: .58;
}


/* ---------------------------------------------------------
   Topo do dia
--------------------------------------------------------- */

.grade-dia-topo {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 14px;
}


/* ---------------------------------------------------------
   Períodos
--------------------------------------------------------- */

.grade-periodos {
    display: grid;

    gap: 10px;
}

.grade-periodo {
    display: grid;

    grid-template-columns:
        130px
        130px
        100px
        minmax(140px, 1fr)
        auto;

    align-items: end;

    gap: 10px;

    padding: 12px;

    border:
        1px solid
        #e5eaf0;

    border-radius: 10px;

    background: #f8fafc;
}

.grade-periodo
.admin-campo {
    margin-bottom: 0;
}

.grade-periodo-remover {
    display: flex;

    align-items: flex-end;
}


/* =========================================================
   RESPONSIVO ADMINISTRATIVO
========================================================= */

@media (max-width: 1050px) {

    .dashboard-status-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .dashboard-colunas {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 1000px) {

    .agenda-detalhe-resumo {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .agenda-paciente-card {
        grid-template-columns:
            55px
            minmax(0, 1fr);
    }

    .agenda-paciente-acoes,
    .agenda-cancelamento-info {
        grid-column:
            1 / -1;

        justify-content: flex-start;
    }

    .agenda-filtros-form {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .agenda-filtros-botoes {
        grid-column:
            1 / -1;
    }

    .admin-vaga {
        grid-template-columns:
            100px
            minmax(200px, 1fr)
            140px;

        gap: 14px;
    }

    .admin-vaga-acoes {
        grid-column:
            1 / -1;

        justify-content: flex-end;

        padding-top: 8px;
    }

    .grade-periodo {
        grid-template-columns:
            1fr
            1fr
            1fr;
    }

    .grade-periodo-remover {
        align-items: center;
    }

}


@media (max-width: 900px) {

    .admin-paciente-card {
        grid-template-columns:
            54px
            minmax(0, 1fr);
    }

    .admin-paciente-contador {
        text-align: left;
    }

    .admin-paciente-acoes {
        grid-column:
            1 / -1;
    }

    .paciente-detalhe-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .usuario-form-container {
        max-width: 100%;
    }

    .usuario-card {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }

    .usuario-card-acoes {
        grid-column:
            1 / -1;

        justify-content: flex-end;
    }

    .usuario-senha-form {
        grid-template-columns:
            1fr
            1fr;
    }

    .usuario-senha-acao {
        grid-column:
            1 / -1;

        justify-content: flex-end;
    }

}


@media (max-width: 800px) {

    .admin-sidebar {
        display: none;
    }

    .admin-main {
        padding:
            20px
            14px;
    }

    .admin-pagina-cabecalho,
    .admin-pagina-topo {
        align-items: stretch;

        flex-direction: column;
    }

    .admin-btn-auto {
        width: 100%;
    }

    .admin-grid-2 {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 768px) {

    .agenda-editar-resumo {
        grid-template-columns:
            1fr
            1fr;
    }

    .agenda-detalhe-acoes {
        flex-direction: column;
    }

    .agenda-paciente-busca {
        flex-direction: column;

        align-items: stretch;
    }

}


@media (max-width: 700px) {

    .admin-topo-identificacao {
        display: none;
    }

    .admin-sidebar-usuario {
        display: none;
    }

    .lista-atendimentos-admin {
        grid-template-columns: 1fr;
    }

    .acoes-atendimentos-admin {
        flex-direction: column;
    }

    .acoes-atendimentos-admin
    .btn-secundario-admin,
    .btn-salvar-atendimentos {
        width: 100%;
        max-width: none;
    }

    .admin-unidade-acoes {
        flex-direction: column;
    }

    .admin-vaga {
        grid-template-columns: 1fr;
    }

    .admin-vaga-contador {
        align-items: flex-start;

        text-align: left;
    }

    .admin-vaga-acoes {
        grid-column: auto;

        justify-content: flex-start;

        flex-wrap: wrap;
    }

    .grade-resumo {
        grid-template-columns:
            1fr
            1fr;
    }

    .admin-pagina-acoes {
        flex-wrap: wrap;
    }

    .grade-acoes {
        flex-direction: column-reverse;

        align-items: stretch;
    }

    .grade-dia-topo {
        align-items: flex-start;

        flex-direction: column;
    }

    .grade-periodo {
        grid-template-columns:
            1fr
            1fr;
    }

    .grade-periodo-remover {
        grid-column:
            1 / -1;
    }

}


@media (max-width: 650px) {

    .admin-pagina-topo .btn {
        width: 100%;
    }

    .admin-filtros {
        grid-template-columns: 1fr;
    }

    .admin-filtros-acoes {
        flex-direction: column;
    }

    .admin-filtros-acoes .btn {
        width: 100%;
    }

    .admin-unidades-grid,
    .admin-tipos-grid {
        grid-template-columns: 1fr;
    }

    .admin-grid-endereco,
    .admin-grid-cidade {
        grid-template-columns: 1fr;
    }

    .agenda-filtros-form {
        grid-template-columns: 1fr;
    }

    .agenda-filtros-botoes {
        grid-column: auto;

        flex-direction: column;
    }

    .agenda-filtros-botoes .btn,
    .agenda-filtros-botoes
    .btn-secundario-admin {
        width: 100%;
    }

    .agenda-navegacao {
        grid-template-columns:
            1fr
            1fr;
    }

    .agenda-navegacao-data {
        grid-column:
            1 / -1;

        grid-row: 1;

        margin-bottom: 5px;
    }

    .dashboard-cards {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .dashboard-status-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .dashboard-card {
        align-items: flex-start;

        flex-direction: column;
    }

    .dashboard-paciente {
        grid-template-columns:
            55px
            minmax(0, 1fr);
    }

    .dashboard-paciente > div:last-child {
        grid-column: 2;
    }

    .usuario-form-secao {
        padding:
            22px
            18px;
    }

    .usuario-form-grid {
        grid-template-columns: 1fr;
    }

    .usuario-form-grid
    .campo-span-2 {
        grid-column: auto;
    }

    .usuario-form-footer {
        padding:
            16px
            18px;

        flex-direction: column-reverse;
    }

    .usuario-form-footer .btn {
        width: 100%;
    }

    .usuario-card {
        grid-template-columns: 1fr;
    }

    .usuario-card-status {
        justify-self: start;
    }

    .usuario-card-acoes {
        grid-column: auto;

        justify-content: flex-start;

        flex-wrap: wrap;
    }

    .usuario-senha-form {
        grid-template-columns: 1fr;
    }

    .usuario-senha-acao {
        grid-column: auto;

        justify-content: flex-start;
    }

    .usuario-redefinir-senha {
        padding:
            22px
            18px;
    }

}


@media (max-width: 600px) {

    .container {
        padding:
            24px
            16px
            calc(
                24px
                +
                env(safe-area-inset-bottom)
            );
    }

    .card {
        padding: 22px;
    }

    h1 {
        font-size: 26px;
    }

    .sucesso-data-hora {
        grid-template-columns: 1fr;
    }

    .form-pesquisa-paciente {
        flex-direction: column;
    }

    .admin-paciente-card {
        grid-template-columns: 1fr;
    }

    .admin-paciente-avatar {
        display: none;
    }

    .admin-paciente-acoes {
        flex-direction: column;
    }

    .paciente-detalhe-grid {
        grid-template-columns: 1fr;
    }

    .historico-item {
        grid-template-columns: 1fr;
    }

    .historico-status {
        text-align: left;
    }

    .agenda-detalhe-resumo {
        grid-template-columns: 1fr;
    }

    .agenda-paciente-card {
        grid-template-columns: 1fr;
    }

    .agenda-paciente-avatar {
        display: none;
    }

    .agenda-paciente-acoes {
        flex-direction: column;
    }

    .agenda-paciente-acoes form,
    .btn-resultado {
        width: 100%;
    }

    .form-cancelamento {
        flex-direction: column;
    }

    .form-cancelamento input {
        width: 100%;
        min-width: 0;
    }

}


@media (max-width: 500px) {

    .login-card {
        padding:
            26px
            20px;
    }

}


@media (max-width: 420px) {

    .dashboard-cards {
        grid-template-columns: 1fr;
    }

    .dashboard-status-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   TKCONSULTA - AGENDA PÚBLICA
   5 DIAS + CALENDÁRIO
========================================================= */

.agenda-publica-saloes {
    margin-top: 22px;
}


/* ---------------------------------------------------------
   Títulos
--------------------------------------------------------- */

.agenda-bloco-titulo {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 12px;
}

.agenda-bloco-titulo strong {
    font-size: 16px;
}

.agenda-bloco-icone {
    display: inline-flex;

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

    flex:
        0
        0
        30px;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: #e9f2ff;

    color:
        var(--cor-primaria);

    font-size: 13px;
    font-weight: 700;
}


/* ---------------------------------------------------------
   Linha: 5 dias + calendário
--------------------------------------------------------- */

.agenda-dias-linha {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        42px;

    align-items: stretch;

    gap: 6px;

    width: 100%;
}


/* ---------------------------------------------------------
   Cinco dias
--------------------------------------------------------- */

.agenda-dias-limitados {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 5px;

    width: 100%;
    min-width: 0;

    padding: 0;

    overflow: visible;
}


/* ---------------------------------------------------------
   Card do dia
--------------------------------------------------------- */

.agenda-dia-tk {
    appearance: none;

    display: flex;
    flex-direction: column;

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

    width: 100%;
    min-width: 0;
    min-height: 58px;

    padding:
        5px
        2px;

    border:
        1px solid
        #dbe2ea;

    border-radius: 9px;

    background: #ffffff;

    color: #172033;

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.agenda-dia-tk:hover {
    border-color:
        var(--cor-primaria);

    transform:
        translateY(-1px);
}

.agenda-dia-tk.ativo {
    border-color:
        var(--cor-primaria);

    background:
        var(--cor-primaria);

    color: #ffffff;
}

.agenda-dia-tk-mes {
    font-size: 8px;
    font-weight: 600;

    line-height: 1;

    opacity: .85;
}

.agenda-dia-tk-numero {
    margin:
        3px
        0;

    font-size: 17px;

    line-height: 1;
}

.agenda-dia-tk-semana {
    font-size: 8px;
    font-weight: 700;

    line-height: 1;

    opacity: .9;
}


/* ---------------------------------------------------------
   Calendário
--------------------------------------------------------- */

.agenda-calendario-container {
    position: relative;

    width: 42px;
    min-width: 42px;
}

.agenda-calendario-btn {
    appearance: none;

    display: flex;

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

    width: 42px;
    height: 100%;
    min-height: 58px;

    margin: 0;
    padding: 0;

    border:
        1px solid
        #dbe2ea;

    border-radius: 9px;

    background: #ffffff;

    color:
        var(--cor-primaria);

    font-size: 16px;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease;
}

.agenda-calendario-btn:hover {
    border-color:
        var(--cor-primaria);

    background: #f4f8ff;
}


/*
|--------------------------------------------------------------------------
| Input date nativo
|--------------------------------------------------------------------------
*/

.agenda-calendario-input-real {
    position: absolute;

    left: 0;
    top: 0;

    width: 1px;
    height: 1px;

    min-width: 0;
    min-height: 0;

    margin: 0;
    padding: 0;

    border: 0;

    opacity: 0;

    overflow: hidden;

    pointer-events: none;
}


/* ---------------------------------------------------------
   Aviso do calendário
--------------------------------------------------------- */

.agenda-calendario-aviso {
    min-height: 18px;

    margin-top: 5px;

    color: #b42318;

    font-size: 11px;
    font-weight: 600;
}


/* ---------------------------------------------------------
   Data selecionada
--------------------------------------------------------- */

.agenda-data-selecionada {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 5px;

    margin-top: 7px;

    color: #667085;

    font-size: 12px;
}

.agenda-data-selecionada strong {
    color: #344054;
}


/* ---------------------------------------------------------
   Título dos horários
--------------------------------------------------------- */

.agenda-titulo-horarios {
    margin-top: 20px;
}


/* ---------------------------------------------------------
   Painel do dia
--------------------------------------------------------- */

.agenda-painel-tk {
    display: none;
}

.agenda-painel-tk.ativo {
    display: block;
}

.agenda-dia-painel-data {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    margin-bottom: 10px;
}

.agenda-dia-painel-data strong {
    font-size: 14px;
}

.agenda-dia-painel-data span {
    color: #667085;

    font-size: 12px;
}


/* ---------------------------------------------------------
   Grade dos horários
--------------------------------------------------------- */

.agenda-horarios-tk {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 8px;
}

.agenda-horarios-tk
.form-horario {
    margin: 0;
}


/* ---------------------------------------------------------
   Horário
--------------------------------------------------------- */

.horario-tk {
    appearance: none;

    display: flex;
    flex-direction: column;

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

    gap: 3px;

    width: 100%;
    min-height: 58px;

    padding: 8px;

    border:
        1px solid
        #dbe2ea;

    border-radius: 10px;

    background: #ffffff;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.horario-tk:hover {
    border-color:
        var(--cor-primaria);

    background: #f4f8ff;

    transform:
        translateY(-1px);
}

.horario-tk strong {
    color: #172033;

    font-size: 16px;
}

.horario-tk span {
    color: #188038;

    font-size: 10px;
    font-weight: 600;
}


/* ---------------------------------------------------------
   Acessibilidade
--------------------------------------------------------- */

.agenda-dia-tk:focus-visible,
.agenda-calendario-btn:focus-visible,
.horario-tk:focus-visible {
    outline:
        3px solid
        #111827;

    outline-offset: 2px;
}


/* ---------------------------------------------------------
   Tablet
--------------------------------------------------------- */

@media (max-width: 760px) {

    .agenda-horarios-tk {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

}


/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */

@media (max-width: 520px) {

    .agenda-publica-saloes {
        margin-top: 18px;
    }

    .agenda-dias-linha {
        grid-template-columns:
            minmax(0, 1fr)
            38px;

        gap: 4px;
    }

    .agenda-dias-limitados {
        gap: 4px;
    }

    .agenda-dia-tk {
        min-height: 54px;

        padding:
            4px
            1px;

        border-radius: 8px;
    }

    .agenda-dia-tk-mes,
    .agenda-dia-tk-semana {
        font-size: 7px;
    }

    .agenda-dia-tk-numero {
        margin:
            2px
            0;

        font-size: 16px;
    }

    .agenda-calendario-container {
        width: 38px;
        min-width: 38px;
    }

    .agenda-calendario-btn {
        width: 38px;

        min-height: 54px;

        border-radius: 8px;

        font-size: 15px;
    }

    .agenda-horarios-tk {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 7px;
    }

    .horario-tk {
        min-height: 54px;

        padding: 7px;

        border-radius: 9px;
    }

    .horario-tk strong {
        font-size: 15px;
    }

    .agenda-bloco-titulo strong {
        font-size: 15px;
    }

}


/* ---------------------------------------------------------
   Mobile muito estreito
--------------------------------------------------------- */

@media (max-width: 360px) {

    .agenda-dias-linha {
        grid-template-columns:
            minmax(0, 1fr)
            34px;

        gap: 3px;
    }

    .agenda-dias-limitados {
        gap: 3px;
    }

    .agenda-dia-tk-numero {
        font-size: 15px;
    }

    .agenda-calendario-container {
        width: 34px;
        min-width: 34px;
    }

    .agenda-calendario-btn {
        width: 34px;

        font-size: 14px;
    }

}
/* =========================================================
   CONFIRMAÇÃO DO AGENDAMENTO - COMPACTA
========================================================= */

.confirmacao-container {
    padding-top: 24px;
    padding-bottom: 24px;
}


/* CARD */

.confirmacao-card {
    padding: 24px;
}


/* VOLTAR */

.confirmacao-voltar {
    margin-bottom: 12px;
}


/* CABEÇALHO */

.confirmacao-cabecalho {
    margin-bottom: 16px;
}

.confirmacao-cabecalho h1 {
    margin-bottom: 4px;

    font-size: 25px;
}

.confirmacao-cabecalho p {
    margin: 0;

    font-size: 14px;
}


/* =========================================================
   RESUMO
========================================================= */

.confirmacao-resumo {
    overflow: hidden;

    border:
        1px solid
        #e1e7ee;

    border-radius: 12px;

    background: #f8fafc;
}


/* ITEM */

.confirmacao-item {
    display: flex;
    flex-direction: column;

    gap: 3px;

    padding:
        11px
        14px;

    border-bottom:
        1px solid
        #e5eaf0;
}


.confirmacao-item span,
.confirmacao-data-hora span {
    color:
        var(--cor-texto-secundario);

    font-size: 11px;
}


.confirmacao-item strong,
.confirmacao-data-hora strong {
    color:
        var(--cor-texto);

    font-size: 14px;

    line-height: 1.3;
}


/* =========================================================
   DATA + HORÁRIO
========================================================= */

.confirmacao-data-hora {
    display: grid;

    grid-template-columns:
        1fr
        1fr;
}


.confirmacao-data-hora > div {
    display: flex;
    flex-direction: column;

    gap: 3px;

    padding:
        11px
        14px;
}


.confirmacao-data-hora > div:first-child {
    border-right:
        1px solid
        #e5eaf0;
}


/* =========================================================
   BOTÃO
========================================================= */

.confirmacao-form {
    margin-top: 16px;
}


.confirmacao-form .btn {
    min-height: 44px;

    font-size: 14px;
}


/* =========================================================
   AVISO
========================================================= */

.confirmacao-card
.confirmacao-aviso {
    margin-top: 8px;

    font-size: 11px;

    line-height: 1.35;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

    .confirmacao-container {
        padding:
            14px
            12px
            20px;
    }


    .confirmacao-card {
        padding:
            18px
            16px;
    }


    .confirmacao-voltar {
        margin-bottom: 9px;

        font-size: 13px;
    }


    .confirmacao-cabecalho {
        margin-bottom: 13px;
    }


    .confirmacao-cabecalho h1 {
        font-size: 22px;
    }


    .confirmacao-cabecalho p {
        font-size: 13px;
    }


    .confirmacao-item {
        padding:
            9px
            12px;
    }


    .confirmacao-data-hora > div {
        padding:
            9px
            12px;
    }


    .confirmacao-form {
        margin-top: 13px;
    }

}
/* =========================================================
   FLUXO PÚBLICO - SEM BOTÕES VOLTAR
========================================================= */

main.container .link-voltar {
    display: none;
}

/* =========================================================
   SUCESSO DO AGENDAMENTO - COMPACTO
========================================================= */

.sucesso-container-compacto {
    padding-top: 20px;
    padding-bottom: 20px;
}


/* =========================================================
   CARD
========================================================= */

.sucesso-card-compacto {
    padding: 22px;

    text-align: left;
}


/* =========================================================
   ÍCONE
========================================================= */

.sucesso-card-compacto
.sucesso-icone-compacto {
    width: 46px;
    height: 46px;

    margin:
        0
        auto
        10px;

    font-size: 24px;
}


/* =========================================================
   CABEÇALHO
========================================================= */

.sucesso-card-compacto
.sucesso-cabecalho-compacto {
    margin-bottom: 14px;

    text-align: center;
}

.sucesso-card-compacto
.sucesso-cabecalho-compacto h1 {
    margin-bottom: 4px;

    font-size: 23px;
}

.sucesso-card-compacto
.sucesso-cabecalho-compacto p {
    margin: 0;

    color:
        var(--cor-texto-secundario);

    font-size: 13px;
}


/* =========================================================
   PROTOCOLO
========================================================= */

.sucesso-card-compacto
.sucesso-protocolo-compacto {
    gap: 4px;

    margin-bottom: 12px;

    padding:
        12px
        14px;

    border-radius: 11px;
}

.sucesso-card-compacto
.sucesso-protocolo-compacto span {
    font-size: 11px;
}

.sucesso-card-compacto
.sucesso-protocolo-compacto strong {
    font-size: 17px;

    word-break: break-word;
}


/* =========================================================
   RESUMO
========================================================= */

.sucesso-resumo-compacto {
    overflow: hidden;

    border:
        1px solid
        #e1e7ee;

    border-radius: 12px;

    background: #f8fafc;
}


/* =========================================================
   ITENS
========================================================= */

.sucesso-info-item {
    display: flex;
    flex-direction: column;

    gap: 3px;

    padding:
        9px
        13px;

    border-bottom:
        1px solid
        #e5eaf0;
}

.sucesso-info-item span,
.sucesso-data-hora-compacto span {
    color:
        var(--cor-texto-secundario);

    font-size: 11px;
}

.sucesso-info-item strong,
.sucesso-data-hora-compacto strong {
    color:
        var(--cor-texto);

    font-size: 14px;

    line-height: 1.3;
}


/* =========================================================
   DATA + HORÁRIO
========================================================= */

.sucesso-data-hora-compacto {
    display: grid;

    grid-template-columns:
        1fr
        1fr;
}

.sucesso-data-hora-compacto > div {
    display: flex;
    flex-direction: column;

    gap: 3px;

    padding:
        9px
        13px;
}

.sucesso-data-hora-compacto
> div:first-child {
    border-right:
        1px solid
        #e5eaf0;
}


/* =========================================================
   BOTÃO
========================================================= */

.sucesso-acao {
    margin-top: 14px;

    min-height: 44px;

    font-size: 14px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

    .sucesso-container-compacto {
        padding:
            12px
            12px
            18px;
    }


    .sucesso-card-compacto {
        padding:
            16px;
    }


    .sucesso-card-compacto
    .sucesso-icone-compacto {
        width: 40px;
        height: 40px;

        margin-bottom: 8px;

        font-size: 21px;
    }


    .sucesso-card-compacto
    .sucesso-cabecalho-compacto {
        margin-bottom: 11px;
    }


    .sucesso-card-compacto
    .sucesso-cabecalho-compacto h1 {
        font-size: 21px;
    }


    .sucesso-card-compacto
    .sucesso-protocolo-compacto {
        margin-bottom: 10px;

        padding:
            10px
            12px;
    }


    .sucesso-info-item {
        padding:
            8px
            11px;
    }


    .sucesso-data-hora-compacto > div {
        padding:
            8px
            11px;
    }


    .sucesso-acao {
        margin-top: 12px;
    }

}

/* =========================================================
   DADOS INSTITUCIONAIS
========================================================= */

.institucional-card {
    margin-bottom: 28px;
}


.institucional-card-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 22px;
}


.institucional-card-topo h2,
.institucional-card-topo h3 {
    margin:
        4px
        0;
}


.institucional-card-topo p {
    margin: 0;

    color: #64748b;
}


.institucional-label {
    font-size: 12px;
    font-weight: 700;

    color: #2563eb;

    text-transform: uppercase;
}


.institucional-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 12px;
}


.institucional-grid > div {
    display: flex;
    flex-direction: column;

    gap: 4px;

    padding: 14px;

    border: 1px solid #e2e8f0;
    border-radius: 10px;

    background: #f8fafc;
}


.institucional-grid span {
    font-size: 11px;

    color: #64748b;
}


.institucional-grid strong {
    font-size: 14px;

    color: #0f172a;
}


.institucional-grid-largo {
    grid-column:
        span 2;
}


.institucional-secao-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin:
        26px
        0
        16px;
}


.institucional-secao-topo h2 {
    margin: 0;
}


.institucional-secao-topo p {
    margin:
        4px
        0
        0;

    color: #64748b;
}


.institucional-secretarias {
    display: grid;

    gap: 18px;
}


.institucional-titulo-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 8px;
}


.institucional-sigla {
    padding:
        3px
        8px;

    border-radius: 999px;

    background: #eaf2ff;

    color: #1565c0;

    font-size: 11px;
    font-weight: 700;
}


.institucional-status {
    padding:
        3px
        8px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;
}


.institucional-status.ativo {
    background: #dcfce7;

    color: #15803d;
}


.institucional-status.inativo {
    background: #f1f5f9;

    color: #64748b;
}


.institucional-status-form {
    margin-top: 16px;
}


.institucional-form-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        18px
        20px;
}


.institucional-campo-largo {
    grid-column:
        span 2;
}


@media (max-width: 900px) {

    .institucional-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 640px) {

    .institucional-card-topo,
    .institucional-secao-topo {
        flex-direction: column;
        align-items: stretch;
    }


    .institucional-grid,
    .institucional-form-grid {
        grid-template-columns: 1fr;
    }


    .institucional-grid-largo,
    .institucional-campo-largo {
        grid-column:
            span 1;
    }

}
/* =========================================================
   DADOS INSTITUCIONAIS - LAYOUT REFINADO
========================================================= */


/* =========================================================
   CABEÇALHO DA PÁGINA
========================================================= */

.institucional-pagina-topo {
    margin-bottom: 22px;
}

.institucional-pagina-topo h1 {
    margin: 0 0 5px;

    font-size: 28px;
}

.institucional-pagina-topo p {
    margin: 0;

    color: #64748b;

    font-size: 14px;
}


/* =========================================================
   PREFEITURA
========================================================= */

.institucional-prefeitura-card {
    margin-bottom: 30px;

    padding: 22px;
}


.institucional-prefeitura-topo {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: 20px;
}


.institucional-prefeitura-identidade {
    display: flex;

    align-items: flex-start;

    gap: 14px;
}


.institucional-icone {
    display: flex;

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

    flex: 0 0 auto;

    width: 44px;
    height: 44px;

    border-radius: 12px;

    background: #eaf2ff;

    color: #1565c0;

    font-size: 18px;
    font-weight: 800;
}


.institucional-icone-secretaria {
    background: #eff6ff;
}


.institucional-tipo {
    display: block;

    margin-bottom: 3px;

    color: #2563eb;

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
}


.institucional-prefeitura-identidade h2 {
    margin: 0;

    font-size: 21px;

    line-height: 1.25;
}


.institucional-prefeitura-identidade p {
    margin: 5px 0 0;

    color: #64748b;

    font-size: 14px;
}


/* =========================================================
   BOTÕES COMPACTOS
========================================================= */

.institucional-btn-acao,
.institucional-btn-novo {
    width: auto !important;

    min-width: auto;

    display: inline-flex;

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

    padding:
        9px
        16px;

    white-space: nowrap;
}


.institucional-btn-novo {
    min-width: 160px;
}


/* =========================================================
   GRID DE INFORMAÇÕES
========================================================= */

.institucional-info-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 10px;
}


.institucional-info {
    display: flex;

    flex-direction: column;

    gap: 4px;

    min-height: 62px;

    padding:
        11px
        13px;

    border:
        1px solid
        #dde5ef;

    border-radius: 9px;

    background: #f8fafc;
}


.institucional-info span {
    color: #64748b;

    font-size: 10px;
}


.institucional-info strong {
    color: #0f172a;

    font-size: 13px;

    line-height: 1.35;
}


.institucional-info-endereco {
    grid-column: span 2;
}


/* =========================================================
   SECRETARIAS - CABEÇALHO
========================================================= */

.institucional-secretarias-topo {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin:
        0
        0
        14px;
}


.institucional-secretarias-topo h2 {
    margin: 0;

    font-size: 21px;
}


.institucional-secretarias-topo p {
    margin: 3px 0 0;

    color: #64748b;

    font-size: 13px;
}


/* =========================================================
   LISTA DE SECRETARIAS
========================================================= */

.institucional-secretarias-lista {
    display: grid;

    gap: 16px;
}


/* =========================================================
   CARD SECRETARIA
========================================================= */

.institucional-secretaria-card {
    padding: 20px;
}


.institucional-secretaria-topo {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 17px;
}


.institucional-secretaria-identidade {
    display: flex;

    align-items: flex-start;

    gap: 13px;
}


.institucional-secretaria-titulo {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 7px;
}


.institucional-secretaria-titulo h3 {
    margin: 0;

    color: #0f172a;

    font-size: 18px;
}


/* =========================================================
   SIGLA
========================================================= */

.institucional-sigla {
    display: inline-flex;

    align-items: center;

    padding:
        3px
        7px;

    border-radius: 999px;

    background: #eaf2ff;

    color: #1565c0;

    font-size: 10px;
    font-weight: 700;
}


/* =========================================================
   STATUS
========================================================= */

.institucional-status {
    display: inline-flex;

    align-items: center;

    padding:
        3px
        7px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 700;
}


.institucional-status.ativo {
    background: #dcfce7;

    color: #15803d;
}


.institucional-status.inativo {
    background: #f1f5f9;

    color: #64748b;
}


/* =========================================================
   RESPONSÁVEL
========================================================= */

.institucional-responsavel {
    display: flex;

    flex-wrap: wrap;

    gap: 4px;

    margin:
        7px
        0
        0;

    font-size: 13px;
}


.institucional-responsavel span {
    color: #64748b;
}


.institucional-responsavel strong {
    color: #334155;

    font-weight: 600;
}


/* =========================================================
   SECRETARIA - GRID
========================================================= */

.secretaria-grid {
    grid-template-columns:
        1fr
        1fr
        2fr;
}


.secretaria-grid
.institucional-info-endereco {
    grid-column: auto;
}


.institucional-info-horario {
    grid-column: span 2;
}


/* =========================================================
   RODAPÉ
========================================================= */

.institucional-secretaria-rodape {
    display: flex;

    justify-content: flex-end;

    margin-top: 13px;

    padding-top: 13px;

    border-top:
        1px solid
        #eef2f7;
}


.institucional-secretaria-rodape form {
    margin: 0;
}


/* =========================================================
   ATIVAR / INATIVAR
========================================================= */

.institucional-btn-status {
    width: auto;

    padding:
        7px
        12px;

    border:
        1px solid
        #d7dee8;

    border-radius: 7px;

    background: #ffffff;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
}


.institucional-btn-status.inativar {
    color: #64748b;
}


.institucional-btn-status.ativar {
    border-color: #bbf7d0;

    color: #15803d;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .institucional-info-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .secretaria-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .institucional-info-endereco,
    .institucional-info-horario {
        grid-column:
            span 2;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

    .institucional-pagina-topo h1 {
        font-size: 23px;
    }


    .institucional-prefeitura-card,
    .institucional-secretaria-card {
        padding: 16px;
    }


    .institucional-prefeitura-topo,
    .institucional-secretaria-topo,
    .institucional-secretarias-topo {
        flex-direction: column;

        align-items: stretch;
    }


    .institucional-btn-acao,
    .institucional-btn-novo {
        width: 100% !important;
    }


    .institucional-info-grid,
    .secretaria-grid {
        grid-template-columns:
            1fr;
    }


    .institucional-info-endereco,
    .institucional-info-horario {
        grid-column:
            span 1;
    }


    .institucional-icone {
        width: 40px;
        height: 40px;
    }


    .institucional-secretaria-rodape {
        justify-content: stretch;
    }


    .institucional-secretaria-rodape form,
    .institucional-btn-status {
        width: 100%;
    }

}
/* =========================================================
   PORTAL PÚBLICO INSTITUCIONAL
========================================================= */

.publico-institucional {
    background:
        #f4f7fb;
}


/* =========================================================
   CABEÇALHO
========================================================= */

.portal-topo {
    background:
        #ffffff;

    border-bottom:
        1px solid
        #e3e8ef;
}


.portal-topo-conteudo {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 24px;

    width: 100%;

    max-width: 1120px;

    margin: 0 auto;

    padding:
        17px
        24px;
}


/* =========================================================
   IDENTIDADE
========================================================= */

.portal-identidade {
    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;

    color: inherit;

    text-decoration: none;
}


.portal-identidade-icone {
    display: flex;

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

    flex: 0 0 auto;

    width: 44px;
    height: 44px;

    border-radius: 12px;

    background:
        #1565c0;

    color:
        #ffffff;

    font-size: 25px;
    font-weight: 400;

    line-height: 1;
}


.portal-identidade-textos {
    display: flex;

    flex-direction: column;

    min-width: 0;

    gap: 3px;
}


.portal-prefeitura {
    color:
        #172033;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.2;
}


.portal-secretaria {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 6px;

    color:
        #64748b;

    font-size: 12px;
}


.portal-secretaria small {
    display: inline-flex;

    align-items: center;

    padding:
        2px
        6px;

    border-radius: 999px;

    background:
        #edf4ff;

    color:
        #1565c0;

    font-size: 9px;
    font-weight: 700;
}


/* =========================================================
   AGENDAMENTO ONLINE
========================================================= */

.portal-servico {
    display: flex;

    flex-direction: column;

    align-items: flex-end;

    flex: 0 0 auto;
}


.portal-servico span {
    color:
        #64748b;

    font-size: 10px;
}


.portal-servico strong {
    color:
        #1565c0;

    font-size: 14px;
}


/* =========================================================
   FAIXA
========================================================= */

.portal-faixa {
    background:
        #f8fafc;

    border-bottom:
        1px solid
        #e8edf3;
}


.portal-faixa-conteudo {
    display: flex;

    align-items: center;

    gap: 8px;

    width: 100%;

    max-width: 1120px;

    margin: 0 auto;

    padding:
        9px
        24px;
}


.portal-faixa span {
    padding:
        3px
        7px;

    border-radius:
        999px;

    background:
        #eaf2ff;

    color:
        #1565c0;

    font-size:
        9px;

    font-weight:
        700;

    text-transform:
        uppercase;
}


.portal-faixa strong {
    color:
        #475569;

    font-size:
        11px;

    font-weight:
        500;
}


/* =========================================================
   IDENTIFICAÇÃO
========================================================= */

.identificacao-container {
    max-width:
        760px;

    padding-top:
        42px;

    padding-bottom:
        50px;
}


.identificacao-card {
    padding:
        30px;

    border:
        1px solid
        #edf0f4;

    box-shadow:
        0
        10px
        35px
        rgba(
            15,
            23,
            42,
            0.06
        );
}


.identificacao-cabecalho {
    margin-bottom:
        24px;
}


.identificacao-etapa {
    display:
        inline-block;

    margin-bottom:
        7px;

    color:
        #1565c0;

    font-size:
        10px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        0.04em;
}


.identificacao-cabecalho h1 {
    margin:
        0
        0
        7px;

    color:
        #172033;

    font-size:
        27px;

    line-height:
        1.2;
}


.identificacao-cabecalho p {
    margin:
        0;

    color:
        #64748b;

    font-size:
        14px;

    line-height:
        1.5;
}


/* =========================================================
   CAMPO
========================================================= */

.identificacao-form {
    margin-top:
        4px;
}


.identificacao-campo {
    margin-bottom:
        17px;
}


.identificacao-campo label {
    display:
        block;

    margin-bottom:
        7px;

    color:
        #1e293b;

    font-weight:
        650;
}


.identificacao-campo input {
    min-height:
        48px;

    font-size:
        15px;
}


.identificacao-ajuda {
    display:
        block;

    margin-top:
        6px;

    color:
        #94a3b8;

    font-size:
        11px;
}


/* =========================================================
   BOTÃO
========================================================= */

.identificacao-btn {
    min-height:
        48px;

    font-size:
        14px;

    font-weight:
        700;
}


/* =========================================================
   SEGURANÇA
========================================================= */

.identificacao-seguranca {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        8px;

    margin-top:
        17px;

    padding-top:
        15px;

    border-top:
        1px solid
        #eef2f6;
}


.identificacao-seguranca-icone {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    width:
        18px;

    height:
        18px;

    margin-top:
        1px;

    border-radius:
        50%;

    background:
        #dcfce7;

    color:
        #15803d;

    font-size:
        10px;

    font-weight:
        800;
}


.identificacao-seguranca p {
    margin:
        0;

    color:
        #64748b;

    font-size:
        11px;

    line-height:
        1.5;
}


/* =========================================================
   RODAPÉ
========================================================= */

.portal-rodape {
    margin-top:
        auto;

    border-top:
        1px solid
        #e5eaf0;

    background:
        #ffffff;
}


.portal-rodape-conteudo {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    width:
        100%;

    max-width:
        1120px;

    margin:
        0 auto;

    padding:
        14px
        24px;
}


.portal-rodape span {
    color:
        #64748b;

    font-size:
        11px;
}


.portal-rodape small {
    color:
        #94a3b8;

    font-size:
        10px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width:
        640px
) {

    .portal-topo-conteudo {
        padding:
            13px
            16px;
    }


    .portal-identidade-icone {
        width:
            38px;

        height:
            38px;

        border-radius:
            10px;

        font-size:
            21px;
    }


    .portal-prefeitura {
        font-size:
            13px;
    }


    .portal-secretaria {
        font-size:
            10px;
    }


    .portal-servico {
        display:
            none;
    }


    .portal-faixa-conteudo {
        padding:
            8px
            16px;
    }


    .portal-faixa strong {
        font-size:
            10px;
    }


    .identificacao-container {
        padding:
            22px
            12px
            35px;
    }


    .identificacao-card {
        padding:
            22px
            18px;
    }


    .identificacao-cabecalho {
        margin-bottom:
            20px;
    }


    .identificacao-cabecalho h1 {
        font-size:
            23px;
    }


    .identificacao-cabecalho p {
        font-size:
            13px;
    }


    .portal-rodape-conteudo {
        flex-direction:
            column;

        align-items:
            center;

        gap:
            3px;

        padding:
            12px
            16px;
    }

}
/* =========================================================
   BRASÃO DA PREFEITURA
========================================================= */

.portal-identidade-icone:has(.portal-brasao) {
    width: 54px;
    height: 54px;

    padding: 3px;

    border-radius: 10px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
}


.portal-brasao {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* MOBILE */

@media (max-width: 640px) {

    .portal-identidade-icone:has(.portal-brasao) {
        width: 46px;
        height: 46px;
    }

}

/* =========================================================
   ADMIN MOBILE - AJUSTE FINAL
========================================================= */


/* =========================================================
   BOTÃO MENU
========================================================= */

.admin-topo-mobile {
    display: none;

    align-items: center;

    gap: 11px;
}


.admin-menu-mobile-btn {
    display: flex;

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

    width: 40px;
    height: 40px;

    padding: 0;

    border:
        1px solid
        #d9e1ea;

    border-radius: 10px;

    background: #ffffff;

    color: #172033;

    font-size: 21px;

    cursor: pointer;
}


/* =========================================================
   OVERLAY
========================================================= */

.admin-sidebar-overlay {
    display: none;

    position: fixed;

    inset: 0;

    z-index: 998;

    background:
        rgba(
            15,
            23,
            42,
            .48
        );
}


.admin-sidebar-overlay.ativo {
    display: block;
}


body.admin-menu-aberto {
    overflow: hidden;
}


/* =========================================================
   MOBILE ADMIN
========================================================= */

@media (max-width: 800px) {

    /*
     * Sidebar vira drawer.
     */
    .admin-sidebar {
        display: flex !important;

        position: fixed;

        top: 0;
        bottom: 0;
        left: 0;

        z-index: 999;

        width: 255px;
        max-width: 82vw;

        transform:
            translateX(-105%);

        transition:
            transform .22s ease;

        box-shadow:
            12px
            0
            30px
            rgba(
                15,
                23,
                42,
                .18
            );
    }


    .admin-sidebar.aberto {
        transform:
            translateX(0);
    }


    /*
     * Estrutura ocupa toda tela.
     */
    .admin-estrutura {
        display: block;

        min-height: 100vh;
    }


    .admin-conteudo {
        width: 100%;
    }


    /*
     * Topo mobile.
     */
    .admin-topo {
        min-height: 62px;

        padding:
            0
            14px;
    }


    .admin-topo-mobile {
        display: flex;
    }


    .admin-topo-titulo {
        display: none;
    }


    .admin-topo-identificacao {
        display: none;
    }


    .admin-btn-logout {
        min-height: 38px;

        padding:
            7px
            12px;
    }


    /*
     * Conteúdo.
     */
    .admin-main {
        padding:
            20px
            12px
            30px;
    }

}


/* =========================================================
   DASHBOARD MOBILE COMPACTO
========================================================= */

@media (max-width: 650px) {

    /*
     * Cabeçalho.
     */
    .admin-pagina-cabecalho,
    .admin-pagina-topo {
        gap: 10px;

        margin-bottom: 16px;
    }


    .admin-pagina-cabecalho h1,
    .admin-pagina-topo h1 {
        font-size: 27px;
    }


    .admin-pagina-cabecalho p,
    .admin-pagina-topo p {
        font-size: 14px;
    }


    /*
     * Data.
     */
    .dashboard-data {
        padding:
            9px
            12px;

        font-size: 13px;
    }


    /*
     * Mantém 2 cards por linha.
     */
    .dashboard-cards {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap: 10px;

        margin-bottom: 16px;
    }


    /*
     * Cards menores.
     */
    .dashboard-card {
        min-height: 96px;

        padding: 13px;

        gap: 10px;

        flex-direction: row !important;

        align-items: center !important;

        border-radius: 13px;
    }


    .dashboard-card-icone {
        flex:
            0
            0
            38px;

        width: 38px;
        height: 38px;

        border-radius: 10px;

        font-size: 18px;
    }


    .dashboard-card span {
        font-size: 11px;

        line-height: 1.25;
    }


    .dashboard-card strong {
        font-size: 24px;
    }


    /*
     * Status também 2 por linha.
     */
    .dashboard-status-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap: 9px;
    }


    .dashboard-status-item {
        padding: 12px;

        gap: 4px;
    }


    .dashboard-status-item span {
        font-size: 11px;
    }


    .dashboard-status-item strong {
        font-size: 20px;
    }


    /*
     * Cards das seções.
     */
    .dashboard-secao {
        margin-bottom: 15px;
    }


    .dashboard-secao.admin-card,
    .dashboard-colunas .admin-card {
        padding: 16px;
    }


    .dashboard-secao-titulo {
        margin-bottom: 12px;
    }


    .dashboard-secao-titulo h2 {
        font-size: 17px;
    }

}


/* =========================================================
   CELULARES MUITO PEQUENOS
========================================================= */

@media (max-width: 340px) {

    .dashboard-cards,
    .dashboard-status-grid {
        grid-template-columns:
            1fr !important;
    }

}

/* =========================================================
   DASHBOARD - HORÁRIOS POR UNIDADE
========================================================= */

.dashboard-unidades-lista {
    display: grid;
    gap: 10px;
}


/* =========================================================
   CARD DA UNIDADE
========================================================= */

.dashboard-unidade {
    overflow: hidden;

    border: 1px solid #dfe6ee;
    border-radius: 12px;

    background: #ffffff;
}


.dashboard-unidade-resumo {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 14px;

    min-height: 76px;

    padding:
        12px
        14px;

    cursor: pointer;

    list-style: none;

    user-select: none;
}


.dashboard-unidade-resumo::-webkit-details-marker {
    display: none;
}


.dashboard-unidade-resumo:hover {
    background: #f8fafc;
}


/* =========================================================
   IDENTIDADE
========================================================= */

.dashboard-unidade-identidade {
    display: flex;

    align-items: center;

    gap: 11px;

    min-width: 0;
}


.dashboard-unidade-icone {
    display: flex;

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

    flex:
        0
        0
        42px;

    width: 42px;
    height: 42px;

    border-radius: 11px;

    background: #eef5ff;

    font-size: 20px;
}


.dashboard-unidade-textos {
    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;
}


.dashboard-unidade-textos strong {
    overflow: hidden;

    color: #172033;

    font-size: 14px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.dashboard-unidade-textos span {
    color: #64748b;

    font-size: 11px;
}


/* =========================================================
   LATERAL
========================================================= */

.dashboard-unidade-lateral {
    display: flex;

    align-items: center;

    gap: 13px;
}


.dashboard-unidade-vagas {
    display: flex;

    flex-direction: column;

    align-items: flex-end;
}


.dashboard-unidade-vagas strong {
    color: #1565c0;

    font-size: 18px;

    line-height: 1;
}


.dashboard-unidade-vagas span {
    color: #64748b;

    font-size: 10px;
}


.dashboard-unidade-seta {
    color: #64748b;

    font-size: 24px;

    transition:
        transform .2s ease;
}


.dashboard-unidade[open]
.dashboard-unidade-seta {
    transform: rotate(90deg);
}


/* =========================================================
   CONTEÚDO ABERTO
========================================================= */

.dashboard-unidade-conteudo {
    border-top:
        1px solid
        #e8edf3;

    background:
        #fbfcfe;
}


.dashboard-unidade-horarios {
    padding:
        0
        14px;
}


/* =========================================================
   HORÁRIO
========================================================= */

.dashboard-unidade-horario {
    display: grid;

    grid-template-columns:
        70px
        minmax(0, 1fr)
        54px;

    align-items: center;

    gap: 10px;

    padding:
        12px
        0;

    border-bottom:
        1px solid
        #e5eaf0;

    color: inherit;

    text-decoration: none;
}


.dashboard-unidade-horario:last-child {
    border-bottom: none;
}


.dashboard-unidade-horario:hover {
    opacity: .8;
}


/* =========================================================
   DATA
========================================================= */

.dashboard-unidade-data {
    display: flex;

    flex-direction: column;
}


.dashboard-unidade-data strong {
    color: #172033;

    font-size: 12px;
}


.dashboard-unidade-data span {
    color: #172033;

    font-size: 15px;
    font-weight: 700;
}


/* =========================================================
   ATENDIMENTO
========================================================= */

.dashboard-unidade-atendimento {
    display: flex;

    flex-direction: column;

    gap: 2px;

    min-width: 0;
}


.dashboard-unidade-atendimento strong {
    overflow: hidden;

    color: #172033;

    font-size: 12px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.dashboard-unidade-atendimento span {
    color: #64748b;

    font-size: 10px;
}


/* =========================================================
   DISPONIBILIDADE
========================================================= */

.dashboard-unidade-disponivel {
    display: flex;

    flex-direction: column;

    align-items: center;
}


.dashboard-unidade-disponivel strong {
    color: #1565c0;

    font-size: 18px;

    line-height: 1;
}


.dashboard-unidade-disponivel span {
    color: #64748b;

    font-size: 9px;
}


.dashboard-unidade-disponivel.lotado strong {
    color: #dc2626;
}


/* =========================================================
   RODAPÉ
========================================================= */

.dashboard-unidade-rodape {
    padding:
        10px
        14px;

    border-top:
        1px solid
        #e8edf3;

    text-align: right;
}


.dashboard-unidade-ver-agenda {
    color: #1565c0;

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .dashboard-unidade-resumo {
        min-height: 68px;

        padding:
            10px
            11px;
    }


    .dashboard-unidade-icone {
        flex-basis: 38px;

        width: 38px;
        height: 38px;

        font-size: 18px;
    }


    .dashboard-unidade-textos strong {
        font-size: 13px;
    }


    .dashboard-unidade-vagas strong {
        font-size: 16px;
    }


    .dashboard-unidade-lateral {
        gap: 7px;
    }


    .dashboard-unidade-horarios {
        padding:
            0
            11px;
    }


    .dashboard-unidade-horario {
        grid-template-columns:
            55px
            minmax(0, 1fr)
            42px;

        gap: 7px;

        padding:
            10px
            0;
    }


    .dashboard-unidade-atendimento strong {
        font-size: 11px;
    }

}

/* =========================================================
   ALTERAÇÃO DE AGENDA DO DIA
========================================================= */

.agenda-dia-informacao {
    display: flex;

    flex-direction: column;

    gap: 4px;

    margin-bottom: 18px;
}


.agenda-dia-informacao span {
    font-size: 13px;

    color: #64748b;
}


/* =========================================================
   OPÇÕES
========================================================= */

.agenda-alteracao-opcoes {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 12px;

    margin-top: 8px;
}


.agenda-alteracao-opcao {
    position: relative;

    display: block;

    cursor: pointer;
}


.agenda-alteracao-opcao input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.agenda-alteracao-opcao-conteudo {
    display: flex;

    flex-direction: column;

    gap: 6px;

    min-height: 112px;

    padding: 16px;

    border:
        1px solid
        #dbe3ec;

    border-radius: 12px;

    background:
        #ffffff;

    transition:
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease;
}


.agenda-alteracao-opcao-conteudo strong {
    color: #172033;

    font-size: 14px;
}


.agenda-alteracao-opcao-conteudo small {
    color: #64748b;

    font-size: 12px;

    line-height: 1.4;
}


.agenda-alteracao-opcao
input:checked
+
.agenda-alteracao-opcao-conteudo {
    border-color:
        #1565c0;

    background:
        #f3f8ff;

    box-shadow:
        0
        0
        0
        2px
        rgba(
            21,
            101,
            192,
            .08
        );
}


/* =========================================================
   BLOCOS DINÂMICOS
========================================================= */

.agenda-alteracao-bloco {
    margin-top: 6px;
}


/* =========================================================
   PRÉVIA
========================================================= */

.agenda-previa-itens {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 8px;
}


.agenda-previa-item {
    display: inline-flex;

    align-items: center;

    padding:
        7px
        10px;

    border:
        1px solid
        #dbe3ec;

    border-radius: 8px;

    background:
        #f8fafc;

    color:
        #334155;

    font-size: 12px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

    .agenda-alteracao-opcoes {
        grid-template-columns:
            1fr;
    }


    .agenda-alteracao-opcao-conteudo {
        min-height: auto;

        padding: 14px;
    }

}