/* A Diretoria (demo/diretoria.js): a reunião em conversa, as decisões e as metas.
   Só variáveis de cor: as da função e dos avatares ficam aqui no :root, o resto vem de tokens.css/demo.css,
   para o tema escuro trocar tudo num lugar só. */

:root {
  /* uma cor por cadeira */
  --dr-fin: #2F6FB5;
  --dr-com: #C2562B;
  --dr-ops: #3D8B5A;
  --dr-cli: #8A4FB0;
  --dr-ceo: #0E6E72;
  /* avatares desenhados */
  --dr-pele-1: #F3D2B8; --dr-pele-2: #E8B993; --dr-pele-3: #B97A52; --dr-pele-4: #8A5638;
  --dr-cab-1: #3B2A20; --dr-cab-2: #1E1714; --dr-cab-3: #8C5A2E; --dr-cab-4: #5A3A2A;
  --dr-traco: #2A1E18;
  --dr-roupa-luz: rgba(255,255,255,.18);
  /* estados */
  --dr-ok: var(--pos);
  --dr-risco: #C98512;
  --dr-fora: var(--neg);
  --dr-ok-bg: rgba(46,125,79,.1);
  --dr-risco-bg: rgba(201,133,18,.13);
  --dr-fora-bg: rgba(179,64,43,.1);
  --dr-trilho: var(--paper-3);
  --dr-bal: var(--paper-2);
  --dr-sombra: 0 10px 30px -18px rgba(11,15,16,.35);
}

/* ---------------- avatar ---------------- */
.dr-av { --t: 36px; position: relative; flex: none; display: inline-grid; width: var(--t); height: var(--t); border-radius: 50%; }
.dr-av svg { width: 100%; height: 100%; display: block; border-radius: 50%; }
.dr-av-f { fill: color-mix(in srgb, var(--c) 22%, var(--paper)); }
.dr-av-r { fill: var(--c); }
.dr-av.mini { margin-left: auto; }

/* ---------------- a reunião ---------------- */
.dr-reu { padding: 20px; overflow: hidden; }
.dr-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.dr-topo h2 { font-size: 17px; font-weight: var(--w-strong); letter-spacing: -.01em; }
.dr-topo p { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.dr-ctl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dr-bt { height: 32px; min-width: 32px; padding: 0 10px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: var(--w-medium); color: var(--ink-2); background: var(--paper); box-shadow: 0 0 0 1px var(--hair-2); transition: background-color var(--d-xs) var(--e-ui), color var(--d-xs) var(--e-ui); }
.dr-bt:hover { color: var(--ink); background: var(--paper-2); }
.dr-bt[hidden], .dr-vel[hidden] { display: none; }
.dr-vel { display: inline-flex; padding: 2px; border-radius: var(--r-pill); background: var(--paper-2); box-shadow: 0 0 0 1px var(--hair); }
.dr-vel button { height: 28px; min-width: 34px; padding: 0 8px; border-radius: var(--r-pill); font: 500 12px/1 var(--mono); color: var(--ink-3); }
.dr-vel button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--hair-2), 0 1px 2px rgba(11,15,16,.08); }

/* a mesa: os cinco assentos, quem fala acende */
.dr-mesa { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 18px 0 6px; padding: 14px 8px 18px; border-radius: var(--r-3); background: linear-gradient(180deg, var(--paper-2), var(--paper)); box-shadow: inset 0 0 0 1px var(--hair); }
.dr-tampo { position: absolute; left: 8%; right: 8%; bottom: 10px; height: 6px; border-radius: var(--r-pill); background: var(--dr-trilho); }
.dr-ass { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; transition: transform var(--d-md) var(--e-out), opacity var(--d-md) var(--e-ui); }
.dr-ass b { margin-top: 8px; font-size: 13px; font-weight: var(--w-strong); line-height: 1.2; }
.dr-ass > span:not(.dr-av) { font-size: 11.5px; color: var(--ink-3); line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.dr-ass .dr-av { box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--hair-2); transition: box-shadow var(--d-md) var(--e-ui); }
.dr-mesa:has(.fala) .dr-ass:not(.fala) { opacity: .55; }
.dr-ass.fala { transform: translateY(-3px); }
.dr-ass.fala .dr-av { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--c); }
.dr-ass.fala .dr-av::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--c); animation: dr-pulsa 1.4s var(--e-out) infinite; }
.dr-ass.fala b { color: var(--c); }
@keyframes dr-pulsa { from { transform: scale(1); opacity: .8; } to { transform: scale(1.35); opacity: 0; } }

