/* agendamento/public/assets/area-style.css
   Compartilhado pela Área do Cliente (Minha Conta) e Área do
   Profissional. Prefixos: .agendc- (comum/cliente) e .agendprof-
   (exclusivo da agenda do profissional). */

.agendc-area, .agendprof-area {
    --agendc-primaria: #00363A;
    --agendc-acento: #00E5AC;
    --agendc-cinza-100: #f3f4f6;
    --agendc-cinza-200: #e5e7eb;
    --agendc-cinza-600: #4b5563;
    --agendc-radius: 10px;
    /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;*/
    color: var(--agendc-primaria);
    /*max-width: 640px;*/
}

.agendc-area *, .agendprof-area * {
    box-sizing: border-box;
}

/* ── Abas (Agendamentos / Meus pacotes / Meus dados) — 100% CSS ──
   Truque clássico radio+label: os 3 <input type="radio"> ficam ocultos
   (mas continuam focáveis/navegáveis por teclado) logo no topo de
   .agendc-area; cada <label for="..."> funciona como botão da aba; e o
   painel correspondente só aparece via seletor de irmão geral (~)
   quando aquele radio está :checked. Nenhum JavaScript envolvido. */
.agendc-tab-radio {
    position: absolute;
    left: -9999px;
}

.agendc-shell {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    margin-top: 20px;
}

.agendc-tabs-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 190px;
    flex-shrink: 0;
    position: sticky;
    top: 16px;
}

.agendc-tab-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--agendc-radius);
    font-size: 14px;
    font-weight: 600;
    color: var(--agendc-cinza-600);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.agendc-tab-link:hover {
    background: var(--agendc-cinza-100);
    color: var(--agendc-primaria);
}

.agendc-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f59e0b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.agendc-paineis {
    flex: 1;
    min-width: 0;
}

.agendc-painel {
    display: none;
}

/* Painel ativo + estado visual da aba ativa — um bloco de regras por
   aba, todas amarradas ao mesmo radio correspondente estar :checked. */
#agendc-tab-agendamentos:checked ~ .agendc-shell #agendc-painel-agendamentos,
#agendc-tab-pacotes:checked ~ .agendc-shell #agendc-painel-pacotes,
#agendc-tab-dados:checked ~ .agendc-shell #agendc-painel-dados {
    display: block;
    animation: agendc-fade 0.15s ease;
}

#agendc-tab-agendamentos:checked ~ .agendc-shell .agendc-tabs-nav label[for="agendc-tab-agendamentos"],
#agendc-tab-pacotes:checked ~ .agendc-shell .agendc-tabs-nav label[for="agendc-tab-pacotes"],
#agendc-tab-dados:checked ~ .agendc-shell .agendc-tabs-nav label[for="agendc-tab-dados"] {
    background: var(--agendc-primaria);
    color: #fff;
}

/* Indicador de foco pro teclado — o radio continua navegável por Tab
   mesmo estando visualmente escondido; isso destaca a aba equivalente. */
#agendc-tab-agendamentos:focus-visible ~ .agendc-shell .agendc-tabs-nav label[for="agendc-tab-agendamentos"],
#agendc-tab-pacotes:focus-visible ~ .agendc-shell .agendc-tabs-nav label[for="agendc-tab-pacotes"],
#agendc-tab-dados:focus-visible ~ .agendc-shell .agendc-tabs-nav label[for="agendc-tab-dados"] {
    outline: 2px solid var(--agendc-acento);
    outline-offset: 2px;
}

