/* Central de Atividades · tinta, ocre e papel (IBM Plex), como o Arrenda e os protótipos. */
:root {
  --ink: #1d2433; --paper: #f5f2ea; --card: #ffffff; --line: #ddd6c8; --soft-line: #eee8dc; --muted: #5a6070; --muted-strong: #3f4452;
  --ochre: #8a5200; --ochre-ink: #5c3a00; --ochre-bg: #fff1d6; --gold: #d9a441;
  --late: #8f2219; --late-line: #a3261e; --late-bg: #fbe9e7; --wait-bg: #ecebe6; --plan: #203a5c; --plan-line: #2f5d8a; --plan-bg: #e8eef7;
  --ok: #22543a; --ok-bg: #e3f0e7;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'IBM Plex Sans', system-ui, sans-serif; line-height: 1.45; }
a { color: var(--ink); text-underline-offset: .18em; } a:hover { color: var(--ochre); }
button, input, select, textarea { font: inherit; color: inherit; }
button, .button { min-height: 44px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 6px; background: var(--ink); color: #fff; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; }
.button:hover { color: #fff; }
input:not([type=checkbox]):not([type=radio]), select, textarea { min-height: 44px; padding: 8px 12px; border: 1px solid #b9b1a0; border-radius: 6px; background: #fbfaf6; max-width: 100%; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.meta { color: var(--muted); font-size: 14px; margin: 2px 0 0; }
.empty { color: var(--muted); margin: 4px 0; }
.ref { font-family: 'IBM Plex Mono', monospace; font-size: 13px; }

.top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 12px 32px; background: var(--ink); color: var(--paper); }
.top a { color: #c9ccd4; text-decoration: none; padding: 10px 8px; }
.top a[aria-current] { color: var(--paper); border-bottom: 2px solid var(--gold); }
.top .brand { color: var(--paper); font-weight: 600; font-size: 17px; padding-left: 0; }
.top nav { display: flex; flex-wrap: wrap; gap: 4px; }
.orgs { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.orgs a { border: 1px solid #5d6577; border-radius: 999px; padding: 6px 12px; }
.orgs a[aria-current] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.who { font-size: 14px; color: #c9ccd4; display: flex; align-items: center; gap: 6px; }
.who button { min-height: 36px; padding: 0 10px; background: transparent; border-color: #5d6577; }

main { max-width: 1360px; margin: 0 auto; padding: 24px 32px 64px; }
.capture { display: flex; flex-wrap: wrap; gap: 8px; margin: -24px -32px 24px; padding: 16px 32px; background: var(--card); border-bottom: 1px solid var(--line); }
.capture input { flex: 1 1 420px; }
.columns { display: flex; flex-wrap: wrap; gap: 32px; }
.main-column { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.side-column { flex: 1 1 300px; display: flex; flex-direction: column; gap: 20px; }
.heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.heading h1, .heading h2, .heading p { margin: 0; }
h1 { font-size: 28px; font-weight: 600; margin: 0 0 8px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; }
.panel h2 { font-size: 17px; font-weight: 600; margin: 0 0 12px; }
.flash { margin: 0; padding: 10px 14px; background: var(--ok-bg); color: var(--ok); border-radius: 6px; }
.warnings { padding: 10px 14px 10px 30px; background: var(--ochre-bg); color: var(--ochre-ink); border-radius: 6px; }
p.warnings { padding-left: 14px; }

.day-section h2 { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; }
.s-late h2 { color: var(--late-line); } .s-today h2 { color: #7a4a00; } .s-wait h2 { color: var(--muted); }
.activities { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.activity { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.activity form { margin: 0; }
.activity .what { flex: 1 1 280px; min-width: 0; }
.activity .title { margin: 0; font-weight: 500; }
.activity .title a { text-decoration: none; } .activity .title a:hover { text-decoration: underline; }
.check { min-width: 44px; background: #fff; color: var(--ochre); border: 1.5px solid var(--ochre); font-weight: 600; }
.check.done { background: var(--ochre); color: #fff; }
.due { padding: 4px 10px; border-radius: 4px; font-size: 14px; white-space: nowrap; background: var(--wait-bg); color: var(--muted-strong); }
.tone-late .due { background: var(--late-bg); color: var(--late); } .tone-today .due { background: var(--ochre-bg); color: var(--ochre-ink); }
.tone-planned .due { background: var(--plan-bg); color: var(--plan); } .tone-done .due { background: var(--ok-bg); color: var(--ok); }
.tone-done .title, .tone-neutral.activity .title { color: var(--muted); }
.tone-done .title a { text-decoration: line-through; }
.more { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.more details { position: relative; }
.more summary, details.add > summary, details > summary { cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid #b9b1a0; border-radius: 6px; background: #fff; list-style: none; }
.more details[open] { flex-basis: 100%; }
.more details form, details form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 10px; }
fieldset { border: 1px solid var(--soft-line); border-radius: 6px; display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 10px 12px; margin: 0; }
legend { font-weight: 500; padding: 0 4px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
fieldset label, label:has(> input[type=checkbox]) { flex-direction: row; align-items: center; gap: 6px; }
.stack, details form.stack { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 12px; max-width: 720px; }
.stack input:not([type=checkbox]):not([type=radio]), .stack select, .stack textarea { width: min(100%, 520px); }
.stack > label { align-self: stretch; }
.stack .row input, .stack .row select { width: auto; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
details.add { margin-top: 14px; }

.agenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.agenda li { display: flex; gap: 12px; } .agenda p { margin: 0; }
.time { font-family: 'IBM Plex Mono', monospace; font-size: 14px; min-width: 48px; color: var(--muted); }
.plain { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }

.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters a { border: 1px solid #b9b1a0; border-radius: 999px; padding: 8px 14px; text-decoration: none; background: #fff; }
.filters a[aria-current] { background: var(--ink); color: #fff; border-color: var(--ink); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--muted); border-radius: 8px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.card.tone-late { border-top-color: var(--late-line); } .card.tone-today { border-top-color: var(--ochre); } .card.tone-planned { border-top-color: var(--plan-line); }
.card h2 { font-size: 18px; margin: 0; } .card h2 a { text-decoration: none; }
.card-top { display: flex; justify-content: space-between; gap: 8px; margin: 0; font-size: 13px; color: var(--muted); }
.next { padding: 10px 12px; background: var(--wait-bg); border-radius: 6px; } .next p { margin: 0; }
.tone-late .next { background: var(--late-bg); } .tone-today .next { background: var(--ochre-bg); } .tone-planned .next { background: var(--plan-bg); }
.next .label { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-strong); }
.next .when { font-size: 14px; color: var(--muted-strong); }
.progress { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted-strong); }
.progress progress { flex: 1; height: 6px; accent-color: var(--ochre); }

.subject-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: start; margin-bottom: 24px; }
.subject-head h1 { margin: 4px 0; }
.timeline { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.timeline li { padding-left: 14px; border-left: 3px solid var(--line); } .timeline p { margin: 2px 0 0; }
.timeline .k-nota { border-color: var(--ochre); } .timeline .k-evento { border-color: var(--plan-line); } .timeline .k-feita { border-color: #2e6b45; }
.note textarea { width: 100%; }
.links { margin: 0; }

.sign-in { max-width: 32rem; margin: 10vh auto; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 32px; }

@media (max-width: 40rem) {
  .top, main { padding-left: 16px; padding-right: 16px; }
  .capture { margin: -24px -16px 20px; padding: 12px 16px; }
  .orgs { margin-left: 0; }
}

/* F3 · prazos, agenda e configuração */
.badge { display: inline-block; padding: 1px 8px; border-radius: 4px; background: var(--late-bg); color: var(--late); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; vertical-align: 2px; }
.activity.is-deadline { border-left: 4px solid var(--late-line); }
.button-light { min-height: 40px; padding: 0 12px; border: 1px solid #b9b1a0; border-radius: 6px; background: #fff; color: var(--ink); display: inline-flex; align-items: center; text-decoration: none; cursor: pointer; }
.button-light:hover { color: var(--ochre); }
form.inline { display: inline; margin-left: 8px; }
.deadlines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.deadline { border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 8px; padding: 12px 14px; }
.deadline p { margin: 4px 0 0; }
.deadline.tone-late { border-left-color: var(--late-line); } .deadline.tone-today { border-left-color: var(--ochre); } .deadline.tone-planned { border-left-color: var(--plan-line); } .deadline.tone-done { border-left-color: #2e6b45; }
.deadline-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.deadline-top .title { margin: 0; font-weight: 500; }
.deadline .due, .side-deadlines .due { padding: 2px 8px; border-radius: 4px; font-size: 13px; background: var(--plan-bg); color: var(--plan); }
.tone-late .due { background: var(--late-bg); color: var(--late); } .tone-today .due { background: var(--ochre-bg); color: var(--ochre-ink); }
.deadline details { margin-top: 8px; }
.side-deadlines .plain { padding-left: 0; list-style: none; gap: 10px; }
.result { font-size: 20px; margin: 4px 0; }

.week-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.agenda-filters { margin: 12px 0 4px; }
.agenda-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.agenda-day { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px; min-height: 160px; min-width: 0; }
.agenda-day h2 { font-size: 14px; font-weight: 600; margin: 0 0 8px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 6px; }
.agenda-day h2 span { font-family: 'IBM Plex Mono', monospace; color: var(--muted); font-weight: 500; }
.agenda-day.is-today { border: 2px solid var(--ochre); }
.agenda-day.is-weekend, .agenda-day.is-closed { background: #efebe2; }
.day-note { margin: 0 0 6px; font-size: 12px; color: var(--ochre-ink); background: var(--ochre-bg); border-radius: 4px; padding: 2px 6px; }
.day-note.vacation { color: var(--muted-strong); background: var(--wait-bg); }
.agenda-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.agenda-items .item { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 6px; background: var(--plan-bg); font-size: 14px; line-height: 1.3; overflow-wrap: break-word; hyphens: auto; }
.agenda-items .item p { margin: 0; font-size: 12px; }
.agenda-items .item a { text-decoration: none; } .agenda-items .item a:hover { text-decoration: underline; }
.agenda-items .task { background: var(--wait-bg); } .agenda-items .waiting { background: #f1efe9; border: 1px dashed #b9b1a0; }
.agenda-items .deadline-item { background: var(--late-bg); border-left: 3px solid var(--late-line); }
.agenda-items .time { min-width: 0; font-size: 12px; }

@media (max-width: 75rem) {
  .agenda-week { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
}
@media (max-width: 40rem) {
  .agenda-week { grid-template-columns: 1fr; }
  .agenda-day { min-height: 0; }
}

/* F4 · fontes e chaves da API */
.source { border-top: 1px solid var(--soft-line); padding-top: 12px; margin-top: 12px; }
.source h3 { font-size: 16px; margin: 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.source details { margin-top: 8px; }
.revoked { color: var(--muted); text-decoration: line-through; }
.once { border: 2px solid var(--ochre); background: var(--ochre-bg); margin-bottom: 20px; }
.secret { font-family: 'IBM Plex Mono', monospace; font-size: 14px; word-break: break-all; background: #fff; padding: 6px 8px; border-radius: 4px; display: inline-block; user-select: all; }
