/* * AppDatePicker — calendário do design system. * * Cartão branco, mês com setas, dias da semana abreviados e o dia escolhido * num círculo escuro com o número na cor de destaque (referência embarca.ai). * Tudo que é cor entra por variável, então o site pode trocar o destaque pela * cor da marca (`--adp-on-ink: var(--accent)`) sem tocar aqui. */ .adp { --adp-bg: #ffffff; --adp-ink: #1c1c1e; --adp-muted: #b9bcc1; --adp-week: #6b6f76; --adp-hover: #f1f2f4; --adp-on-bg: #111111; --adp-on-ink: #e6ff2f; --adp-today: #9a9ea6; --adp-radius: 18px; --adp-shadow: 0 12px 34px rgba(0, 0, 0, .18); box-sizing: border-box; width: 100%; max-width: 320px; padding: 14px 14px 12px; background: var(--adp-bg); color: var(--adp-ink); border-radius: var(--adp-radius); box-shadow: var(--adp-shadow); font: 15px/1.2 inherit; font-family: inherit; user-select: none; } .adp *, .adp *::before, .adp *::after { box-sizing: border-box; } /* Popover ancorado num input: sai do fluxo, por cima de tudo. */ .adp--pop { position: absolute; z-index: 9990; display: none; } .adp--pop.is-open { display: block; } .adp__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .adp__title { flex: 1; text-align: center; font-size: .95em; font-weight: 600; color: var(--adp-ink); text-transform: lowercase; } .adp__nav { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--adp-ink); font: 26px/1 inherit; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; padding-bottom: 3px; } .adp__nav:hover { background: var(--adp-hover); } .adp__nav:disabled { color: var(--adp-muted); cursor: default; background: transparent; } .adp__week, .adp__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; } .adp__week span { text-align: center; font-size: .78em; font-weight: 600; color: var(--adp-week); padding: 4px 0 8px; } .adp__blank { aspect-ratio: 1; } .adp__day { aspect-ratio: 1; width: 100%; border: 0; border-radius: 50%; background: transparent; color: var(--adp-ink); font: 600 .95em/1 inherit; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s; } .adp__day:hover { background: var(--adp-hover); } .adp__day:focus-visible { outline: 2px solid var(--adp-on-bg); outline-offset: 1px; } .adp__day.is-off { color: var(--adp-muted); cursor: default; font-weight: 500; } .adp__day.is-off:hover { background: transparent; } .adp__day.is-today:not(.is-on) { box-shadow: inset 0 0 0 1px var(--adp-today); } .adp__day.is-on, .adp__day.is-on:hover { background: var(--adp-on-bg); color: var(--adp-on-ink); font-weight: 700; } @media (max-width: 380px) { .adp { padding: 12px 10px 10px; } .adp__day { font-size: .9em; } } /* Modo escuro (, admin e painel): cartão grafite, dia escolhido em azul da marca. O site público não usa o atributo. */ :root[data-theme="dark"] .adp { --adp-bg: #1a1a1a; --adp-ink: #f5f5f5; --adp-muted: #5c5c5c; --adp-week: #8f8f8f; --adp-hover: #2b2b2b; --adp-on-bg: #4d6bff; --adp-on-ink: #ffffff; --adp-today: #8f8f8f; --adp-shadow: 0 12px 34px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08); }