/* o consenso */
.dr-cons { display: flex; align-items: center; gap: 10px; margin: 14px 0 16px; font-size: 12.5px; }
.dr-cons > span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.dr-cons i { flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--dr-trilho); overflow: hidden; }
.dr-cons i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--dr-risco), var(--teal)); transition: width var(--d-xl) var(--e-out); }
.dr-cons em { font-style: normal; font-weight: var(--w-medium); color: var(--ink-2); min-width: 9.5em; text-align: right; font-variant-numeric: tabular-nums; }

.dr-g { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }

/* o chat */
.dr-chat { display: flex; flex-direction: column; gap: 14px; max-height: 620px; min-height: 260px; overflow-y: auto; padding: 4px 6px 8px 0; scrollbar-width: thin; overscroll-behavior: contain; }
.dr-sep { display: flex; align-items: center; gap: 10px; margin: 4px 0 -2px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); animation: dr-surge var(--d-lg) var(--e-out) both; }
.dr-sep::before, .dr-sep::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.dr-msg { display: flex; gap: 10px; align-items: flex-start; animation: dr-surge var(--d-lg) var(--e-out) both; }
.dr-msg-c { flex: 1; min-width: 0; }
.dr-msg-h { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 1px 0 4px 2px; }
.dr-msg-h b { font-size: 13.5px; font-weight: var(--w-strong); color: var(--c); }
.dr-msg-h span { font-size: 12px; color: var(--ink-3); }
.dr-msg-h time { margin-left: auto; font: 500 10.5px/1 var(--mono); color: var(--ink-3); }
.dr-bal { position: relative; padding: 11px 13px; border-radius: 4px 16px 16px 16px; background: var(--dr-bal); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--c) 70%, transparent); font-size: 13.5px; line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.dr-bal p b { color: var(--ink); font-weight: var(--w-strong); }
.dr-prop { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.dr-prop li { font-size: 12px; font-weight: var(--w-medium); color: var(--ink); padding: 3px 9px; border-radius: var(--r-pill); background: var(--paper); box-shadow: 0 0 0 1px var(--hair-2); }
.dr-prop li::before { content: "propõe · "; color: var(--ink-3); font-weight: var(--w-regular); }
.dr-men { font-weight: var(--w-strong); color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); padding: 0 4px; border-radius: 4px; }
.dr-cita { display: flex; align-items: center; gap: 6px; margin: -2px 0 8px; padding: 5px 8px; border-radius: 8px; font-size: 12px; color: var(--ink-3); background: var(--paper); box-shadow: inset 2px 0 0 var(--c); }
.dr-cita svg { flex: none; color: var(--c); }
.dr-cita span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-cita b { color: var(--c); font-weight: var(--w-strong); }
.dr-reage { display: inline-flex; align-items: center; gap: 4px; margin: 6px 0 0 6px; padding: 2px 8px 2px 6px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: var(--w-medium); color: var(--c); background: var(--paper); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); animation: dr-pop var(--d-lg) var(--e-out) .5s both; }
.dr-msg.ceo .dr-bal { background: var(--teal-soft); max-width: none; }

