/* ───────────────────────────────────────────── EliEntradaDataHora — Popover do calendário ───────────────────────────────────────────── */ .eli-dh__popover { position: fixed; z-index: 99999; background: var(--cor-eli-superficie, #fff); border: 1.5px solid var(--cor-eli-borda, #D5D8CC); border-radius: 14px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 10px 30px -4px rgba(0, 0, 0, 0.12); overflow: hidden; min-width: 300px; transform-origin: top left; } .eli-dh-pop-enter-active, .eli-dh-pop-leave-active { transition: opacity 0.16s ease, transform 0.16s ease; } .eli-dh-pop-enter-from, .eli-dh-pop-leave-to { opacity: 0; transform: translateY(-6px) scale(0.97); } .eli-dh__cal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; background: linear-gradient(135deg, var(--cor-eli-primaria, #688C00) 0%, var(--cor-eli-primaria-acao, #8AAF00) 100%); } .eli-dh__cal-nav { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: rgba(255, 255, 255, 0.18); border-radius: 8px; cursor: pointer; color: #fff; transition: background 0.15s; padding: 0; } .eli-dh__cal-nav:hover { background: rgba(255, 255, 255, 0.30); } .eli-dh__cal-nav svg { width: 18px; height: 18px; } .eli-dh__cal-titulo { display: flex; flex-direction: column; align-items: center; gap: 2px; } .eli-dh__seletores { display: flex; align-items: center; gap: 6px; } .eli-dh__select { border: none; background: rgba(255, 255, 255, 0.14); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; padding: 4px 8px; border-radius: 6px; cursor: pointer; outline: none; transition: background 0.15s; appearance: none; -webkit-appearance: none; } .eli-dh__select:hover { background: rgba(255, 255, 255, 0.26); } .eli-dh__select option { background: var(--cor-eli-superficie, #fff); color: var(--cor-eli-neutro-escuro, #3E4436); font-weight: 600; } .eli-dh__cal-body { padding: 12px 14px 14px; } .eli-dh__cal-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 6px; } .eli-dh__cal-dia-sem { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--cor-eli-neutro, #5E6553); text-transform: uppercase; letter-spacing: 0.04em; height: 28px; } .eli-dh__cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .eli-dh__cal-dia { display: flex; align-items: center; justify-content: center; height: 36px; border: none; border-radius: 8px; background: none; font-size: 13px; font-weight: 500; color: var(--cor-eli-neutro-escuro, #3E4436); cursor: pointer; transition: background 0.12s, color 0.12s; padding: 0; font-family: inherit; } .eli-dh__cal-dia:hover:not(:disabled):not(.eli-dh__cal-dia--fora):not(.eli-dh__cal-dia--selecionado) { background: var(--cor-eli-primaria-bg, #EEF3D0); color: var(--cor-eli-primaria, #688C00); } .eli-dh__cal-dia--fora { color: var(--cor-eli-borda-forte, #B5BAA8); cursor: default; } .eli-dh__cal-dia--hoje { color: var(--cor-eli-primaria, #688C00); font-weight: 700; position: relative; } .eli-dh__cal-dia--hoje::after { content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--cor-eli-primaria, #688C00); } .eli-dh__cal-dia--selecionado { background: var(--cor-eli-primaria, #688C00); color: #fff; font-weight: 700; } .eli-dh__cal-dia--selecionado.eli-dh__cal-dia--hoje::after { background: #fff; } .eli-dh__cal-dia--desabilitado { opacity: 0.32; cursor: not-allowed; } .eli-dh__hora-secao { border-top: 1px solid var(--cor-eli-borda, #D5D8CC); padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--cor-eli-fundo-suave, #F8F9F5); } .eli-dh__hora-rotulo { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--cor-eli-neutro-escuro, #3E4436); } .eli-dh__hora-icone { width: 16px; height: 16px; color: var(--cor-eli-primaria, #688C00); flex-shrink: 0; } .eli-dh__hora-campos { display: flex; align-items: center; gap: 6px; } .eli-dh__hora-select { height: 32px; padding: 2px 6px; border: 1.5px solid var(--cor-eli-borda, #D5D8CC); border-radius: 6px; background: var(--cor-eli-superficie, #fff); text-align: center; font-size: 13px; font-weight: 600; font-family: inherit; color: var(--cor-eli-neutro-escuro, #3E4436); cursor: pointer; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .eli-dh__hora-select:focus { border-color: var(--cor-eli-primaria, #688C00); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cor-eli-primaria, #688C00) 14%, transparent); } .eli-dh__hora-select option { background: var(--cor-eli-superficie, #fff); color: var(--cor-eli-neutro-escuro, #3E4436); font-weight: 600; } .eli-dh__hora-sep { font-size: 16px; font-weight: 700; color: var(--cor-eli-neutro, #5E6553); line-height: 1; } .eli-dh__btn-agora { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 10px; border: 1px solid var(--cor-eli-primaria, #688C00); border-radius: 6px; background: color-mix(in srgb, var(--cor-eli-primaria, #688C00) 10%, transparent); color: var(--cor-eli-primaria, #688C00); font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; } .eli-dh__btn-agora:hover { background: var(--cor-eli-primaria, #688C00); color: #fff; } .eli-dh__rodape { padding: 10px 14px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--cor-eli-borda, #D5D8CC); } .eli-dh__rodape-acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; } .eli-dh__btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 16px; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.14s, opacity 0.14s; } .eli-dh__btn--cancelar { background: var(--cor-eli-fundo, #F2F3EE); color: var(--cor-eli-neutro, #5E6553); } .eli-dh__btn--cancelar:hover { background: var(--cor-eli-borda, #D5D8CC); } .eli-dh__btn--confirmar { background: var(--cor-eli-primaria, #688C00); color: #fff; } .eli-dh__btn--confirmar:hover { background: var(--cor-eli-primaria-escura, #4A6500); }