/* Moderninho, legível e pronto pra virar app 🙂 */

:root{
  --bg:#0B1220;
  --panel:#0f1a33;
  --panel2:#131f3d;
  --text:#E9EDF5;
  --muted:#9aa7c2;
  --stroke:rgba(233,237,245,.12);
  --shadow: 0 14px 40px rgba(0,0,0,.38);
  --r:18px;
  --blue:#4285F4;
  --red:#EA4335;
  --yellow:#FBBC05;
  --green:#34A853;
  --glass: rgba(15,26,51,.78);
  --menu-bg: rgba(15,26,51,.98);
  --input-bg: rgba(255,255,255,.06);
  --surface: rgba(255,255,255,.05);
  --surface2: rgba(255,255,255,.08);
  --surface3:rgba(255,255,255,.12);
  --btn-bg:linear-gradient(135deg, rgba(66,133,244,.95), rgba(52,168,83,.92));
  --btn-text:#FFFFFF;
  --btn-shadow:0 10px 22px rgba(0,0,0,.30);
  --btn-ghost-bg:var(--surface2);
  --btn-ghost-hover-bg:var(--surface3);
  --card-bg:linear-gradient(180deg, var(--panel), var(--panel2));
  --badge-bg:var(--surface);
  --chip-bg:var(--surface2);
  --chip-hover-bg:var(--surface3);
  --chip-ghost-bg:var(--surface);
  --menu-item-hover-bg:var(--surface2);
  --empty-bg:var(--surface);
  --empty-stroke:var(--stroke);
  --focus-ring:rgba(66,133,244,.8);
}
html[data-theme="dark"]{
  --bg:#0B1220;
  color-scheme: dark;
  --panel:#0f1a33;
  --panel2:#131f3d;
  --text:#E9EDF5;
  --muted:#a9b6d2;
  --stroke:rgba(233,237,245,.14);
  --shadow: 0 14px 40px rgba(0,0,0,.38);
  --glass: rgba(15,26,51,.78);
  --menu-bg: rgba(15,26,51,.98);
  --input-bg: rgba(255,255,255,.06);
  --surface: rgba(255,255,255,.05);
  --surface2: rgba(255,255,255,.08);
  --surface3:rgba(255,255,255,.12);
  --btn-text:#FFFFFF;
  --menu-item-hover-bg:var(--surface3);
  --chip-hover-bg:var(--surface3);}



html[data-theme="light"]{
  --bg:#f6f8ff;
  color-scheme: light;
  --panel:#ffffff;
  --panel2:#f0f4ff;
  --text:#0B1220;
  --muted:#2f3d57;
  --stroke:rgba(11,18,32,.14);
  --shadow: 0 14px 40px rgba(11,18,32,.16);
  --glass: rgba(255,255,255,.82);
  --menu-bg: rgba(255,255,255,.98);
  --input-bg: rgba(11,18,32,.06);
  --surface: rgba(11,18,32,.04);
  --surface2: rgba(11,18,32,.07);
  --surface3:rgba(11,18,32,.08);
  --btn-shadow:0 10px 22px rgba(11,18,32,.16);
  --btn-text:#FFFFFF;
  --menu-item-hover-bg:var(--surface3);
  --chip-hover-bg:var(--surface3);}
html[data-theme="contrast"]{
  --bg:#000;
  color-scheme: dark;
  --panel:#000;
  --panel2:#000;
  --text:#fff;
  --muted:#e7e7e7;
  --stroke:rgba(255,255,255,.35);
  --shadow:none;
  --glass:#000;
  --menu-bg:#000;
  --input-bg:#000;
  --surface:#000;
  --surface2:#000;
  --surface3:#fff;
  --btn-text:#FFFFFF;
  --menu-item-hover-bg:var(--surface3);
  --chip-hover-bg:var(--surface3);}

html[data-theme="ocean"]{
  --bg:#061a24;
  color-scheme: dark;
  --panel:#0b2432;
  --panel2:#103245;
  --text:#e9f5ff;
  --muted:#a4c2d6;
  --stroke:rgba(233,245,255,.14);
  --shadow: 0 16px 44px rgba(0,0,0,.36);
  --glass: rgba(11,36,50,.78);
  --menu-bg: rgba(11,36,50,.98);
  --input-bg: rgba(233,245,255,.06);
  --surface: rgba(233,245,255,.05);
  --surface2: rgba(233,245,255,.08);
  --surface3:rgba(233,245,255,.12);
  --btn-text:#FFFFFF;
  --menu-item-hover-bg:var(--surface3);
  --chip-hover-bg:var(--surface3);}