/* digitando… */
.dr-dig { display: flex; align-items: center; gap: 10px; animation: dr-surge var(--d-md) var(--e-out) both; }
.dr-dig-b { display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 4px 14px 14px 14px; background: var(--dr-bal); }
.dr-dig-b i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); animation: dr-pt 1.1s infinite ease-in-out; }
.dr-dig-b i:nth-child(2) { animation-delay: .15s; } .dr-dig-b i:nth-child(3) { animation-delay: .3s; }
.dr-dig em { font-style: normal; font-size: 12px; color: var(--ink-3); }
@keyframes dr-pt { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes dr-surge { from { opacity: 0; transform: translateY(8px); } }
@keyframes dr-pop { from { opacity: 0; transform: scale(.7); } 70% { transform: scale(1.06); } }

/* o cartão do plano da CEO */
.dr-plano { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--paper); box-shadow: 0 0 0 1px var(--hair), var(--dr-sombra); }
.dr-plano-t { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--hair); }
.dr-plano-t span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-ink); }
.dr-plano-t b { font-size: 13.5px; color: var(--ink); }
.dr-plano ol { list-style: none; margin: 0; padding: 0; counter-reset: dr; }
.dr-plano li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--hair); font-size: 13px; color: var(--ink); line-height: 1.35; }
.dr-plano li > span:not(.dr-av) { flex: 1; min-width: 0; }
.dr-plano li em { font-style: normal; font: 500 11px/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.dr-plano-a { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; height: 34px; padding: 0 14px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-size: 13px; font-weight: var(--w-strong); }
.dr-plano-a svg { transform: rotate(-90deg); }
@media (min-width: 981px) { .dr-plano-a svg { transform: rotate(0); } }

/* a coluna das decisões */
.dr-lado { position: sticky; top: 12px; padding: 14px; border-radius: var(--r-3); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--hair); min-width: 0; }
.dr-lado h3 { font-size: 14px; font-weight: var(--w-strong); margin-bottom: 8px; }
.dr-lado.chega { animation: dr-chega var(--d-xl) var(--e-out) both; }
@keyframes dr-chega { from { opacity: 0; transform: translateX(16px); } }
.dr-espera { text-align: center; padding: 26px 10px; color: var(--ink-3); }
.dr-espera svg { color: var(--ink-3); margin: 0 auto 8px; display: block; }
.dr-espera b { display: block; color: var(--ink-2); font-size: 13.5px; }
.dr-espera p { font-size: 12.5px; margin-top: 4px; line-height: 1.5; }
.dr-dec-cab { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-3); margin-bottom: 8px; }
.dr-dec-cab i { flex: 1; height: 5px; border-radius: var(--r-pill); background: var(--dr-trilho); overflow: hidden; }
.dr-dec-cab i b { display: block; height: 100%; background: var(--teal); border-radius: inherit; transition: width var(--d-lg) var(--e-out); }
.dr-dec { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; padding: 12px; margin-top: 8px; border-radius: 12px; background: var(--paper); box-shadow: 0 0 0 1px var(--hair); overflow: hidden; transition: box-shadow var(--d-sm) var(--e-ui), opacity var(--d-sm) var(--e-ui); }
.dr-dec-t b { display: block; font-size: 13.5px; font-weight: var(--w-strong); line-height: 1.35; }
.dr-dec-t small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); line-height: 1.45; }
.dr-dec-m { color: var(--ink-2) !important; }
.dr-dec-b { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.dr-dec-b button { height: 30px; padding: 0 11px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: var(--w-medium); color: var(--ink-2); background: var(--paper); box-shadow: 0 0 0 1px var(--hair-2); transition: background-color var(--d-xs) var(--e-ui), color var(--d-xs) var(--e-ui); }
.dr-dec-b button:hover { color: var(--ink); background: var(--paper-2); }
.dr-dec-b button.pri { background: var(--ink); color: var(--paper); box-shadow: none; }
.dr-dec-b button.pri:hover { background: var(--ink-2); color: var(--paper); }
.dr-dec-b button.lnk { height: auto; padding: 0; background: none; box-shadow: none; color: var(--teal-ink); text-decoration: underline; text-underline-offset: 2px; }
.dr-est { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: var(--w-medium); color: var(--ink-2); }
.dr-dec.aprovada { box-shadow: 0 0 0 1px color-mix(in srgb, var(--dr-ok) 40%, transparent); }
.dr-dec.aprovada .dr-est { color: var(--dr-ok); }
.dr-dec.adiada .dr-est { color: var(--dr-risco); }
.dr-dec.recusada { opacity: .7; }
.dr-dec.recusada .dr-dec-t b { text-decoration: line-through; color: var(--ink-3); }
.dr-carimbo { position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--paper); background: var(--dr-ok); opacity: 0; transform: scale(2) rotate(-18deg); pointer-events: none; }
.dr-dec.carimba .dr-carimbo { animation: dr-carimba 600ms var(--e-out) both; }
.dr-dec.carimba { box-shadow: 0 0 0 2px var(--dr-ok); }
@keyframes dr-carimba { 0% { opacity: 0; transform: scale(2) rotate(-18deg); } 45% { opacity: 1; transform: scale(.9) rotate(-8deg); } 70% { transform: scale(1.05) rotate(-8deg); } 100% { opacity: 1; transform: scale(1) rotate(-8deg); } }
.dr-fora { margin-top: 12px; font-size: 12.5px; color: var(--ink-2); }
.dr-fora summary { cursor: pointer; color: var(--ink-3); font-weight: var(--w-medium); }
.dr-fora ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.5; }

