:root {
    --dourado: #C9A227;
    --dourado-claro: #FBF6E6;
    --dourado-escuro: #A8871F;
    --preto: #1A1A1A;
    --fundo: #FAFAF8;
    --branco: #FFFFFF;
    --cinza-texto: #8A8A85;
    --cinza-claro: #A0A09A;
    --borda: #E8E6E0;
    --erro: #C0392B;

    --fonte-titulo: 'Fraunces', serif;
    --fonte-corpo: 'IBM Plex Sans', sans-serif;
    --fonte-dado: 'IBM Plex Mono', monospace;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--fonte-corpo);
    background: var(--fundo);
    color: var(--preto);
    line-height: 1.5;
    padding: 20px;
    max-width: 480px;
    margin: 0 auto;
}

/* ===== Marca ===== */
.marca {
    text-align: center;
    margin-bottom: 28px;
}

.marca-sorria {
    font-size: 1.6rem;
    font-weight: 700;
    font-style: italic;
    color: var(--dourado);
}

.marca-goias {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--preto);
}

.marca-sub {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cinza-texto);
    margin-top: 2px;
}

/* ===== Tela de login ===== */
.tela-login {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-login {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: 12px;
    padding: 24px;
}

/* ===== Formulários ===== */
label {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cinza-claro);
    margin: 14px 0 6px;
}

input, select {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--borda);
    border-radius: 7px;
    font-family: var(--fonte-corpo);
    font-size: 1rem;
    background: var(--branco);
    color: var(--preto);
}

input:focus, select:focus {
    outline: 2px solid var(--dourado-claro);
    outline-offset: 1px;
    border-color: var(--dourado);
}

button {
    display: block;
    width: 100%;
    background: var(--preto);
    color: var(--branco);
    border: none;
    padding: 13px 20px;
    border-radius: 8px;
    font-family: var(--fonte-corpo);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    margin-top: 20px;
}

button:hover {
    opacity: 0.88;
}

button:disabled {
    background: var(--borda);
    color: var(--cinza-texto);
    cursor: not-allowed;
}

.btn-dourado {
    background: var(--dourado);
}

/* ===== Alertas ===== */
.alerta-erro {
    background: #FDEDEA;
    border: 1px solid #F5C6C0;
    color: var(--erro);
    padding: 10px 12px;
    border-radius: 7px;
    font-size: 0.85rem;
    margin-bottom: 4px;
}

.alerta-sucesso {
    background: var(--dourado-claro);
    border: 1px solid #EFE2B8;
    color: var(--dourado-escuro);
    padding: 10px 12px;
    border-radius: 7px;
    font-size: 0.85rem;
    margin-bottom: 4px;
}

/* ===== Cards genéricos ===== */
.card {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: 11px;
    padding: 16px;
    margin-bottom: 14px;
}

h1 {
    font-family: var(--fonte-titulo);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
}

h2 {
    font-family: var(--fonte-titulo);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
}

/* ===== Contexto do usuário ===== */
.contexto-usuario {
    font-size: 0.82rem;
    color: var(--cinza-texto);
    text-align: center;
    margin-bottom: 18px;
}

/* ===== Calendário ===== */
.calendario-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.calendario-nav span {
    font-size: 0.95rem;
    font-weight: 600;
}

.calendario-nav a {
    color: var(--dourado);
    text-decoration: none;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0 10px;
}

.calendario-semana {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-bottom: 6px;
}

.calendario-semana span {
    text-align: center;
    font-size: 0.68rem;
    color: var(--cinza-claro);
}

.calendario-grade {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.dia {
    aspect-ratio: 1;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    gap: 1px;
}

.dia-numero {
    font-size: 0.9rem;
    color: var(--preto);
}

.dia-status {
    font-size: 0.55rem;
    line-height: 1.1;
    text-align: center;
}

.dia-livre {
    background: var(--branco);
    border: 1px solid var(--borda);
}

.dia-livre .dia-status {
    color: var(--dourado);
}

.dia-livre:hover {
    border-color: var(--dourado);
}

.dia-indisponivel {
    background: #F2F2EE;
    border: 1px solid var(--borda);
    opacity: 0.55;
}

.dia-indisponivel .dia-numero,
.dia-indisponivel .dia-status {
    color: var(--cinza-texto);
}

/* ===== Link sair ===== */
.link-sair {
    display: block;
    text-align: center;
    margin-top: 24px;
    font-size: 0.85rem;
    color: var(--cinza-texto);
    text-decoration: none;
}

/* ===== Links de navegação ===== */
.link-voltar {
    display: inline-block;
    color: var(--dourado);
    text-decoration: none;
    font-size: 0.85rem;
    margin-bottom: 12px;
}

/* ===== Resumo da data no formulário ===== */
.resumo-data {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.resumo-dia {
    font-size: 1rem;
    font-weight: 600;
}

.resumo-hora {
    font-size: 0.82rem;
    color: var(--cinza-texto);
    margin-top: 2px;
}

/* ===== Campo somente leitura ===== */
.campo-fixo {
    font-size: 0.95rem;
    padding: 4px 0 2px;
}

/* ===== Linhas de dados (tela de confirmação) ===== */
.linha-dado {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--borda);
}

.linha-dado:last-child {
    border-bottom: none;
}

.linha-rotulo {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cinza-claro);
    white-space: nowrap;
}

.linha-valor {
    font-size: 0.92rem;
    text-align: right;
}

/* ===== Confirmação ===== */
.confirmacao-topo {
    text-align: center;
}

.confirmacao-icone {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--dourado-claro);
    color: var(--dourado-escuro);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 10px;
}

.confirmacao-topo h2 {
    margin-bottom: 0;
}