html[data-theme="forest"]{
  --bg:#071a12;
  color-scheme: dark;
  --panel:#0c241a;
  --panel2:#103021;
  --text:#eafff3;
  --muted:#b0d6c4;
  --stroke:rgba(234,255,243,.14);
  --shadow: 0 16px 44px rgba(0,0,0,.36);
  --glass: rgba(12,36,26,.78);
  --menu-bg: rgba(12,36,26,.98);
  --input-bg: rgba(234,255,243,.06);
  --surface: rgba(234,255,243,.05);
  --surface2: rgba(234,255,243,.08);
  --surface3:rgba(234,255,243,.12);
  --btn-text:#FFFFFF;
  --menu-item-hover-bg:var(--surface3);
  --chip-hover-bg:var(--surface3);}
html[data-theme="grape"]{
  --bg:#170d28;
  color-scheme: dark;
  --panel:#211240;
  --panel2:#2a1752;
  --text:#f2ecff;
  --muted:#c9b9e8;
  --stroke:rgba(242,236,255,.14);
  --shadow: 0 16px 44px rgba(0,0,0,.38);
  --glass: rgba(33,18,64,.78);
  --menu-bg: rgba(33,18,64,.98);
  --input-bg: rgba(242,236,255,.06);
  --surface: rgba(242,236,255,.05);
  --surface2: rgba(242,236,255,.08);
  --surface3:rgba(242,236,255,.12);
  --btn-text:#FFFFFF;
  --menu-item-hover-bg:var(--surface3);
  --chip-hover-bg:var(--surface3);}
html[data-theme="sunrise"]{
  --bg:#2a130b;
  color-scheme: dark;
  --panel:#3a1b10;
  --panel2:#4a2314;
  --text:#fff3ea;
  --muted:#f0c7b0;
  --stroke:rgba(255,243,234,.14);
  --shadow: 0 16px 44px rgba(0,0,0,.36);
  --glass: rgba(58,27,16,.78);
  --menu-bg: rgba(58,27,16,.98);
  --input-bg: rgba(255,243,234,.06);
  --surface: rgba(255,243,234,.05);
  --surface2: rgba(255,243,234,.08);
  --surface3:rgba(255,243,234,.12);
  --btn-text:#FFFFFF;
  --menu-item-hover-bg:var(--surface3);
  --chip-hover-bg:var(--surface3);}
html[data-theme="paper"]{
  --bg:#f7f5f0;
  color-scheme: light;
  --panel:#ffffff;
  --panel2:#f1efe8;
  --text:#1b1b1b;
  --muted:#404040;
  --stroke:rgba(27,27,27,.14);
  --shadow: 0 14px 40px rgba(27,27,27,.14);
  --glass: rgba(255,255,255,.84);
  --menu-bg: rgba(255,255,255,.98);
  --input-bg: rgba(27,27,27,.06);
  --surface: rgba(27,27,27,.04);
  --surface2: rgba(27,27,27,.07);
  --surface3:rgba(27,27,27,.08);
  --btn-shadow:0 10px 22px rgba(11,18,32,.16);
  --btn-text:#FFFFFF;
  --menu-item-hover-bg:var(--surface3);
  --chip-hover-bg:var(--surface3);}
html[data-theme="slate"]{
  --bg:#0b1220;
  color-scheme: dark;
  --panel:#111b2f;
  --panel2:#15243d;
  --text:#e9edf5;
  --muted:#b2bfd9;
  --stroke:rgba(233,237,245,.14);
  --shadow: 0 16px 44px rgba(0,0,0,.38);
  --glass: rgba(17,27,47,.78);
  --menu-bg: rgba(17,27,47,.98);
  --input-bg: rgba(233,237,245,.06);
  --surface: rgba(233,237,245,.05);
  --surface2: rgba(233,237,245,.08);
  --surface3:rgba(233,237,245,.12);
  --btn-text:#FFFFFF;
  --menu-item-hover-bg:var(--surface3);
  --chip-hover-bg:var(--surface3);}