.dr-custo { position: relative; display: flex; align-items: flex-start; gap: 6px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 12px; color: var(--ink-3); }
.dr-custo > p { flex: 0 1 auto; min-width: 0; }
/* o "i" do custo: um toggletip, abre no hover, no foco e no toque */
.dr-info { position: relative; flex: none; }
.dr-info-b { display: inline-grid; place-items: center; width: 24px; height: 24px; margin: -4px 0 -4px; border-radius: 50%; color: var(--ink-3); transition: color var(--d-xs) var(--e-ui), background-color var(--d-xs) var(--e-ui); }
.dr-info-b:hover, .dr-info-b[aria-expanded="true"] { color: var(--teal-ink); background: var(--teal-soft); }
.dr-info-b:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.dr-info-bal { position: absolute; z-index: 5; right: -6px; bottom: calc(100% + 10px); width: min(340px, calc(100vw - 40px)); padding: 10px 12px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: 12.5px; line-height: 1.5; box-shadow: var(--dr-sombra); animation: dr-surge var(--d-md) var(--e-out) both; }
.dr-info-bal::after { content: ""; position: absolute; right: 13px; top: 100%; border: 6px solid transparent; border-top-color: var(--ink); }
.dr-info-bal[hidden] { display: none; }

/* ---------------- reuniões anteriores e metas históricas ---------------- */
.dr-hist { padding: 20px; }
.dr-rps { display: grid; gap: 8px; margin-top: 14px; }
.dr-rp { border-radius: 12px; background: var(--paper); box-shadow: 0 0 0 1px var(--hair); }
.dr-rp.ext { box-shadow: 0 0 0 1px var(--hair), inset 3px 0 0 var(--dr-risco); }
.dr-rp[open] { box-shadow: 0 0 0 1px var(--hair-2); }
.dr-rp > summary { display: flex; align-items: center; gap: 14px; padding: 12px 14px; cursor: pointer; list-style: none; border-radius: 12px; }
.dr-rp > summary::-webkit-details-marker { display: none; }
.dr-rp > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 0 2px; border-right: 1.8px solid var(--ink-3); border-bottom: 1.8px solid var(--ink-3); transform: rotate(45deg) translateY(-3px); transition: transform var(--d-sm) var(--e-out); }
.dr-rp[open] > summary::after { transform: rotate(225deg) translate(-2px, -1px); }
.dr-rp > summary:hover { background: var(--paper-2); }
.dr-rp > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.dr-rp-d { flex: none; display: flex; flex-direction: column; align-items: center; width: 50px; padding: 5px 0; border-radius: 9px; background: var(--paper-2); }
.dr-rp-d b { font: 600 13.5px/1.1 var(--mono); }
.dr-rp-d small { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.dr-rp-t { flex: 1; min-width: 0; }
.dr-rp-tipo { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.dr-rp.ext .dr-rp-tipo { color: var(--warn); }
.dr-rp-t b { display: block; font-size: 13.5px; font-weight: var(--w-strong); line-height: 1.3; }
.dr-rp-t small { font-size: 12px; color: var(--ink-3); }
.dr-rp-q { display: flex; flex: none; }
.dr-rp-q .dr-av { margin-left: -6px; box-shadow: 0 0 0 2px var(--paper); }
.dr-rp-c { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; padding: 4px 14px 16px; border-top: 1px solid var(--hair); }
.dr-rp-c h4 { margin: 12px 0 8px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.dr-rp-dec { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dr-rp-dec li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.4; }
.dr-rp-dec .tag { margin-left: 2px; vertical-align: 1px; }
.dr-rp-m { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-3); }
.dr-rp-m .pos { color: var(--pos); } .dr-rp-m .neg { color: var(--neg); }
.dr-rp-f { display: grid; gap: 8px; }
.dr-rp-fi { display: flex; gap: 8px; align-items: flex-start; }
.dr-rp-fi p { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 4px 12px 12px 12px; background: var(--dr-bal); font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.dr-rp-fi p > b:first-child { color: var(--c); margin-right: 2px; }

.dr-hist-g { margin-top: 4px; }
.dr-graf { display: block; width: 100%; height: auto; }
.dr-graf .gr { stroke: var(--hair); stroke-width: 1; }
.dr-graf .cem { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.dr-graf text { font-family: var(--sans, inherit); fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.dr-graf .ey { font-size: 10px; text-anchor: end; }
.dr-graf .ex { font-size: 11px; text-anchor: middle; fill: var(--ink-2); }
.dr-graf .eg { font-size: 11px; text-anchor: middle; fill: var(--ink); font-weight: 600; }
.dr-graf .br { transition: opacity var(--d-xs) var(--e-ui); }
.dr-graf:hover .br { opacity: .55; } .dr-graf .br:hover { opacity: 1; }
.dr-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; color: var(--ink-2); }
.dr-leg span { display: inline-flex; align-items: center; gap: 6px; }
.dr-leg i { width: 10px; height: 10px; border-radius: 3px; }
.dr-leg i.cem { height: 0; border-top: 1.5px dashed var(--ink-3); border-radius: 0; width: 14px; }
.dr-seqs { display: grid; gap: 8px; }
.dr-seqs-n { display: flex; align-items: baseline; gap: 10px; padding: 12px; border-radius: 12px; background: var(--paper-2); }
.dr-seqs-n b { font-size: 28px; font-weight: var(--w-strong); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dr-seqs-n span { font-size: 13px; color: var(--ink-2); }
.dr-seqs-i { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; box-shadow: inset 3px 0 0 var(--c), 0 0 0 1px var(--hair); font-size: 13px; }
.dr-seqs-i svg { color: var(--dr-com); flex: none; }
.dr-seqs-i.zero svg { color: var(--ink-3); opacity: .5; }
.dr-seqs-i b { font-weight: var(--w-medium); }
.dr-seqs-i span { margin-left: auto; color: var(--ink-3); font-size: 12px; text-align: right; }
.dr-hf { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dr-hf button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); font-size: 12.5px; color: var(--ink-2); background: var(--paper); box-shadow: 0 0 0 1px var(--hair-2); }
.dr-hf button i { width: 8px; height: 8px; border-radius: 50%; }
.dr-hf button[aria-pressed="true"] { color: var(--ink); background: var(--paper-2); box-shadow: 0 0 0 1.5px var(--ink-2); font-weight: var(--w-medium); }
.dr-hist-t .sec { display: block; font-size: 11.5px; color: var(--ink-3); }

/* ---------------- metas ---------------- */
.dr-metas { padding: 20px; }
.dr-h3 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 20px 0 10px; font-size: 14px; font-weight: var(--w-strong); }
.dr-h3 span { font-size: 12.5px; font-weight: var(--w-regular); color: var(--ink-3); }

.dr-festa { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--dr-ok-bg); color: var(--dr-ok); overflow: hidden; animation: dr-surge var(--d-lg) var(--e-out) both; }
.dr-festa > svg { flex: none; }
.dr-festa b { display: block; font-size: 13.5px; color: var(--ink); }
.dr-festa p { font-size: 12.5px; color: var(--ink-2); }
.dr-confete { position: absolute; inset: 0; pointer-events: none; }
.dr-confete i { position: absolute; top: -10px; width: 6px; height: 10px; border-radius: 2px; opacity: 0; animation: dr-cai 1.6s var(--e-out) both; }
.dr-confete i:nth-child(4n+1) { background: var(--dr-fin); } .dr-confete i:nth-child(4n+2) { background: var(--dr-com); }
.dr-confete i:nth-child(4n+3) { background: var(--dr-ops); } .dr-confete i:nth-child(4n) { background: var(--teal); }
.dr-confete i:nth-child(1) { left: 6%; animation-delay: .05s; } .dr-confete i:nth-child(2) { left: 14%; animation-delay: .3s; }
.dr-confete i:nth-child(3) { left: 22%; animation-delay: .12s; } .dr-confete i:nth-child(4) { left: 31%; animation-delay: .4s; }
.dr-confete i:nth-child(5) { left: 39%; animation-delay: .2s; } .dr-confete i:nth-child(6) { left: 47%; animation-delay: .02s; }
.dr-confete i:nth-child(7) { left: 55%; animation-delay: .35s; } .dr-confete i:nth-child(8) { left: 63%; animation-delay: .15s; }
.dr-confete i:nth-child(9) { left: 71%; animation-delay: .45s; } .dr-confete i:nth-child(10) { left: 79%; animation-delay: .1s; }
.dr-confete i:nth-child(11) { left: 86%; animation-delay: .28s; } .dr-confete i:nth-child(12) { left: 93%; animation-delay: .08s; }
.dr-confete i:nth-child(13) { left: 50%; animation-delay: .5s; }
@keyframes dr-cai { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(90px) rotate(260deg); } }

/* o boletim de hoje */
.dr-bol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dr-bol-i:last-child { grid-column: 1 / -1; }
@media (min-width: 1280px) { .dr-bol { grid-template-columns: repeat(5, minmax(0, 1fr)); } .dr-bol-i:last-child { grid-column: auto; } .dr-bol-i { flex-direction: column; gap: 6px; } }
.dr-bol-i { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--paper-2); box-shadow: inset 3px 0 0 var(--dr-ok); }
.dr-bol-i.risco { box-shadow: inset 3px 0 0 var(--dr-risco); }
.dr-bol-i.fora { box-shadow: inset 3px 0 0 var(--dr-fora); }
.dr-bol-i b { display: block; font-size: 13px; font-weight: var(--w-strong); }
.dr-bol-i b span { font-weight: var(--w-regular); color: var(--ink-3); }
.dr-bol-i p { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; margin-top: 1px; }