/* ===== Chip de equipe (usado nas telas de admin/equipe) ===== */
.chip-equipe {
    font-size: 0.72rem;
    background: var(--dourado-claro);
    color: var(--dourado-escuro);
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

/* ===== Navegação em abas ===== */
.nav {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--borda);
    padding-bottom: 12px;
}

.nav a {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--cinza-texto);
    text-decoration: none;
}

.nav a.ativo {
    background: var(--dourado-claro);
    color: var(--dourado-escuro);
    font-weight: 600;
}

/* ===== Agrupamento por data ===== */
.grupo-data {
    margin: 20px 0 10px;
}

.grupo-data:first-of-type {
    margin-top: 0;
}

.grupo-data-titulo {
    font-size: 0.95rem;
    font-weight: 600;
}

.grupo-data-sub {
    font-size: 0.78rem;
    color: var(--cinza-texto);
    margin-top: 1px;
}

/* ===== Cartão de agendamento ===== */
.card-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.paciente-nome {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 3px;
}

.paciente-detalhe {
    font-size: 0.82rem;
    color: var(--cinza-texto);
    margin-bottom: 6px;
}

.paciente-meta {
    font-size: 0.75rem;
    color: var(--cinza-claro);
    line-height: 1.5;
}

/* ===== Botão em formato de texto ===== */
.btn-texto {
    background: none;
    border: none;
    color: var(--dourado);
    font-family: var(--fonte-corpo);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0;
    margin: 0;
    width: auto;
    cursor: pointer;
}

.btn-texto:hover {
    text-decoration: underline;
    opacity: 1;
}

.btn-pequeno {
    width: auto;
    padding: 8px 16px;
    font-size: 0.82rem;
    margin-top: 0;
}

/* ===== Troca de equipe ===== */
.troca-equipe {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--borda);
}

.troca-equipe select {
    flex: 1;
    padding: 8px 10px;
    font-size: 0.85rem;
}

/* ===== Estado vazio ===== */
.vazio {
    text-align: center;
    color: var(--cinza-texto);
    font-size: 0.9rem;
    padding: 12px 0;
}

/* ===== Área de texto ===== */
textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--borda);
    border-radius: 7px;
    font-family: var(--fonte-corpo);
    font-size: 0.95rem;
    background: var(--branco);
    color: var(--preto);
    resize: vertical;
}

textarea:focus {
    outline: 2px solid var(--dourado-claro);
    outline-offset: 1px;
    border-color: var(--dourado);
}

.texto-auxiliar {
    font-size: 0.8rem;
    color: var(--cinza-texto);
    margin-bottom: 8px;
}

/* ===== Listas de itens (clínicas, usuários) ===== */
.linha-lista {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--borda);
}

.linha-lista:last-child {
    border-bottom: none;
}

.linha-lista-info {
    min-width: 0;
}

.linha-lista-titulo {
    font-size: 0.92rem;
}

.linha-lista-sub {
    font-size: 0.78rem;
    color: var(--cinza-texto);
    margin-top: 1px;
}

.btn-perigo {
    color: var(--erro);
}

.tag-inativo {
    font-size: 0.65rem;
    background: #F2F2EE;
    color: var(--cinza-texto);
    padding: 2px 7px;
    border-radius: 20px;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.acoes-usuario {
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--borda);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.linha-acao {
    display: flex;
    gap: 8px;
    align-items: center;
}

.linha-acao input {
    flex: 1;
    padding: 8px 10px;
    font-size: 0.85rem;
}

/* ===== Agenda da equipe ===== */
.cabecalho-equipe {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.cabecalho-titulo {
    font-size: 1rem;
    font-weight: 600;
}

.cabecalho-sub {
    font-size: 0.8rem;
    color: var(--cinza-texto);
    margin-top: 1px;
}

.card-equipe {
    border-left: 3px solid var(--dourado);
}

.agenda-data {
    font-size: 0.9rem;
    font-weight: 600;
}

.agenda-hora {
    font-family: var(--fonte-dado);
    font-size: 0.9rem;
}

.texto-copiado {
    color: var(--dourado-escuro);
    font-size: 0.82rem;
    margin-top: 8px;
}

.card-cancelado {
    opacity: 0.6;
}

.tag-cancelado {
    font-size: 0.65rem;
    background: #FDEDEA;
    color: var(--erro);
    padding: 3px 9px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.acoes-agendamento {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--borda);
}

.link-acao {
    color: var(--dourado);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
}

.filtro-linha {
    margin-bottom: 4px;
}

.btn-cancelar {
    background: var(--erro);
}

.dia-selecionado {
    background: var(--dourado) !important;
    border-color: var(--dourado) !important;
}

.dia-selecionado .dia-numero,
.dia-selecionado .dia-status {
    color: var(--branco);
    font-weight: 600;
}

/* Neutraliza os estilos genéricos de label quando ele é um dia do calendário */
label.dia {
    margin: 0;
    padding: 0;
    font-size: inherit;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
    cursor: pointer;
}

label.dia .dia-status {
    text-transform: none;
    letter-spacing: normal;
}

/* Impede que o calendário embutido no formulário estoure a largura */
.card .calendario-grade,
.card .calendario-semana {
    max-width: 100%;
}

.acoes-topo {
    display: flex;
    gap: 14px;
    align-items: center;
}

.acoes-topo .link-acao,
.acoes-topo .btn-texto {
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1;
}

.filtro-datas {
    display: flex;
    gap: 10px;
}

.filtro-datas > div {
    flex: 1;
}

.historico-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--borda);
}

.historico-item:last-child {
    border-bottom: none;
}
/* ===== Utilitário: precisa vir por último para vencer as demais regras ===== */
.escondido {
    display: none !important;
}