html[data-theme="dusk"]{
  --bg:#0d0f24;
  color-scheme: dark;
  --panel:#15183a;
  --panel2:#1b1f4a;
  --text:#f2f1ff;
  --muted:#c5c4e6;
  --stroke:rgba(242,241,255,.14);
  --shadow: 0 16px 44px rgba(0,0,0,.40);
  --glass: rgba(21,24,58,.78);
  --menu-bg: rgba(21,24,58,.98);
  --input-bg: rgba(242,241,255,.06);
  --surface: rgba(242,241,255,.05);
  --surface2: rgba(242,241,255,.08);
  --surface3:rgba(242,241,255,.12);
  --btn-text:#FFFFFF;
  --menu-item-hover-bg:var(--surface3);
  --chip-hover-bg:var(--surface3);}

html[data-theme="mint"]{
  --bg:#041a18;
  color-scheme: dark;
  --panel:#082622;
  --panel2:#0b302b;
  --text:#eafff8;
  --muted:#b8ded8;
  --stroke:rgba(234,255,248,.14);
  --shadow: 0 16px 44px rgba(0,0,0,.34);
  --glass: rgba(8,38,34,.78);
  --menu-bg: rgba(8,38,34,.98);
  --input-bg: rgba(234,255,248,.06);
  --surface: rgba(234,255,248,.05);
  --surface2: rgba(234,255,248,.08);
  --surface3:rgba(234,255,248,.12);
  --btn-text:#FFFFFF;
  --menu-item-hover-bg:var(--surface3);
  --chip-hover-bg:var(--surface3);}

html[data-theme="sand"]{
  --bg:#fbf3e7;
  color-scheme: light;
  --panel:#ffffff;
  --panel2:#f6ead7;
  --text:#1b1b1b;
  --muted:#3a3a3a;
  --stroke:rgba(27,27,27,.14);
  --shadow: 0 14px 40px rgba(27,27,27,.14);
  --glass: rgba(255,255,255,.86);
  --menu-bg: rgba(255,255,255,.98);
  --input-bg: rgba(27,27,27,.06);
  --surface: rgba(27,27,27,.04);
  --surface2: rgba(27,27,27,.07);
  --surface3:rgba(27,27,27,.08);
  --btn-shadow:0 10px 22px rgba(11,18,32,.16);
  --btn-text:#FFFFFF;
  --menu-item-hover-bg:var(--surface3);
  --chip-hover-bg:var(--surface3);}

html[data-theme="rose"]{
  --bg:#1b0b14;
  color-scheme: dark;
  --panel:#2a1020;
  --panel2:#36142a;
  --text:#fff0f7;
  --muted:#f0c0d4;
  --stroke:rgba(255,240,247,.14);
  --shadow: 0 16px 44px rgba(0,0,0,.38);
  --glass: rgba(42,16,32,.78);
  --menu-bg: rgba(42,16,32,.98);
  --input-bg: rgba(255,240,247,.06);
  --surface: rgba(255,240,247,.05);
  --surface2: rgba(255,240,247,.08);
  --surface3:rgba(255,240,247,.12);
  --btn-text:#FFFFFF;
  --menu-item-hover-bg:var(--surface3);
  --chip-hover-bg:var(--surface3);}



*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  background: radial-gradient(1200px 700px at 18% -10%, rgba(66,133,244,.22), transparent 60%),
              radial-gradient(900px 600px at 100% 0%, rgba(234,67,53,.16), transparent 55%),
              radial-gradient(1000px 700px at 70% 110%, rgba(52,168,83,.16), transparent 55%),
              var(--bg);
  color:var(--text);
}

a{color:inherit}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--stroke);
  background: var(--glass);
  backdrop-filter: blur(10px);
}

.wrap{
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 16px;
  flex: 1 1 auto;
  min-height: calc(100vh - 76px);
  display: flex;
  flex-direction: column;
}