/* os anéis */
.dr-metas-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.dr-meta { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--paper); box-shadow: 0 0 0 1px var(--hair); }
.dr-meta.nova { box-shadow: 0 0 0 2px var(--teal); animation: dr-pop var(--d-lg) var(--e-out) both; }
.dr-meta-a { position: relative; flex: none; width: 58px; height: 58px; }
.dr-meta-a > span { position: absolute; inset: 0; display: grid; place-items: center; font: 600 12.5px/1 var(--mono); color: var(--ink); }
.dr-anel { transform: rotate(-90deg); display: block; }
.dr-anel circle { fill: none; stroke-width: 5; }
.dr-anel .tr { stroke: var(--dr-trilho); }
.dr-anel .pg { stroke: var(--dr-ok); stroke-linecap: round; transition: stroke-dashoffset var(--d-xl) var(--e-out); }
.dr-anel.risco .pg { stroke: var(--dr-risco); }
.dr-anel.fora .pg { stroke: var(--dr-fora); }
.dr-meta.nova .dr-anel .pg { animation: dr-desenha 1.1s var(--e-out) .15s both; }
@keyframes dr-desenha { from { stroke-dashoffset: var(--c0); } to { stroke-dashoffset: var(--o); } }
.dr-meta-t { flex: 1; min-width: 0; }
.dr-meta-t > b { display: block; font-size: 13.5px; font-weight: var(--w-strong); line-height: 1.3; }
.dr-meta-v { display: block; margin-top: 2px; font-size: 15px; font-weight: var(--w-strong); font-variant-numeric: tabular-nums; }
.dr-meta-v em { font-style: normal; font-size: 12.5px; font-weight: var(--w-regular); color: var(--ink-3); }
.dr-meta-t small { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.4; margin-top: 1px; }
.dr-meta-p { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.dr-sem { font-size: 11px; font-weight: var(--w-medium); padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap; color: var(--dr-ok); background: var(--dr-ok-bg); }
.dr-meta.risco .dr-sem { color: var(--warn); background: var(--dr-risco-bg); }
.dr-meta.fora .dr-sem { color: var(--dr-fora); background: var(--dr-fora-bg); }
.dr-seq { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: var(--w-medium); color: var(--dr-com); }
.dr-seq.nv { color: var(--teal-ink); }

.dr-g2 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; }

