/* Dora — controles e avisos próprios para TODA a web (/app, /agenda, /agendar, login).
   Nada desenhado pelo sistema operacional: lista, data/hora, cor, dica, checkbox, rolagem.
   Tokens --dc-* usam os do /app e caem nos da /agenda antiga. Componentes: app-controls.js. */
:root {
    --dc-pop: var(--ameixa, var(--bg-elev, #141838));
    --dc-hover: var(--ameixa-2, var(--bg-elev-2, #1c2150));
    --dc-field: var(--noite, var(--bg, #0b0d24));
    --dc-border: var(--linha-forte, var(--border-strong, rgba(200,208,255,.22)));
    --dc-line: var(--linha, var(--border, rgba(200,208,255,.10)));
    --dc-text: var(--tinta, var(--text, #eef0ff));
    --dc-muted: var(--tinta-2, var(--text-dim, #a3a9d6));
    --dc-accent: var(--lavanda, var(--violet-2, #8e95ff));
    --dc-on-accent: var(--lavanda-tinta, #ffffff);
    --dc-ok: var(--hortela, var(--teal, #7fe3c4));
    --dc-r-s: var(--raio-s, var(--radius-sm, 8px));
    --dc-r-m: var(--raio-m, var(--radius, 14px));
    --dc-focus: var(--foco, 0 0 0 3px rgba(110, 130, 255, .75));
}
.dctl-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; }
.dsel {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; width: auto; min-width: 140px; min-height: 40px; padding: 0 12px;
    border-radius: var(--dc-r-s); border: 1px solid var(--dc-border); background: var(--dc-field); color: var(--dc-text); text-align: left; cursor: pointer;
}
.dsel::after { content: ""; width: 9px; height: 9px; flex: none; border-right: 2px solid var(--dc-muted); border-bottom: 2px solid var(--dc-muted); transform: translateY(-2px) rotate(45deg); }
.ddate::after { width: 16px; height: 16px; border: 2px solid var(--dc-muted); border-radius: 4px; border-top-width: 5px; transform: none; }
.dsel[aria-expanded="true"] { border-color: var(--dc-accent); }
.dsel:disabled { opacity: .55; cursor: default; }
.dsel.is-empty .dsel__text { color: var(--dc-muted); }
.dsel__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field .dsel { width: 100%; min-height: 44px; }
.setting-row .dsel, .task-add .dsel, .cal-bar .dsel { width: auto; min-width: 200px; }
.dlist:focus-visible { box-shadow: none; }
.dpick__head strong { text-transform: none; }
.dpop {
    position: absolute; z-index: 1000; max-height: 320px; overflow: auto; padding: 6px;
    border-radius: var(--dc-r-m); border: 1px solid var(--dc-border); background: var(--dc-pop); color: var(--dc-text);
    box-shadow: 0 16px 48px rgba(5, 7, 26, 0.35);
}
dialog .dpop { position: fixed; }
.dlist { list-style: none; margin: 0; padding: 0; outline: none; }
.dlist [role="option"] { padding: 9px 12px; border-radius: var(--dc-r-s); cursor: pointer; }
.dlist [role="option"]:hover, .dlist [role="option"].is-active { background: var(--dc-hover); }
.dlist [role="option"][aria-selected="true"] { color: var(--dc-accent); font-weight: 700; }
.dlist [role="option"][aria-disabled="true"] { opacity: .45; cursor: default; }
.dpick { width: 300px; max-height: none; }
.dpick__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 8px; }
.dpick__nav, .dpick__day, .dpick__time, .dpick__link { border: 0; background: none; color: inherit; cursor: pointer; border-radius: var(--dc-r-s); }
.dpick__nav { width: 36px; height: 36px; font-size: 20px; }
.dpick__nav:hover, .dpick__day:hover, .dpick__time:hover { background: var(--dc-hover); }
.dpick__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dpick__dow { text-align: center; font-size: 12px; color: var(--dc-muted); padding: 4px 0; text-transform: uppercase; }
.dpick__day { height: 36px; font-variant-numeric: tabular-nums; }
.dpick__day.is-out { color: var(--dc-muted); opacity: .6; }
.dpick__day.is-today { box-shadow: inset 0 0 0 1px var(--dc-ok); }
.dpick__day.is-sel { background: var(--dc-accent); color: var(--dc-on-accent); font-weight: 700; }
.dpick__times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-height: 180px; overflow: auto; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--dc-line); }
.dpick__time { padding: 7px 0; font-variant-numeric: tabular-nums; }
.dpick__time.is-sel { background: var(--dc-ok); color: var(--dc-field); font-weight: 700; }
.dpick__foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--dc-line); }
.dpick__link { color: var(--dc-accent); padding: 6px 8px; font-weight: 700; }
.dswatches { display: flex; gap: 10px; flex-wrap: wrap; }
.dswatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; background: var(--sw); cursor: pointer; }
.dswatch[aria-checked="true"] { border-color: var(--dc-text); box-shadow: 0 0 0 3px var(--dc-pop) inset; }
.dtip { position: absolute; z-index: 2000; max-width: 260px; padding: 6px 10px; border-radius: var(--dc-r-s); background: var(--dc-text); color: var(--dc-field); font-size: 13px; pointer-events: none; }
input[type="checkbox"]:not(.switch) {
    appearance: none; -webkit-appearance: none; width: 20px; height: 20px; flex: none; margin: 0; cursor: pointer;
    border-radius: 6px; border: 2px solid var(--dc-border); background: var(--dc-field); display: inline-grid; place-content: center;
}
input[type="checkbox"]:not(.switch)::after { content: ""; width: 10px; height: 6px; border-left: 2.5px solid transparent; border-bottom: 2.5px solid transparent; transform: translateY(-1px) rotate(-45deg); }
input[type="checkbox"]:not(.switch):checked { background: var(--cor, var(--dc-accent)); border-color: var(--cor, var(--dc-accent)); }
input[type="checkbox"]:not(.switch):checked::after { border-color: var(--dc-on-accent); }
input[type="checkbox"]:not(.switch):focus-visible { box-shadow: var(--dc-focus); }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
details[open] > summary::before { transform: rotate(45deg); }
::selection { background: var(--dc-accent); color: var(--dc-on-accent); }
input:-webkit-autofill { -webkit-text-fill-color: var(--dc-text); box-shadow: 0 0 0 100px var(--dc-field) inset; caret-color: var(--dc-text); }
html { scrollbar-color: var(--dc-border) transparent; scrollbar-width: thin; }
* { scrollbar-color: var(--dc-border) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--dc-border); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--dc-muted); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
input, textarea { caret-color: var(--dc-accent); }