.logo{display:flex; align-items:center; gap:12px}
.logo__mark{
  width:42px;height:42px;
  border-radius: 14px;
  display:grid; place-items:center;
  font-weight:800;
  letter-spacing:.5px;
  background: linear-gradient(135deg, rgba(66,133,244,.9), rgba(234,67,53,.85));
  box-shadow: var(--shadow);
}
.logo__title{font-weight:800}
.logo__sub{color:var(--muted); font-size:12px; margin-top:2px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}

.topbar__actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end}

.btn{
  border:none;
  padding:10px 12px;
  border-radius: 14px;
  cursor:pointer;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-weight:700;
  box-shadow: var(--btn-shadow);
}
.btn:active{transform: translateY(1px)}
.btn--ghost{
  background: var(--btn-ghost-bg);
  border: 1px solid var(--stroke);
  box-shadow:none;
}
.btn--sm{height:34px; padding:6px 10px; border-radius:12px; font-size:12px}
.btn--ghost:hover{
  background: var(--btn-ghost-hover-bg);
}

.hero{padding: 4px 0 12px}
.hero__cards{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.card{
  border:1px solid var(--stroke);
  border-radius: var(--r);
  padding: 14px;
  background: var(--card-bg);
  box-shadow: var(--shadow);
}
.card__k{color:var(--muted); font-size:12px; margin-bottom:8px}
.card__v{font-weight:900; font-size:20px}
.card__hint{margin-top:8px; color:var(--muted); font-size:12px}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border: 1px solid var(--stroke);
  border-radius:999px;
  padding: 6px 10px;
  font-size:12px;
  background: var(--badge-bg);
}
.dot{width:8px;height:8px;border-radius:99px;background:var(--muted)}
.dot--green{background:var(--green)}
.dot--yellow{background:var(--yellow)}
.dot--red{background:var(--red)}
.dot--blue{background:var(--blue)}

.filters{
  margin-top: 6px;
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  padding: 12px;
  background: var(--menu-bg);
}

.filters__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 0 2px 10px;
}
.filters__title{font-weight:900; letter-spacing:.2px}
.filters__headRight{display:flex; align-items:center; gap:10px}
.filters.is-collapsed .filters__body{display:none}
.filters.is-collapsed{padding-bottom: 8px}
.filters__row{
  display:flex;
  gap: 12px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.filters__row--compact{margin-top:10px; align-items:center}

.field{display:flex; flex-direction:column; gap:6px; min-width: 170px}
.field--grow{flex: 1 1 340px; min-width: 240px}
.field--inline{flex-direction:row; align-items:center; gap:10px; min-width: 250px}
.field label{font-size:12px; color: var(--muted)}
.field input, .field select{
  height: 40px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: var(--input-bg);
  color: var(--text);
  outline:none;
  -webkit-appearance: none;
  appearance: none;
}
.field select{
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%),
                    linear-gradient(to right, transparent, transparent);
  background-position: calc(100% - 18px) calc(1em + 3px), calc(100% - 13px) calc(1em + 3px), calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;
  padding-right: 34px;
}
.field select option{background: var(--menu-bg); color: var(--text)}


.chips{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.chip{
  border:1px solid var(--stroke);
  background: var(--chip-bg);
  color: var(--text);
  border-radius: 999px;
  padding: 9px 12px;
  cursor:pointer;
  font-weight:700;
}
.chip:hover{background: var(--chip-hover-bg)}
.chip--danger{background: rgba(234,67,53,.16); border-color: rgba(234,67,53,.35)}
.chip--ghost{background: var(--chip-ghost-bg); border-color: rgba(255,255,255,.18)}
html[data-theme="light"] .chip--ghost, html[data-theme="paper"] .chip--ghost, html[data-theme="sand"] .chip--ghost{border-color: rgba(11,18,32,.18)}
.chip.is-on{outline: 2px solid var(--focus-ring)}

.content{margin-top: 12px; flex: 1 1 auto; display:flex; flex-direction:column; min-height: 0}
.content__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap:wrap;
  margin: 8px 2px 10px;
}
.muted{color: var(--muted); font-size: 13px}
.content__right{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

.tableWrap{
  flex: 1 1 auto;
  min-height: 0;
  overflow:auto;
  border:1px solid var(--stroke);
  border-radius: var(--r);
  background: var(--surface);
}

.tbl{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width: 980px;
}
.tbl th, .tbl td{
  padding: 12px 12px;
  border-bottom: 1px solid var(--stroke);
  vertical-align: top;
}
.tbl thead th{
  position:sticky; top:0;
  background: var(--menu-bg);
  backdrop-filter: blur(10px);
  font-size: 12px;
  letter-spacing: .3px;
  color: var(--muted);
  text-align:left;
  cursor: pointer;
}
.tbl tbody tr:hover td{background: var(--badge-bg)}
.tbl tbody tr{cursor:pointer}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: var(--badge-bg);
  font-weight: 800;
  font-size: 12px;
}
.pill--paid{background: rgba(52,168,83,.16); border-color: rgba(52,168,83,.28)}
.pill--pending{background: rgba(251,188,5,.16); border-color: rgba(251,188,5,.30)}
.pill--late{background: rgba(234,67,53,.16); border-color: rgba(234,67,53,.35)}