/* o placar da semana */
.dr-plac { padding: 12px; border-radius: 12px; background: var(--paper-2); }
.dr-plac-n { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; margin-bottom: 10px; }
.dr-plac-n > b { font-size: 28px; font-weight: var(--w-strong); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dr-plac-n > b em { font-style: normal; font-size: 15px; color: var(--ink-3); }
.dr-plac-n > span { font-size: 13px; color: var(--ink-2); }
.dr-plac-n small { flex-basis: 100%; font-size: 12px; }
.dr-plac-n small.pos { color: var(--pos); } .dr-plac-n small.neg { color: var(--neg); }
.dr-plac-t { width: 100%; border-collapse: collapse; font-size: 12px; }
.dr-plac-t th { font-weight: var(--w-regular); color: var(--ink-2); text-align: left; padding: 4px 6px 4px 0; }
.dr-plac-t thead th { text-align: center; font: 500 10.5px/1.2 var(--mono); color: var(--ink-3); }
.dr-plac-t thead th span { display: block; text-transform: uppercase; letter-spacing: .04em; }
.dr-plac-t td { text-align: center; padding: 4px 2px; }
.dr-plac-t td i { display: inline-block; width: 18px; height: 18px; border-radius: 6px; background: var(--dr-trilho); vertical-align: middle; }
.dr-plac-t td i.ok { background: var(--dr-ok); }
.dr-plac-t td i.no { background: var(--dr-fora-bg); box-shadow: inset 0 0 0 1.5px var(--dr-fora); }

/* selos */
.dr-selos { display: grid; gap: 8px; }
.dr-selo { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--paper-2); color: var(--ink-3); }
.dr-selo svg { flex: none; }
.dr-selo b { display: block; font-size: 13px; font-weight: var(--w-medium); color: var(--ink-2); }
.dr-selo small { font-size: 11.5px; }
.dr-selo.ganho { background: color-mix(in srgb, var(--c) 10%, var(--paper)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); color: var(--c); }
.dr-selo.ganho b { color: var(--ink); font-weight: var(--w-strong); }