@keyframes agendc-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (max-width: 640px) {
    .agendc-shell {
        flex-direction: column;
        gap: 16px;
    }
    .agendc-tabs-nav {
        flex-direction: row;
        width: 100%;
        overflow-x: auto;
        position: static;
        padding-bottom: 6px;
        border-bottom: 1px solid var(--agendc-cinza-200);
    }
    .agendc-tab-link {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ── Cartão genérico (usado por pacotes e pelo formulário de dados) ── */
.agendc-cartao {
    background: #fff;
    border: 1px solid var(--agendc-cinza-200);
    border-radius: 14px;
    padding: 20px 22px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.agendc-secao-titulo {
    margin: 24px 0 10px;
    font-size: 15px;
}

.agendc-vazio {
    color: var(--agendc-cinza-600);
    font-size: 13px;
	margin-bottom: 18px;
}

.agendc-aviso, .agendc-notice {
    padding: 12px 16px;
    border-radius: var(--agendc-radius);
    font-size: 14px;
    margin-bottom: 16px;
}

.agendc-aviso {
    background: var(--agendc-cinza-100);
}

.agendc-notice-sucesso {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.agendc-notice-erro {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.agendc-lista, .agendprof-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.agendc-item, .agendprof-item {
    background: #fff;
    border: 1px solid var(--agendc-cinza-200);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.agendc-item {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.agendc-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}

.agendc-item-historico {
    opacity: 0.75;
}

.agendc-status {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--agendc-cinza-100);
    width: fit-content;
}

.agendc-status-agendado,
.agendc-status-confirmado { background: #dbeafe; color: #1e40af; }
.agendc-status-em_atendimento { background: #fef9c3; color: #854d0e; }
.agendc-status-finalizado { background: #dcfce7; color: #166534; }
.agendc-status-cancelado,
.agendc-status-nao_compareceu { background: #fee2e2; color: #991b1b; }
.agendc-status-reagendado { background: var(--agendc-cinza-100); color: var(--agendc-cinza-600); }

.agendc-item-acoes {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.agendc-btn {
    padding: 8px 14px;
    border-radius: var(--agendc-radius);
    font-size: 13px;
    font-weight: 600;
    border: 1.5px solid var(--agendc-cinza-200);
    background: #fff;
    color: var(--agendc-primaria);
    cursor: pointer;
    white-space: nowrap;
}

.agendc-btn-primario {
    background: var(--agendc-primaria);
    color: #fff;
    border-color: var(--agendc-primaria);
}

.agendc-btn-cancelar {
    color: #b91c1c;
    border-color: #fecaca;
}

.agendc-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* ── Info de pagamento (valor/forma) dentro de um item de agendamento ── */
.agendc-item-pagamento {
    font-size: 12px;
    color: var(--agendc-cinza-600);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.agendc-item-pagamento s {
    opacity: 0.6;
}

/* ── Meus Pacotes ─────────────────────────────────────────── */
.agendc-cartao-pacote {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.agendc-pacote-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.agendc-pacote-cabecalho strong {
    font-size: 15px;
}

.agendc-pacote-validade {
    font-size: 12px;
    color: var(--agendc-cinza-600);
}

.agendc-pacote-saldos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.agendc-pacote-saldo-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 5px;
}

.agendc-pacote-saldo-barra {
    height: 6px;
    border-radius: 999px;
    background: var(--agendc-cinza-100);
    overflow: hidden;
}

.agendc-pacote-saldo-barra > div {
    height: 100%;
    background: var(--agendc-acento);
    border-radius: 999px;
    transition: width 0.2s ease;
}

/* ── Área do Profissional ────────────────────────────────── */
.agendprof-cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.agendprof-cabecalho h3 {
    margin: 0;
}

.agendprof-item-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.agendprof-item-cliente {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.agendprof-telefone {
    font-size: 12px;
    color: var(--agendc-primaria);
    text-decoration: none;
}

.agendprof-obs {
    font-size: 12px;
    color: var(--agendc-cinza-600);
    background: var(--agendc-cinza-100);
    border-radius: 6px;
    padding: 6px 10px;
}

.agendprof-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

/* ── Cabeçalho logado / login nativo do WP ───────────────── */
.agendc-cabecalho-logado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    padding: 14px 18px;
    background: var(--agendc-cinza-100);
    border-radius: var(--agendc-radius);
}

.agendc-cabecalho-logado .agendc-vazio {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--agendc-primaria);
}

.agendc-btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.agendc-login-wrap p.login-remember,
.agendc-login-wrap p.login-submit {
    margin-top: 12px;
}

.agendc-login-wrap label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.agendc-login-wrap input[type="text"],
.agendc-login-wrap input[type="password"] {
    width: 100%;
    font-size: 16px;
    padding: 12px 14px;
    border: 1.5px solid var(--agendc-cinza-200);
    border-radius: var(--agendc-radius);
    font-family: inherit;
    margin-bottom: 14px;
}

.agendc-login-wrap .login-submit input[type="submit"] {
    padding: 12px 22px;
    border-radius: var(--agendc-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: var(--c1);
    color: #fff;
}

/* Mesmo visual do formulário de login acima, só que genérico — usado em
   qualquer outro formulário da Área do Cliente (ex.: "Meus dados"). */
.agendc-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.agendc-form input[type="text"],
.agendc-form input[type="email"],
.agendc-form input[type="tel"],
.agendc-form input[type="date"],
.agendc-form textarea {
    width: 100%;
    font-size: 16px;
    padding: 12px 14px;
    border: 1.5px solid var(--agendc-cinza-200);
    border-radius: var(--agendc-radius);
    font-family: inherit;
    margin-bottom: 14px;
    box-sizing: border-box;
}

.agendc-form .agendc-campo-desc {
    display: block;
    font-size: 12px;
    color: var(--agendc-cinza-400, #9ca3af);
    margin: -10px 0 14px;
}