.money{font-variant-numeric: tabular-nums; white-space: nowrap}
.small{color: var(--muted); font-size: 12px}
.nowrap{white-space: nowrap}

.cardsWrap{display:grid; gap: 12px; flex: 1 1 auto; min-height: 0; overflow:auto}
.itemCard{
  border:1px solid var(--stroke);
  border-radius: var(--r);
  background: var(--surface);
  padding: 12px;
}
.itemCard__top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.itemCard__title{font-weight:900}
.itemCard__meta{margin-top:8px; display:flex; flex-wrap:wrap; gap:8px}
.kv{display:flex; gap:8px; align-items:baseline}
.kv b{font-size:12px; color: var(--muted)}
.kv span{font-weight:800}

.modal::backdrop{background: rgba(0,0,0,.6)}
.modal{
  border:none;
  padding: 0;
  background: transparent;
}
.modal__card{
  width: min(820px, calc(100vw - 18px));
  border-radius: 22px;
  background: var(--menu-bg);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal__card--wide{width: min(980px, calc(100vw - 18px))}
.modal__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--stroke);
}
.modal__title{font-weight: 900}
.modal__body{padding: 14px}
.modal__foot{
  padding: 12px 14px;
  border-top: 1px solid var(--stroke);
  display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap;
}

.note{
  border:1px dashed var(--empty-stroke);
  background: var(--empty-bg);
  border-radius: 16px;
  padding: 10px 12px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 13px;
}
.help{color: var(--muted); font-size: 12px}

.grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.dkv{
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 10px 12px;
  background: var(--surface);
}
.dkv__k{font-size: 12px; color: var(--muted); margin-bottom: 6px}
.dkv__v{font-weight: 800; word-break: break-word}

.toast{
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  background: var(--menu-bg);
  border:1px solid var(--stroke);
  padding: 10px 12px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  color: var(--text);
  font-weight: 800;
  display:flex;
  align-items:center;
  gap:10px;
  max-width: min(680px, calc(100vw - 24px));
}
.toast__msg{flex:1 1 auto; line-height:1.25}
.toast__btn{border:1px solid var(--stroke); background: var(--btn-ghost-bg); color: var(--text); padding: 8px 10px; border-radius: 12px; font-weight: 900; cursor:pointer}
.toast__btn:hover{filter:brightness(1.08)}
.toast--ok{border-color: rgba(52,168,83,.35)}
.toast--warn{border-color: rgba(251,188,5,.4)}
.toast--danger{border-color: rgba(234,67,53,.45)}

