/* Modal de marcação — controlos de data e hora claramente separados */

:root {
    /* Futuramente estes valores serão alteráveis em Definições. */
    --cor-marcacao-ocupada: #46543c;
    --cor-marcacao-texto: #ffffff;
    --cor-marcacao-servico: #d8e4d1;
}

.navegador-horario { display:grid; grid-template-columns:74px minmax(220px,1fr) 74px; align-items:center; gap:12px; margin-top:10px; width:100%; }
.mudar-dia { min-height:44px; padding:7px 8px; border:1px solid #3d5873; border-radius:10px; background:#17283a; color:#fff; cursor:pointer; font-size:13px; font-weight:700; }
#diaAnterior { justify-self:start; } #diaSeguinte { justify-self:end; }
.mudar-dia:hover,.mudar-dia:focus-visible { background:#203a55; border-color:#5c88b2; }
.horario-centro { min-width:0; text-align:center; }
#horarioMarcacao { margin:0 0 9px; color:#f5f5f5; font-size:15px; font-weight:700; }
.ajuste-hora { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; }
.hora-destaque { min-width:72px; color:#fff; font-size:24px; line-height:1; font-weight:800; letter-spacing:.5px; }
.mudar-hora { min-height:40px; padding:7px 12px; border:1px solid #466b91; border-radius:9px; background:#1b3550; color:#fff; cursor:pointer; font-size:13px; font-weight:800; white-space:nowrap; }
.mudar-hora:hover,.mudar-hora:focus-visible { background:#284d72; border-color:#6b9dca; }
.estado-disponibilidade { margin-top:9px; }
.celula-agenda { position:relative; overflow:visible; }
.marcacao-grelha,.marcacao-posicionada { background:var(--cor-marcacao-ocupada); }
.marcacao-posicionada { position:absolute; z-index:3; left:3px; right:3px; top:calc(3px + (var(--deslocamento) / 30) * 44px); height:max(18px,calc((var(--duracao) / 30) * 44px - 6px)); min-height:0; padding:3px 5px; cursor:pointer; }
.marcacao-posicionada strong { color:var(--cor-marcacao-texto); font-size:13px; line-height:1.15; }
.marcacao-posicionada span { color:var(--cor-marcacao-servico); font-size:12px; line-height:1.15; }

/* Formulário maior para uso principal em tablet. */
.form-marcacao-alargado { width:min(820px,calc(100vw - 32px)); max-width:820px; max-height:92vh; overflow-y:auto; }
.form-grid-duplo { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
.form-marcacao textarea { width:100%; resize:vertical; min-height:82px; }
.campo-opcional { color:#777; font-size:11px; font-weight:400; }
.estado-cliente { min-height:24px; margin:-2px 0 10px; padding:5px 8px; border-radius:8px; font-size:12px; }
.cliente-encontrado { color:#b9e9c0; background:rgba(57,112,67,.18); }
.cliente-novo { color:#b8c9dc; background:rgba(54,78,105,.18); }

/* Estado da visita: continua visível na agenda enquanto não for cancelada. */
.estado-concluída { outline:2px solid rgba(180,220,170,.45); }
.estado-faltou { background:#b00020; outline:2px solid rgba(255,90,90,.75); }

.modal-estado-conteudo { max-width:460px; }
.resumo-estado { margin:6px 0 0; color:#d7d7d7; font-size:14px; }
.estado-atual { margin:18px 0 12px; color:#d0d0d0; }
.estado-atual strong { color:#fff; text-transform:capitalize; }
.opcoes-estado { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.botao-estado { min-height:52px; border:1px solid #65725d; border-radius:10px; background:#46543c; color:#fff; font-size:15px; font-weight:700; cursor:pointer; }
.botao-estado:hover { filter:brightness(1.15); }
.botao-estado-secundario { background:#252525; border-color:#444; }
.nota-historico { margin:15px 0 0; color:#aaa; font-size:12px; line-height:1.4; }

@media (max-width:700px) {
    .form-grid-duplo { grid-template-columns:1fr; }
}

@media (max-width:620px) {
    .navegador-horario { grid-template-columns:58px minmax(180px,1fr) 58px; gap:7px; }
    .mudar-dia { font-size:11px; padding:6px 4px; }
    .mudar-hora { padding:7px 8px; font-size:12px; }
    .hora-destaque { min-width:62px; font-size:21px; }
    .opcoes-estado { grid-template-columns:1fr; }
    .form-marcacao-alargado { width:calc(100vw - 16px); }
}


/* Histórico apresentado antes de marcar cliente existente */
.modal-historico-cliente {
    max-width: 460px;
}

.historico-cliente-topo {
    margin-bottom: 18px;
    text-align: center;
}

.historico-cliente-topo h2 {
    margin-bottom: 6px;
}

.lista-historico-cliente {
    display: grid;
    gap: 10px;
}

.linha-historico-cliente {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(255,255,255,.06);
}

.linha-historico-cliente.historico-faltou {
    color: #ff3030;
}

.historico-sem-visitas {
    padding: 14px;
    text-align: center;
    opacity: .75;
}

.acoes-historico-cliente {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.acoes-historico-cliente .botao-marcar {
    min-width: 120px;
}

/* Edição rápida da duração de uma marcação */
.editar-duracao-marcacao {
    margin: 18px 0;
    padding: 15px;
    border: 1px solid #383838;
    border-radius: 10px;
    background: #171717;
}

.editar-duracao-marcacao h3 {
    margin: 0 0 12px;
}

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

.botao-duracao {
    min-height: 48px;
    border: 1px solid #4b5563;
    border-radius: 9px;
    background: #252525;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.botao-duracao.ativo {
    background: #315b82;
    border-color: #7fb3e3;
    outline: 2px solid #557da4;
}

#avisoDuracaoMarcacao {
    margin-top: 10px;
    line-height: 1.4;
}

@media (max-width: 620px) {
    .escolha-duracao {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Confirmação de sobreposição dentro do modal */
.aviso-sobreposicao {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #c89b16;
    border-radius: 10px;
    background: rgba(200, 155, 22, 0.14);
}

.aviso-sobreposicao strong {
    display: block;
    margin-bottom: 8px;
    font-size: 1.05rem;
}

.aviso-sobreposicao p {
    margin: 7px 0;
}

.acoes-sobreposicao {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 12px;
}

.botao-cancelar-sobreposicao,
.botao-confirmar-sobreposicao {
    min-height: 48px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
}

.botao-cancelar-sobreposicao {
    border: 1px solid #666;
    background: #292929;
    color: #fff;
}

.botao-confirmar-sobreposicao {
    border: 1px solid #d6a91d;
    background: #765d0b;
    color: #fff;
}

@media (max-width: 620px) {
    .acoes-sobreposicao {
        grid-template-columns: 1fr;
    }
}

/* Faixa visual do período em que duas marcações se sobrepõem */
.marcacao-posicionada {
    overflow: hidden;
}

.faixa-sobreposicao {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: calc((var(--conflito-inicio) / var(--marcacao-duracao)) * 100%);
    height: calc((var(--conflito-duracao) / var(--marcacao-duracao)) * 100%);
    min-height: 4px;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255, 204, 0, .72) 0,
            rgba(255, 204, 0, .72) 8px,
            rgba(210, 157, 0, .82) 8px,
            rgba(210, 157, 0, .82) 16px
        );
    border-top: 1px solid rgba(255, 224, 90, .95);
    border-bottom: 1px solid rgba(255, 224, 90, .95);
    pointer-events: none;
}

.marcacao-posicionada > strong {
    position: relative;
    z-index: 2;
}

/* Identificação da faixa de conflito */
.faixa-sobreposicao {
    display: flex;
    align-items: center;
    justify-content: center;
}

.texto-conflito {
    position: relative;
    z-index: 2;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(35, 27, 0, .72);
    color: #fff4b0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 800;
    letter-spacing: .3px;
    white-space: nowrap;
    pointer-events: none;
}

/* PAJO 20260918 — cores por estado da marcacao */
.marcacao-grelha.estado-concluída {
    background: #1565c0 !important;
    border-color: #1976d2 !important;
    outline: none !important;
    color: #fff !important;
}

.marcacao-grelha.estado-faltou {
    background: #b00020 !important;
    border-color: #d32f2f !important;
    outline: none !important;
    color: #fff !important;
}


/* Agenda: cliente / compromisso pessoal */
.tipo-agenda {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-top: 10px;
    padding: 4px;
    border: 1px solid #333;
    border-radius: 10px;
    background: #111;
}

.tipo-agenda-btn {
    min-width: 100px;
    min-height: 38px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #aaa;
    font-weight: 700;
    cursor: pointer;
}

.tipo-agenda-btn.ativo {
    background: #315b82;
    color: #fff;
}

.bloqueio-pessoal {
    background: #5b3f78 !important;
    border: 1px solid #9870bd !important;
    outline: none !important;
}

.bloqueio-pessoal > span {
    display: block;
    margin-top: 2px;
    color: #eadcff !important;
    font-size: 10px !important;
    font-weight: 700;
}

.nota-pessoal {
    margin: 12px 0 0;
    color: #cbb9df;
    font-size: 12px;
}

.repeticao-semanal {
    display: grid;
    grid-template-columns: 1fr minmax(160px, 220px);
    gap: 12px;
    align-items: end;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #343434;
    border-radius: 10px;
    background: #121212;
}

.check-repeticao {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 9px;
    min-height: 44px;
}

.check-repeticao input {
    width: 20px !important;
    height: 20px;
    margin: 0;
}

.form-eliminar-bloqueio {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #333;
}

.botao-eliminar-bloqueio {
    width: 100%;
    min-height: 46px;
    border: 1px solid #8b3030;
    border-radius: 9px;
    background: #451919;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 620px) {
    .repeticao-semanal {
        grid-template-columns: 1fr;
    }
}


.form-cancelar-serie {
    margin-top: 12px;
}

.botao-cancelar-serie {
    width: 100%;
    min-height: 46px;
    border: 1px solid #8a6526;
    border-radius: 9px;
    background: #4a3514;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}