/* CBM System · Etapa 11: legibilidade e direção artística sazonal.
   Componentes escopados, sem interferência nas APIs, permissões e dados. */
.app-page {
  --v11-paper:#fff; --v11-ink:#29352d; --v11-muted:#5b6a60;
  --v11-line:#dce3da; --v11-hover:#f1f5ef; --v11-accent:#856722;
}
body.dark:not(.theme-retired-halloween) {
  --v11-paper:#242d27; --v11-ink:#eef5ed; --v11-muted:#c4d1c7;
  --v11-line:#4d5c50; --v11-hover:#334239; --v11-accent:#f1d890;
}
body.theme-retired-halloween {
  --v11-paper:#281d34; --v11-ink:#fff4ed; --v11-muted:#decbdc;
  --v11-line:#684e70; --v11-hover:#44304e; --v11-accent:#ffb681;
}

/* SUPERVISORES — células devem permanecer células de tabela, não flex rows. */
.app-page .app-shell .sup-dph { min-width:0; }
.app-page .app-shell .sup-dph .table-scroll {
  max-width:100%; overflow-x:auto; overflow-y:visible; border-radius:13px;
  border:1px solid var(--v11-line); background:var(--v11-paper);
  scrollbar-width:thin; scrollbar-color:var(--v11-line) transparent;
}
.app-page .app-shell .sup-dph .sup-table {
  width:100%; min-width:1030px; table-layout:fixed; border-collapse:separate; border-spacing:0;
  background:var(--v11-paper); font-size:12px;
}
.app-page .app-shell .sup-dph .sup-table tr { display:table-row!important; }
.app-page .app-shell .sup-dph .sup-table :is(th,td) {
  display:table-cell!important; position:relative; box-sizing:border-box;
  padding:16px 13px; vertical-align:middle; line-height:1.55;
  overflow-wrap:break-word; word-break:normal; color:var(--v11-ink);
  border-left:0!important; border-right:0!important; border-top:0!important;
  border-bottom:1px solid var(--v11-line)!important;
}
.app-page .app-shell .sup-dph .sup-table th {font-size:10px!important;white-space:nowrap;color:var(--v11-muted)!important;letter-spacing:.08em}
.app-page .app-shell .sup-dph .sup-table th:first-child {width:55px}
.app-page .app-shell .sup-dph .sup-table th:nth-child(2) {width:155px}
.app-page .app-shell .sup-dph .sup-table th:nth-child(3) {width:185px}
.app-page .app-shell .sup-dph .sup-table th:nth-child(4) {width:110px}
.app-page .app-shell .sup-dph .sup-table:has(th:nth-child(8)) th:nth-child(5) {width:108px}
.app-page .app-shell .sup-dph .sup-table th:nth-last-child(2) {width:115px}
.app-page .app-shell .sup-dph .sup-table th:last-child {width:100px}
.app-page .app-shell .sup-dph .sup-table tbody tr:last-child td {border-bottom:0!important}
.app-page .app-shell .sup-dph .sup-table tbody tr:hover :is(td,th),
.app-page .app-shell .sup-dph .sup-table tbody tr:focus-within :is(td,th) {
  background:var(--v11-hover)!important; color:var(--v11-ink)!important;
}
.app-page .app-shell .sup-dph .sup-id,
.app-page .app-shell .sup-dph .sup-date {white-space:nowrap;color:var(--v11-muted)!important}
.app-page .app-shell .sup-dph .sup-applier span,
.app-page .app-shell .sup-dph .sup-date small,
.app-page .app-shell .sup-dph .sup-person small {color:var(--v11-muted)!important;font-size:11px}
.app-page .app-shell .sup-dph .sup-person {display:flex;min-width:0;align-items:center;gap:9px;color:var(--v11-ink)!important}
.app-page .app-shell .sup-dph .sup-person>span {min-width:0}
.app-page .app-shell .sup-dph .sup-person b {color:var(--v11-ink)!important;line-height:1.35}
.app-page .app-shell .sup-dph .sup-reason {max-width:none!important;color:var(--v11-ink)!important}
.app-page .app-shell .sup-dph .sup-reason-preview {
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  line-clamp:3; overflow:hidden; white-space:normal; line-height:1.55;
}
.app-page .app-shell .sup-dph .sup-reason-more {
  display:inline-flex; align-items:center; margin-top:7px; padding:4px 0;
  border:0; background:none!important; color:var(--v11-accent)!important;
  font:700 11px/1.4 Inter,system-ui,sans-serif; text-align:left; cursor:pointer;
}
.app-page .app-shell .sup-dph .sup-reason-more:hover {text-decoration:underline;text-underline-offset:3px}
.app-page .app-shell .sup-dph .sup-actions {text-align:center;white-space:nowrap!important}
.app-page .app-shell .sup-dph .sup-actions .icon-btn {
  display:inline-flex!important;vertical-align:middle;justify-content:center;align-items:center;
  margin:0 2px!important;width:31px;height:31px;border-radius:8px;
}
.app-page .app-shell .sup-dph .sup-actions .icon-btn:hover {background:var(--v11-hover)!important;color:var(--v11-ink)!important}
.app-page .app-shell .sup-dph .sup-tabs {margin:0 0 17px;gap:7px;flex-wrap:wrap}
.app-page .app-shell .sup-dph .sup-tabs button {border-radius:8px!important;font-size:12px!important;padding:9px 13px!important}
.app-page .app-shell .sup-dph .sup-tabs button:not(.active):hover {background:var(--v11-hover)!important;color:var(--v11-ink)!important}
.app-page .app-shell .sup-dph .sup-foot {margin-top:10px;align-items:center}
.app-page .app-shell .sup-dph .sup-proof {overflow-wrap:anywhere;color:var(--v11-accent)!important}
.app-page .app-shell .sup-dph .sup-proof:hover {text-decoration:underline}
.app-page .sup-reason-modal {max-width:68ch;max-height:60vh;overflow:auto;line-height:1.85;white-space:normal;overflow-wrap:anywhere;padding:5px 4px;font-size:14px}