@media (max-width: 980px){
  .hero__cards{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .tbl{min-width: 860px}
}
@media (max-width: 640px){
  .hero__cards{grid-template-columns: 1fr;}
  .topbar{padding: 12px 12px}
  .wrap{padding: 12px}
  .field{min-width: 150px}
  .field--inline{min-width: 200px}
  .topbar__actions{gap:8px}
}



/* ===== v5 UI extras ===== */
.dotsep{opacity:.6}
.ver{opacity:.8; font-weight:900}
.netbadge{display:inline-flex; align-items:center; gap:8px; padding:4px 10px; border-radius:999px; border:1px solid var(--stroke); background: var(--badge-bg)}
.netbadge .dot{background: var(--muted)}
.netbadge.is-online .dot{background: var(--green)}
.netbadge.is-offline .dot{background: var(--red)}
.netbadge__txt{font-weight:900}

.menuWrap{position:relative; display:inline-flex}
.menu{
  position:absolute;
  right:0;
  top: calc(100% + 8px);
  min-width: 180px;
  background: var(--menu-bg);
  border:1px solid var(--stroke);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 40;
}
/* menu bg agora é por variável */
.menu__item{
  width:100%;
  text-align:left;
  border:0;
  background: transparent;
  color: var(--text);
  padding: 10px 10px;
  border-radius: 12px;
  font-weight: 900;
  cursor:pointer;
}
.menu__item:hover{background: var(--menu-item-hover-bg)}
.activeFilters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 10px;
}
.afchip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: var(--menu-bg);
  color: var(--text);
  font-weight: 900;
  cursor:pointer;
}
.afchip__x{opacity:.75; font-weight:900}

.pager{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top:1px dashed var(--stroke);
}
.pager__info{color: var(--muted); font-weight:900}

.fab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: var(--menu-bg);
  color: var(--text);
  font-weight: 1000;
  box-shadow: var(--shadow);
  cursor:pointer;
}
.fab:hover{filter:brightness(1.06)}

.printHeader{display:none}
.printHeader__title{font-weight:1000; font-size:18px; margin-bottom:4px}
.printHeader__meta{font-weight:800; font-size:12px; opacity:.8}

.field--toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.field--toggle input[type="checkbox"]{width: 20px; height:20px; accent-color: var(--blue)}

.grid2{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px}
@media (max-width: 640px){ .grid2{grid-template-columns: 1fr;} }

:focus-visible{outline: 2px solid var(--focus-ring); outline-offset: 2px}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; transition:none !important; animation:none !important}
}