/* ---------------- telas estreitas ---------------- */
@media (max-width: 980px) {
  .dr-g, .dr-g2, .dr-rp-c { grid-template-columns: 1fr; }
  .dr-rp-c { gap: 0; }
  .dr-lado { position: static; }
  .dr-chat { max-height: 520px; }
}
@media (max-width: 720px) {
  .dr-reu, .dr-metas { padding: 16px 14px; }
  .dr-mesa { gap: 2px; padding: 12px 4px 16px; }
  .dr-ass .dr-av { width: 44px; height: 44px; }
  .dr-ass b { font-size: 12px; }
  .dr-ass > span:not(.dr-av) { font-size: 10px; white-space: nowrap; }
  .dr-cons em { min-width: 0; }
  .dr-msg > .dr-av { width: 30px; height: 30px; }
  .dr-bol { grid-template-columns: 1fr; }
  .dr-plano li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; }
  .dr-plano li em { grid-column: 2; }
  .dr-bal { font-size: 13px; padding: 10px 11px; }
  .dr-msg-h span { display: none; }
  .dr-chat { max-height: 460px; padding-right: 2px; }
  .dr-plac-t th[scope="row"] { font-size: 11px; }
  .dr-plac-t td i { width: 14px; height: 14px; border-radius: 4px; }
  .dr-hist { padding: 16px 14px; }
  .dr-rp > summary { gap: 10px; padding: 10px; flex-wrap: wrap; }
  .dr-rp-t { flex-basis: calc(100% - 80px); }
  .dr-rp-q { margin-left: 60px; }
  .dr-rp > summary::after { margin-left: auto; }
  .dr-rp-c { padding: 0 10px 12px; }
}

/* ---------------- menos movimento ---------------- */
@media (prefers-reduced-motion: reduce) {
  .dr-msg, .dr-sep, .dr-dig, .dr-reage, .dr-lado.chega, .dr-festa, .dr-meta.nova, .dr-meta.nova .dr-anel .pg { animation: none; }
  .dr-ass.fala .dr-av::after, .dr-confete { display: none; }
  .dr-dig-b i { animation: none; opacity: .6; }
  .dr-cons i b, .dr-anel .pg, .dr-ass { transition: none; }
  .dr-info-bal { animation: none; }
}