/* PERFIL: Jornada como leitura de histórico, menos microtipografia. */
.app-page .app-shell .timeline-toolbar {gap:9px!important;padding:14px 18px!important;background:var(--v11-paper)!important;border-color:var(--v11-line)!important}
.app-page .app-shell .timeline-toolbar button {font-size:12px!important;min-height:36px!important;padding:8px 12px!important}
.app-page .app-shell .dph-timeline {padding:24px 20px 28px!important;background:transparent!important}
.app-page .app-shell .dph-event {margin-bottom:17px!important;gap:14px!important;align-items:start}
.app-page .app-shell .dph-card {min-width:0;padding:20px 20px 16px!important;border-radius:12px!important;box-shadow:none!important;background:var(--v11-paper)!important;border-color:var(--v11-line)!important;color:var(--v11-ink)!important}
.app-page .app-shell .dph-card-head {row-gap:8px;align-items:center}
.app-page .app-shell .dph-card-head b {font-size:12px!important;line-height:1.5;letter-spacing:.015em}
.app-page .app-shell .dph-card-head small {font-size:11px!important;color:var(--v11-muted)!important}
.app-page .app-shell .dph-card p {font-size:12px!important;line-height:1.7!important;margin:12px 0!important;color:var(--v11-ink)!important;overflow-wrap:anywhere}
.app-page .app-shell .dph-card-foot {font-size:10px!important;line-height:1.55;gap:10px!important;border-color:var(--v11-line)!important;color:var(--v11-muted)!important}
.app-page .app-shell .dph-card :is(.icon-btn,.dph-card-action):hover {background:var(--v11-hover)!important;color:var(--v11-ink)!important}
.app-page .app-shell .profile-grid {gap:clamp(17px,2.2vw,29px)!important}
.app-page .app-shell .profile-grid .card-title {min-height:55px;font-size:13px}
.app-page .app-shell .profile-achievement-strip {overflow:hidden}