@media print{
  .printHeader{display:block; margin-bottom: 10px}

  body{background: #fff; color:#000}
  .topbar, .filters, #btnPrint, #btnExport, #btnView, #btnLink, #btnInsights, .menu, .pager, #btnTop{display:none !important}
  .wrap{max-width: 100%; padding: 0}
  .tableWrap{
  flex: 1 1 auto;
  min-height: 0;
  overflow:auto;
  border:1px solid var(--stroke);
  border-radius: var(--r);
  background: var(--surface);
}
  .tbl{min-width:0}
  .tbl th{position:static}
}

.field input::placeholder{color: var(--muted); opacity:.85}

html[data-theme="dark"] ::-webkit-calendar-picker-indicator,
html[data-theme="ocean"] ::-webkit-calendar-picker-indicator,
html[data-theme="forest"] ::-webkit-calendar-picker-indicator,
html[data-theme="grape"] ::-webkit-calendar-picker-indicator,
html[data-theme="sunrise"] ::-webkit-calendar-picker-indicator,
html[data-theme="slate"] ::-webkit-calendar-picker-indicator,
html[data-theme="dusk"] ::-webkit-calendar-picker-indicator,
html[data-theme="mint"] ::-webkit-calendar-picker-indicator,
html[data-theme="rose"] ::-webkit-calendar-picker-indicator,
html[data-theme="contrast"] ::-webkit-calendar-picker-indicator{
  filter: invert(1);
  opacity: .85;
}


/* ---- Favoritos & Notas ---- */
.flags{display:inline-flex; align-items:center; gap:8px; margin-left:8px; vertical-align:middle;}
.flags--card{margin-left:10px;}
.flag{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 6px; border-radius:999px; font-weight:900; font-size:12px; line-height:18px;}
.flag--fav{background: rgba(251,188,5,.18); color: var(--accent-yellow, #FBBC05); border: 1px solid rgba(251,188,5,.35);}
.flag--note{background: rgba(66,133,244,.14); color: var(--accent-blue, #4285F4); border: 1px solid rgba(66,133,244,.28);}

.detailTools{display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; padding:12px; border:1px solid var(--stroke); border-radius:16px; background: var(--surface); margin-bottom:14px;}
.detailTools .field{min-width:min(420px, 100%);}
.detailTools textarea{min-height:74px; resize:vertical;}
.noteActions{display:flex; justify-content:flex-end; margin-top:8px;}
@media (max-width:520px){
  .detailTools{padding:10px;}
  .flags{gap:6px;}
}


/* Developer credit */
.modal__dev{
  margin-top: 10px;
  font-size: 12px;
  opacity: .8;
}
.dev-credit{
  position: fixed;
  left: 12px;
  bottom: 10px;
  font-size: 12px;
  opacity: .75;
  z-index: 20;
  pointer-events: none;
}


/* A11y: skip link */
.skip-link{
  position: absolute;
  left: 12px;
  top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  transform: translateY(-160%);
  transition: transform .15s ease;
  z-index: 1000;
}
.skip-link:focus{ transform: translateY(0); outline: 2px solid rgba(255,255,255,.6); }

/* Focus visibility */
:focus-visible{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 2px;
}

/* Tools section */
.tools{ margin-top: 14px; }
.tools__title{ font-weight: 700; margin: 6px 0 10px; }
.tools__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.tools__meta{ margin-top: 10px; font-size: 12px; opacity: .9; }

.btn--danger{
  background: rgba(234,67,53,.18);
  border-color: rgba(234,67,53,.35);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}


/* ---- Impressão (Área dedicada) ---- */
.sectionTitle{font-weight:800; margin: 10px 0 8px; opacity:.95;}
.printArea{display:none; padding: 0 0 8px; background:#fff; color:#000;}
.printArea__head{margin: 0 0 10px; padding: 0 0 6px; border-bottom: 1px solid rgba(0,0,0,.25);}
.printArea__title{font-size: 18px; font-weight: 900; letter-spacing: .2px;}
.printArea__meta{font-size: 12px; margin-top: 2px; opacity: .85;}
.printArea__filters{font-size: 11px; margin-top: 6px; opacity: .85;}
.printArea__summary{margin-top: 8px; font-size: 11px;}
.psummary{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px;}
.psummary__card{border: 1px solid rgba(0,0,0,.2); border-radius: 12px; padding: 8px;}
.psummary__k{font-size: 10px; opacity: .8;}
.psummary__v{font-size: 14px; font-weight: 900;}
.psummary__list{margin-top: 6px; font-size: 10px; opacity: .85; line-height: 1.35;}

.ptbl{width:100%; border-collapse: collapse; font-size: var(--print-font-size, 11px);}
.ptbl th, .ptbl td{padding: var(--print-cell-pad, 6px 8px); vertical-align: top;}
.ptbl th{font-weight: 900; text-align: left; background: rgba(0,0,0,.04);}

html[data-print-borders="1"] .ptbl th,
html[data-print-borders="1"] .ptbl td{border: 1px solid rgba(0,0,0,.45);}

html[data-print-borders="0"] .ptbl th,
html[data-print-borders="0"] .ptbl td{border: none;}

.printFooter{display:none; margin-top: 10px; font-size: 10px; text-align:center; opacity:.75;}

/* Pré-visualização (tela) */
body.printPreview .wrap{display:none;}
body.printPreview .printArea{display:block; max-width: 1100px; margin: 0 auto; padding: 14px;}
body.printPreview .printFooter{display:block; position: static;}

/* Ajustes de densidade (via JS) */
html[data-print-density="normal"]{ --print-cell-pad: 6px 8px; }
html[data-print-density="compact"]{ --print-cell-pad: 4px 6px; }
html[data-print-density="ultra"]{ --print-cell-pad: 3px 5px; }

html[data-print-font="small"]{ --print-font-size: 10px; }
html[data-print-font="normal"]{ --print-font-size: 11px; }
html[data-print-font="large"]{ --print-font-size: 12.5px; }

@media print{
  html, body{ background:#fff !important; color:#000 !important; }
  .wrap, .topbar, .filters, .menu, .pager, dialog, .toast{ display:none !important; }
  .printArea{ display:block !important; }
  .printFooter{ display:block !important; position: fixed; left: 0; right: 0; bottom: 6mm; }
  .ptbl thead{ display: table-header-group; }
  .ptbl tfoot{ display: table-footer-group; }
  .ptbl tr{ page-break-inside: avoid; }
  .pill{ border:1px solid rgba(0,0,0,.35) !important; background: #fff !important; color:#000 !important; }
  .flags{ gap:6px; }
}