/* MEU RESUMO: progressão por relevância. Situação e ponto na primeira dobra. */
.app-page .app-shell .home-hub-head {padding:5px 0 22px!important;margin-bottom:23px!important}
.app-page .app-shell .home-hub-head h2 {font-size:clamp(28px,2.8vw,42px)!important;max-width:26ch;letter-spacing:-.035em}
.app-page .app-shell .home-hub-head p {font-size:13px;line-height:1.65;max-width:58ch}
.app-page .app-shell .home-status-grid {margin-bottom:29px!important;gap:16px!important}
.app-page .app-shell .home-status-grid .card {box-shadow:none;border-radius:13px!important;border-color:var(--v11-line)!important}
.app-page .app-shell .home-status-grid .card-title {background:transparent!important;border-color:var(--v11-line)!important}
.app-page .app-shell .home-performance {margin-bottom:29px!important}
.app-page .app-shell .home-section-title h3 {font-size:17px!important}
.app-page .app-shell .home-metrics {border:0!important;border-top:1px solid var(--v11-line)!important;border-bottom:1px solid var(--v11-line)!important;border-radius:0!important;background:transparent!important}
.app-page .app-shell .home-metric {padding:20px 17px!important;gap:8px!important;background:transparent!important;color:var(--v11-ink)!important}
.app-page .app-shell .home-metric+.home-metric {border-left:1px solid var(--v11-line)!important}
.app-page .app-shell .home-metric>span {font-size:11px!important;line-height:1.45}
.app-page .app-shell .home-metric>strong {font-size:clamp(22px,2.1vw,29px)!important;line-height:1.18}
.app-page .app-shell .home-metric>small {font-size:11px!important;line-height:1.6}
.app-page .app-shell .home-metric:hover {background:var(--v11-hover)!important}
.app-page .app-shell .home-hub-grid {gap:16px!important;align-items:start}
.app-page .app-shell .home-hub-grid>div {gap:16px!important}
.app-page .app-shell .home-detail-expansion {
  min-width:0;border:1px solid var(--v11-line);border-radius:13px;background:var(--v11-paper);
  overflow:hidden;color:var(--v11-ink);
}
.app-page .app-shell .home-detail-expansion>summary {
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  cursor:pointer;padding:20px 22px;list-style:none;user-select:none;
}
.app-page .app-shell .home-detail-expansion>summary::-webkit-details-marker {display:none}
.app-page .app-shell .home-detail-expansion>summary strong {display:block;font-size:13px;color:var(--v11-ink)}
.app-page .app-shell .home-detail-expansion>summary small {display:block;font-size:11px;margin-top:5px;color:var(--v11-muted)}
.app-page .app-shell .home-detail-expansion>summary>span:last-child {font-size:20px;color:var(--v11-accent);transition:transform .2s}
.app-page .app-shell .home-detail-expansion[open]>summary>span:last-child {transform:rotate(180deg)}
.app-page .app-shell .home-detail-expansion>summary:hover {background:var(--v11-hover)}
.app-page .app-shell .home-detail-content {display:grid;gap:12px;padding:0 15px 17px}
.app-page .app-shell .home-detail-content .card {margin:0!important;box-shadow:none!important}
.app-page .app-shell .home-detail-content .card-title {padding:14px 15px!important}
.app-page .app-shell .home-detail-content .home-task-list {padding:0 14px 12px}
.app-page .app-shell .home-hub .home-updated {margin-top:20px!important;color:var(--v11-muted)}

/* HOVERS on non-table cards must use matching foreground/background colors. */
.app-page .app-shell :is(.home-shortcuts .btn,.home-task,.profile-tabs button,.sup-tabs button):hover:not(:disabled) {
  color:var(--v11-ink)!important;
}
.app-page .app-shell :is(.home-metric,.home-task,.home-recent button):focus-visible,
.app-page .app-shell .sup-dph button:focus-visible,
.app-page .app-shell .home-detail-expansion>summary:focus-visible {
  outline:2px solid var(--v11-accent)!important;outline-offset:2px;
}

/* HALLOWEEN: atmosfera editorial e elementos realmente ilustrados. */
body.theme-retired-halloween .app-shell .home-hub-head {position:relative;isolation:isolate}
body.theme-retired-halloween .app-shell .home-hub-head:before {
  content:'';position:absolute;right:175px;top:-2px;pointer-events:none;z-index:-1;
  width:110px;height:110px;border:1px solid #ffc58b33;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#ffe1b9 0%,#b9818e 45%,#4c3450 72%,transparent 73%);
  filter:drop-shadow(0 0 26px #c18c8440);opacity:.63;
}
body.theme-retired-halloween .app-shell .home-hub-head:after {
  content:'✦';position:absolute;right:246px;top:2px;font-size:16px;color:#f4bc92;
  text-shadow:0 0 12px #ffc180;pointer-events:none;
}
body.theme-retired-halloween .app-shell .home-detail-expansion {background:#281f34!important}
body.theme-retired-halloween .app-shell .dph-card {background:linear-gradient(140deg,#291f35,#231a30)!important}
body.theme-retired-halloween .app-shell .dph-card:hover {border-color:#966f80!important}
body.theme-retired-halloween .app-shell .sup-dph .table-scroll {background:#241b30!important}
body.theme-retired-halloween .app-shell .sup-dph .sup-table {background:#241b30!important}
body.theme-retired-halloween .app-shell .sup-dph .sup-table tbody tr:hover td {background:#463351!important}
body.theme-retired-halloween .app-shell .home-metrics {background:transparent!important}

/* A small original ghost character accompanies the illustrated hero, not the data tables.
   Inspired by reference motion studies: levitation, blink, wavy silhouette. */
body.theme-retired-halloween .hw-home-hero .hw11-parallax-foreground {
  position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;border-radius:inherit;
  background:radial-gradient(circle at 86% 78%,#ff9b5f22,transparent 19%);
}
body.theme-retired-halloween .hw-home-hero .hw11-branch {
  position:absolute;right:-16px;bottom:-26px;width:170px;height:165px;opacity:.5;
  background:#0f0b1b;clip-path:polygon(92% 100%,70% 74%,52% 70%,50% 44%,37% 35%,45% 61%,68% 69%,49% 22%,53% 8%,75% 65%,100% 78%,100% 100%);
}
body.theme-retired-halloween .hw-home-hero .hw11-twinkle {
  position:absolute;width:5px;height:5px;border-radius:50%;background:#ffe4b6;
  box-shadow:0 0 15px 4px #ffa76577;animation:hw11-shimmer 4s ease-in-out infinite;
}
body.theme-retired-halloween .hw11-twinkle.a {top:15%;right:23%}
body.theme-retired-halloween .hw11-twinkle.b {top:42%;right:9%;animation-delay:1.2s;transform:scale(.6)}
body.theme-retired-halloween .hw11-twinkle.c {bottom:27%;right:37%;animation-delay:2.4s;transform:scale(.5)}
body.theme-retired-halloween .hw-home-hero .hw11-spider {
  position:absolute;top:0;right:19%;z-index:4;width:16px;height:69px;
  border-left:1px solid #e6b5c05e;transform-origin:top;pointer-events:none;animation:hw11-swing 6s ease-in-out infinite;
}
body.theme-retired-halloween .hw11-spider i {
  position:absolute;bottom:-12px;left:-10px;width:20px;height:18px;border-radius:55% 55% 45% 45%;
  background:#1a1125;box-shadow:inset 0 0 0 1px #92718a;
}
body.theme-retired-halloween .hw11-spider i:before,body.theme-retired-halloween .hw11-spider i:after {
  content:'';position:absolute;top:5px;width:14px;height:11px;border:2px solid #1a1125;border-bottom:0;
}
body.theme-retired-halloween .hw11-spider i:before {right:16px;transform:rotate(-24deg);border-radius:80% 0 0 0}
body.theme-retired-halloween .hw11-spider i:after {left:16px;transform:rotate(24deg);border-radius:0 80% 0 0}
body.theme-retired-halloween .hw-home-hero .hw11-specter {
  position:absolute;right:clamp(30px,7vw,110px);bottom:clamp(35px,7vw,75px);
  z-index:5;display:block;width:92px;height:124px;padding:0;border:0!important;
  background:transparent!important;cursor:pointer;filter:drop-shadow(0 12px 16px #0e0718aa);
  transition:transform .25s ease;transform-origin:bottom;
}
body.theme-retired-halloween .hw11-specter:hover {transform:rotate(6deg) scale(1.07)}
body.theme-retired-halloween .hw11-specter-body {
  position:absolute;inset:8px 9px 18px;border-radius:48% 48% 14% 14%;
  background:linear-gradient(130deg,#fff9e8,#d9cfde 83%);
  clip-path:polygon(0 0,100% 0,100% 85%,83% 100%,62% 89%,42% 99%,20% 88%,0 98%);
  box-shadow:inset -10px -7px 16px #9f8ca777;animation:hw11-levitate 3.8s ease-in-out infinite;
}
body.theme-retired-halloween .hw11-eye {
  position:absolute;top:42%;width:9px;height:13px;border-radius:50%;background:#2b203c;
  animation:hw11-blink 7.5s linear infinite;
}
body.theme-retired-halloween .hw11-eye.left {left:30%}
body.theme-retired-halloween .hw11-eye.right {right:30%}
body.theme-retired-halloween .hw11-mouth {position:absolute;top:62%;left:46%;width:8px;height:9px;background:#402744;border-radius:50%}
body.theme-retired-halloween .hw11-specter-shadow {
  position:absolute;bottom:4px;left:17px;width:60px;height:9px;background:#0e071b99;
  border-radius:50%;filter:blur(5px);animation:hw11-shadow 3.8s ease-in-out infinite;
}
body.theme-retired-halloween .hw11-specter-bubble {
  position:absolute;bottom:85%;right:75%;z-index:1;white-space:nowrap;
  padding:7px 10px;color:#2a1b34;background:#ffe2be;border-radius:12px 12px 1px 12px;
  font:800 11px Inter,system-ui,sans-serif;opacity:0;transform:translate(5px,6px) scale(.85);
  transition:opacity .2s,transform .2s;pointer-events:none;
}
body.theme-retired-halloween .hw11-specter:is(:hover,:focus-visible,.is-surprised) .hw11-specter-bubble {
  opacity:1;transform:translate(0,0) scale(1);
}
body.theme-retired-halloween .hw11-specter.is-surprised .hw11-mouth {width:13px;height:16px;left:43%;top:59%}
body.theme-retired-halloween .hw11-specter:focus-visible {outline:2px solid #fff1de!important;outline-offset:7px;border-radius:18px}
@keyframes hw11-levitate {0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-13px) rotate(3deg)}}
@keyframes hw11-shadow {0%,100%{transform:scale(.92);opacity:.8}50%{transform:scale(1.25);opacity:.4}}
@keyframes hw11-blink {0%,39%,41%,78%,80%,100%{transform:scaleY(1)}40%,79%{transform:scaleY(.08)}}
@keyframes hw11-shimmer {0%,100%{opacity:.4}50%{opacity:1}}
@keyframes hw11-swing {0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
/* Motion restrictions intentionally isolated to avoid animation on every page. */
body.theme-retired-halloween[data-theme-effects="off"] .hw11-specter-body,
body.theme-retired-halloween[data-theme-effects="off"] .hw11-specter-shadow,
body.theme-retired-halloween[data-theme-effects="off"] .hw11-spider,
body.theme-retired-halloween[data-theme-effects="off"] .hw11-twinkle,
body.theme-retired-halloween[data-theme-effects="off"] .hw11-eye {animation:none!important}
@media(prefers-reduced-motion:reduce){
  body.theme-retired-halloween :is(.hw11-specter-body,.hw11-specter-shadow,.hw11-spider,.hw11-twinkle,.hw11-eye) {animation:none!important;transition:none!important}
}
@media(max-width:1100px) {
  .app-page .app-shell .sup-dph .sup-table {min-width:950px}
  .app-page .app-shell .home-hub-grid {grid-template-columns:1fr!important}
  .app-page .app-shell .home-hub-grid>div {min-width:0}
}
@media(max-width:800px) {
  .app-page .app-shell .home-metrics {display:grid;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-page .app-shell .home-metric:nth-child(3) {border-left:0!important}
  .app-page .app-shell .home-metric:nth-child(n+3) {border-top:1px solid var(--v11-line)!important}
  body.theme-retired-halloween .hw-home-hero .hw11-specter {right:20px;bottom:16px;width:66px;height:91px;opacity:.87}
  body.theme-retired-halloween .hw-home-hero .hw11-spider {right:12%;height:45px}
  .app-page .app-shell .dph-timeline {padding:14px 10px 20px!important}
  .app-page .app-shell .dph-card {padding:14px!important}
}
@media(max-width:520px) {
  .app-page .app-shell .home-metrics {grid-template-columns:1fr 1fr!important}
  .app-page .app-shell .home-metric {padding:14px 12px!important}
  .app-page .app-shell .sup-dph .sup-tabs {flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
  .app-page .app-shell .sup-dph .sup-tabs button {flex-shrink:0}
  body.theme-retired-halloween .app-shell .home-hub-head:before {width:66px;height:66px;right:0;opacity:.38}
  body.theme-retired-halloween .hw-home-hero .hw11-specter {display:none}
}