:root{
  --bg:#0b0c10;
  --body-gradient:linear-gradient(180deg,#0b0c10 0%, #0f1117 100%);
  --panel:#121319;
  --ink:#e9eef3;
  --muted:#aab3bd;
  --accent:#00a794;
  --grid:#2a2e36;
  --wk-alt:#181b22;
  --wk-num:#7f8a97;
  --surface:#10131a;
  --surface-alt:#0f1117;
  --surface-strong:#121621;
  --surface-soft:#0c0e14;

  /* Categorias */
  --cat-nacional:#4caf50;
  --cat-regional:#2e7d32;
  --cat-grupo:#1976d2;
  --cat-formacao:#f9a825;
  --cat-acamp:#8d6e63;
  --cat-outro:#9c27b0;
}

body[data-theme='light']{
  color-scheme: light;
  --bg:#f6f7fb;
  --body-gradient:linear-gradient(180deg,#f6f7fb 0%,#eef1f6 100%);
  --panel:#ffffff;
  --ink:#1b2026;
  --muted:#616c78;
  --accent:#00a794;
  --grid:#d4d9e3;
  --wk-alt:#f0f1f5;
  --wk-num:#6b6f76;
  --surface:#ffffff;
  --surface-alt:#f0f1f5;
  --surface-strong:#eef1f6;
  --surface-soft:#f6f7fb;
}

body[data-theme='dark']{
  color-scheme: dark;
  --bg:#0b0c10;
  --body-gradient:linear-gradient(180deg,#0b0c10 0%, #0f1117 100%);
  --panel:#121319;
  --ink:#e9eef3;
  --muted:#aab3bd;
  --accent:#00a794;
  --grid:#2a2e36;
  --wk-alt:#181b22;
  --wk-num:#7f8a97;
  --surface:#10131a;
  --surface-alt:#0f1117;
  --surface-strong:#121621;
  --surface-soft:#0c0e14;
}

body[data-theme='system']{
  color-scheme: dark light;
}

@media (prefers-color-scheme: dark){
  body[data-theme='system']{
    --bg:#0b0c10;
    --body-gradient:linear-gradient(180deg,#0b0c10 0%, #0f1117 100%);
    --panel:#121319;
    --ink:#e9eef3;
    --muted:#aab3bd;
    --accent:#00a794;
    --grid:#2a2e36;
    --wk-alt:#181b22;
    --wk-num:#7f8a97;
    --surface:#10131a;
    --surface-alt:#0f1117;
    --surface-strong:#121621;
    --surface-soft:#0c0e14;
  }
}

@media (prefers-color-scheme: light){
  body[data-theme='system']{
    --bg:#f6f7fb;
    --body-gradient:linear-gradient(180deg,#f6f7fb 0%,#eef1f6 100%);
    --panel:#ffffff;
    --ink:#1b2026;
    --muted:#616c78;
    --accent:#00a794;
    --grid:#d4d9e3;
    --wk-alt:#f0f1f5;
    --wk-num:#6b6f76;
    --surface:#ffffff;
    --surface-alt:#f0f1f5;
    --surface-strong:#eef1f6;
    --surface-soft:#f6f7fb;
  }
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:var(--ink);
  background:var(--body-gradient);
  background-color:var(--bg);
}

.topbar{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:8px 12px;
  background:var(--panel);
  border-bottom:1px solid var(--grid);
  position:sticky;
  top:0;
  z-index:10;
}
.topbar-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.topbar-primary{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}
.topbar-primary h1{margin:0;font-size:16px;letter-spacing:.2px;white-space:nowrap}
.brand-logo{max-height:50px;display:inline-block;vertical-align:middle}
.logo-control{display:flex;align-items:center;gap:12px;margin-top:8px}
.logo-status{font-size:12px;color:var(--muted)}
.topbar-nav{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;width:100%}
.nav-btn{padding:5px 10px;font-size:12px;font-weight:600}
.session-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.session-label{color:var(--muted)}
.topbar-controls{justify-content:flex-start;gap:8px;flex-wrap:wrap;width:100%}
.actions-group{margin-left:auto}
.controls-group{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;justify-content:center}
.year-control{align-items:flex-end;align-self:flex-end}
.year-control .btn.icon-btn{align-self:flex-end}
.controls-group label{display:flex;align-items:center;gap:6px;color:var(--muted)}
.theme-control select{min-width:130px}
.controls-group select,
.controls-group input[type="search"]{
  height:34px;
  background:var(--panel);
  color:var(--ink);
  border:1px solid var(--grid);
  padding:0 10px;
  border-radius:8px;
  min-width:96px;
  font-size:13px;
}
.controls-group input[type="search"]{min-width:220px}
.controls-group .btn{
  height:34px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.controls-group .btn.icon-btn{
  width:34px;
  padding:0;
}
.actions-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn{border:1px solid var(--grid);background:var(--panel);color:var(--ink);padding:7px 10px;border-radius:8px;text-decoration:none;cursor:pointer}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--surface-alt)}
.btn.back-btn{border-color:var(--accent);color:var(--accent);font-weight:600}
.btn.back-btn:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.btn.icon-btn{padding:8px 10px;min-width:36px;display:inline-flex;align-items:center;justify-content:center}
.btn:disabled{opacity:.55;cursor:not-allowed;border-color:var(--grid);color:var(--muted);background:var(--surface-soft)}
.btn.primary:disabled{background:#205b86;border-color:#205b86;color:var(--surface-alt);opacity:.65}
.range.hidden{display:none}
.hidden{display:none !important}

.layout{display:grid;grid-template-columns: minmax(240px, 300px) minmax(0,1fr);gap:16px;padding:16px;align-items:start;width:100%;max-width:100%}
.topbar{width:100%;max-width:100%;margin:0 auto}
.foot{width:100%;max-width:100%;margin:0 auto}
.legend{background:var(--panel);border:1px solid var(--grid);border-radius:12px;padding:14px;box-shadow:0 8px 16px rgba(0,0,0,.14)}
.legend h3{margin:0 0 8px 0;font-size:13px;color:var(--muted)}
.legend-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.legend-section-presets{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px 0}
.legend-section-presets .btn{padding:4px 8px;font-size:12px}
.legend .item{display:flex;align-items:center;gap:8px;margin:6px 0}
.legend .item input[type="checkbox"]{accent-color:var(--accent);width:16px;height:16px}
.legend .swatch{width:18px;height:10px;border-radius:8px}
.legend .lbl{color:var(--ink)}
.section-tree{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.section-node{padding-left:6px;border-left:1px solid var(--grid)}
.section-node.depth-0{border-left:none;padding-left:0}
.section-node.depth-1{margin-left:6px}
.section-node.depth-2{margin-left:12px}
.section-node.depth-3{margin-left:18px}
.section-label{font-weight:600;color:var(--muted);margin-bottom:4px}
.section-leaf{display:flex;align-items:center;gap:6px}
.section-leaf label{display:inline-flex;align-items:center;gap:8px;color:var(--ink);cursor:pointer;flex-wrap:nowrap;white-space:normal}
.section-leaf span{color:var(--ink)}
.section-leaf input[type="checkbox"]{accent-color:var(--accent);width:16px;height:16px}
.section-pill{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:999px;border:1px solid var(--grid);background:var(--surface-strong);font-size:12px;transition:all .2s ease;opacity:.85}
.section-pill .dot{width:10px;height:10px;border-radius:50%;background:var(--section-color,var(--accent))}
.section-pill .name{white-space:normal;line-height:1.25;overflow-wrap:anywhere}
.section-pill.active{opacity:1;border-color:var(--section-color,var(--accent));background:color-mix(in srgb,var(--section-color,var(--accent)) 18%,transparent)}
.section-pill.inactive{opacity:.55}
.section-pill.disabled{opacity:.35;border-style:dashed}
.section-choice{margin:4px 0;padding-left:12px}
.section-choice.depth-1{margin-left:8px}
.section-choice.depth-2{margin-left:16px}
.section-choice.depth-3{margin-left:24px}
.section-choice .section-group{font-weight:600;color:var(--muted);margin:4px 0}
.section-choice label{display:inline-flex;align-items:center;gap:8px;flex-wrap:nowrap}
.section-choice label span{white-space:normal;line-height:1.25;overflow-wrap:anywhere}
.section-choice small{margin-left:6px}
.section-actions{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;align-items:center}
.section-actions .hint{font-size:11px;color:var(--muted)}
.section-choice-tree{display:flex;flex-direction:column;gap:4px;max-height:240px;overflow:auto;padding:8px;border:1px solid var(--grid);border-radius:8px;background:var(--surface-alt)}
.section-choices{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow:auto;padding:8px;border:1px solid var(--grid);border-radius:8px;background:var(--surface-alt)}
.section-choices-new{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border:1px solid var(--grid);border-radius:8px;background:var(--surface-alt);max-height:200px;overflow:auto}

.calendar{
  background:var(--panel);
  border:1px solid var(--grid);
  border-radius:10px;
  overflow:visible;
  position:relative;
  isolation:isolate;
}

.cal-header{
  display:grid;
  grid-template-columns:64px 48px repeat(7,1fr);
  background:var(--surface-alt);
  border-bottom:1px solid var(--grid);
  position:sticky;
  top:0;
  z-index:10;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.cal-header .cell{padding:8px 10px;color:var(--muted);border-left:1px solid var(--grid)}
.cal-header .cell:first-child{border-left:none}
.cal-header .month-header{border-left:none;font-size:12px;letter-spacing:.1em;text-transform:uppercase}

.week-row{position:relative}
.week-grid{display:grid;grid-template-columns:64px 48px repeat(7,1fr)}
.week-grid .wk{display:flex;align-items:center;justify-content:flex-end;color:var(--wk-num);font-size:12px;border-right:1px solid var(--grid);padding-right:12px}
.week-grid .day{min-height:54px;padding:6px 6px;border-left:1px solid var(--grid);border-top:1px solid var(--grid)}
.week-grid .day .date{font-size:12px;color:var(--muted)}
.week-row:nth-child(odd) .week-grid .day{background:var(--wk-alt)}

.week-grid .wk a{color:var(--wk-num);text-decoration:none;padding:6px 8px;display:block;width:100%;height:100%}
.week-grid .wk a:hover{color:var(--accent)}
.week-grid .day .date a{color:var(--muted);text-decoration:none}
.week-grid .day .date a:hover{color:var(--accent)}

.month-cell{
  border-left:1px solid var(--grid);
  border-top:1px solid var(--grid);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.05em;
  min-height:46px;
}

/* Events layer */
.events{position:absolute;left:calc(64px + 48px);right:0;top:34px;bottom:6px;padding:0 4px;display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:minmax(30px,42px);gap:2px}

.event{position:relative;border-radius:10px;padding:4px 8px;font-size:12px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid transparent;cursor:pointer;transition:filter .15s ease,transform .15s ease;--category-color:var(--accent);max-width:100%;min-width:0;width:100%}
.event.holiday-event{border-style:solid;border-color:#26c6da}
.event:hover{filter:brightness(1.06);transform:translateY(-1px);z-index:5}
.event:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.event .title{font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.event .meta{opacity:.85;display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.event.grouped-event{box-shadow:inset 0 0 0 1px color-mix(in srgb,#ffffff 40%,transparent)}
.event.grouped-event .title{padding-right:74px}
.event .event-group-count{position:absolute;top:4px;right:6px;display:inline-flex;align-items:center;padding:1px 6px;border-radius:999px;background:rgba(0,0,0,.22);font-size:10px;font-weight:600;line-height:1.15;white-space:nowrap;max-width:72px;overflow:hidden;text-overflow:ellipsis}
.event.private-event{border-style:dashed}
.event-row.private-event{border-style:dashed}
.event .private-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;font-size:10px;background:#45505b;color:#ffffff}
.event-row .private-tag{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:999px;font-size:11px;background:#45505b;color:#ffffff}
.private-tag::before{content:"\01F512";margin-right:4px;display:inline-block}
.section-dots{display:flex;gap:3px;margin-top:2px}
.section-dot{width:6px;height:6px;border-radius:50%;background:var(--section-color,var(--accent));border:1px solid rgba(0,0,0,.25)}
.section-dot-more{font-size:10px;color:var(--muted)}
.event-expanded{position:fixed;top:0;left:0;background:inherit;color:inherit;padding:8px 10px;border-radius:12px;box-shadow:0 10px 18px rgba(0,0,0,.4);white-space:normal;z-index:30;pointer-events:none;opacity:0;transform:translateY(-6px);transition:opacity .15s ease,transform .15s ease;max-width:min(320px,90vw)}
.event-expanded .section-dots{margin-top:4px}
.event-expanded.active{opacity:1;transform:translateY(0)}
.event-expanded .title{display:block;font-weight:600;margin-bottom:4px}
.event-expanded .meta{display:block;font-size:11px;margin-bottom:2px}
.event-group-popover{position:fixed;z-index:60;padding:10px;border-radius:12px;border:1px solid var(--grid);background:var(--panel);box-shadow:0 12px 26px rgba(0,0,0,.33)}
.event-group-popover-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.event-group-list{display:flex;flex-direction:column;gap:8px;max-height:min(48vh,360px);overflow:auto;padding-right:2px}
.event-group-item{border:1px solid var(--grid);border-radius:10px;padding:8px;background:var(--surface-soft)}
.event-group-item-title{font-size:12px;font-weight:600;display:flex;align-items:center;gap:7px}
/* [16/08/2026] Bolinha na cor do chip -- so aparece nos itens do popover do
   "+N mais" (buildOverflowPopoverItem), o popover de secoes agrupadas nao
   cria esse elemento. Ver Roadmap "Popover rico no +N mais". */
.event-group-item-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.event-group-item-meta{font-size:11px;color:var(--muted);margin-top:3px}
.event-group-item-actions{display:flex;justify-content:flex-end;margin-top:7px}

.foot{padding:10px 18px;color:var(--muted)}

/* Simple views: form and lists */
.pane{background:var(--panel);border:1px solid var(--grid);border-radius:10px;padding:14px}
.pane h2{margin:6px 0 12px 0}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-split{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:flex-start}
.form-split .form-main,
.form-split .form-side{display:flex;flex-direction:column;gap:12px}
.form-split .form-side-card{padding:12px;border:1px solid var(--grid);border-radius:10px;background:var(--surface);display:flex;flex-direction:column;gap:10px}
.form-split .form-side-card h3{margin:0;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.form-split .form-side-card .field{gap:4px}
.form-split .form-side .toggle{margin-top:4px}
.form-split .field-notes textarea{min-height:120px}
.form-split .field-sections{display:flex;flex-direction:column;gap:8px}
.form-split .field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form-split .field-row label{display:flex;flex-direction:column;gap:6px}
.form-split .form-footer{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.form .field{display:flex;flex-direction:column;gap:6px}
.form input,.form select,.form textarea{background:var(--surface-soft);color:var(--ink);border:1px solid var(--grid);padding:8px 10px;border-radius:8px}
.form textarea{min-height:80px;grid-column:1/-1}
.hint{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.location-area-field{display:flex;flex-direction:column;gap:8px}
.location-area-options{display:flex;flex-wrap:wrap;gap:8px}
.location-area-choice{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--grid);border-radius:8px;background:var(--surface-alt);font-size:12px}
.location-area-choice input{accent-color:var(--accent)}
.location-area-choice span{color:var(--ink)}
.actions{display:flex;gap:10px;margin-top:10px}
.categories-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin:0 0 6px}
.categories-header p{margin:0;flex:1;min-width:0}
.categories-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:8px}
.categories-header p{margin:0;flex:1;min-width:0}
.btn.danger{border-color:#c62828;color:#f5dde1;background:#8e1c1c}
.list{display:flex;flex-direction:column;gap:8px}
.item-row{display:flex;justify-content:space-between;align-items:center;background:var(--surface-alt);border:1px solid var(--grid);border-radius:8px;padding:10px 12px;gap:12px}
.event-row-main{display:flex;flex-direction:column;gap:4px;flex:1}
.event-title{font-weight:600;font-size:14px}
.event-schedule{font-size:12px;color:var(--muted)}
.event-location{font-size:12px;color:var(--muted)}
.event-row-actions{display:flex;gap:8px}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid var(--grid);width:max-content}
.info-grid{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:12px 0}
.info-grid dt{color:var(--muted);font-size:12px}
.info-grid dd{margin:0;font-size:14px}
.category-row{align-items:center;gap:10px}
.category-row .swatch{width:22px;height:12px;border-radius:10px}
.category-name{flex:1;min-width:140px;background:var(--surface-soft);color:var(--ink);border:1px solid var(--grid);padding:6px 8px;border-radius:6px}
.category-color{width:60px;height:32px;border-radius:6px;border:1px solid var(--grid);background:var(--surface-soft);color:var(--ink)}
.category-color-hex{width:110px;height:32px;margin-left:8px;border-radius:6px;border:1px solid var(--grid);background:var(--surface-soft);color:var(--ink);padding:0 8px;font-family:monospace;text-transform:uppercase}
.section-color-hex{width:120px;height:32px;margin-left:8px;border-radius:6px;border:1px solid var(--grid);background:var(--surface-soft);color:var(--ink);padding:0 8px;font-family:monospace;text-transform:uppercase}
.category-actions{display:flex;gap:8px}
.user-row{flex-direction:column;align-items:stretch}
.users-accordion-card{
  padding:0;
  gap:0;
  border-radius:12px;
  background:var(--panel);
  border:1px solid var(--grid);
  box-shadow:0 1px 3px rgba(15,23,42,.12);
  overflow:hidden;
}
.users-accordion-card.is-inactive{
  background:linear-gradient(180deg,#f3f4f6 0%,#e5e7eb 100%);
}
.users-accordion-card.is-inactive .users-accordion-toggle-label strong,
.users-accordion-card.is-inactive .users-accordion-toggle-label span{
  color:#6b7280;
}
.users-accordion-card.is-open > .users-accordion-toggle,
.users-accordion-card.is-open > .users-card-header{border-bottom:1px solid var(--grid)}
.users-accordion-toggle{
  border:0;
  width:100%;
  text-align:left;
  font:inherit;
  color:inherit;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:12px;
  cursor:pointer;
  padding:12px 14px;
  background:transparent;
  transition:background .2s ease;
}
.users-accordion-toggle:hover{background:color-mix(in srgb,var(--accent) 14%,#ffffff)}
.users-accordion-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.users-accordion-toggle-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:color-mix(in srgb,var(--accent) 16%,#ffffff);
  color:color-mix(in srgb,var(--accent) 78%,#00463f);
  font-size:12px;
  flex:0 0 auto;
  transition:transform .2s ease;
}
.users-accordion-card.is-open .users-accordion-toggle-icon{transform:rotate(90deg)}
.users-accordion-toggle-icon .icon{width:12px;height:12px;transform:rotate(-90deg)}
.users-accordion-toggle-label{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.users-accordion-toggle-label strong{
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  line-height:1.2;
}
.users-accordion-toggle-label span{font-size:12px;color:var(--muted)}
.users-accordion-toggle-tag{
  display:inline-flex;
  align-items:center;
  padding:5px 12px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--grid));
  background:color-mix(in srgb,var(--accent) 14%,#ffffff);
  font-size:12px;
  font-weight:600;
  color:color-mix(in srgb,var(--accent) 78%,#00463f);
  margin-left:auto;
}
.users-accordion-content{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:0 14px;
  max-height:0;
  opacity:0;
  overflow:hidden;
  background:var(--surface-alt);
  transition:max-height .28s cubic-bezier(.4,0,.2,1),opacity .22s ease,padding .28s cubic-bezier(.4,0,.2,1);
}
.users-accordion-card.is-collapsed .users-accordion-content{pointer-events:none}
.users-accordion-card.is-open .users-accordion-content{padding:12px 14px;max-height:2200px;opacity:1}
.user-row-main{display:flex;flex-direction:column;gap:10px;flex:1}
.user-row-actions{display:flex;gap:8px;justify-content:flex-end;width:100%}
.field.inline label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.category-choices-wrapper{display:flex;flex-wrap:wrap;gap:6px}
  .category-choices{display:flex;flex-wrap:wrap;gap:6px}
  .category-selection-panel{margin:8px 0 12px}
  .category-select-toolbar{display:flex;justify-content:flex-end;margin-bottom:6px}
  .category-select-toolbar .btn{padding:6px 12px;font-size:12px}
.category-choice{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--grid);border-radius:8px;background:var(--surface-alt)}
.category-choice input{accent-color:var(--accent)}
.category-choice .swatch{width:14px;height:8px;border-radius:4px}
.legend .item .swatch{width:18px;height:10px;border-radius:8px}
.legend .item input{margin-right:2px}
.legend-filters .btn{padding:4px 8px;font-size:12px}
.category-choices-field{display:flex;flex-direction:column;gap:6px}
.category-choices-field .category-choices{background:var(--surface-alt);border:1px dashed var(--grid);padding:8px;border-radius:8px}
.toggle{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.toggle input{accent-color:var(--accent)}
.user-row .toggle{align-self:flex-start}
.legend .item{gap:10px}
.legend .item .lbl{flex:1}
.section-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.section-badge{display:inline-flex;align-items:center;gap:8px;padding:3px 10px;border-radius:999px;font-size:11px;background:var(--surface-strong);border:1px solid rgba(255,255,255,.05);color:var(--ink);box-shadow:0 0 0 1px var(--section-color,var(--accent)) inset;white-space:normal;line-height:1.25}
.section-badge::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--section-color,var(--accent));box-shadow:0 0 0 2px rgba(0,0,0,.45);flex-shrink:0}
.section-badges.compact{gap:4px;margin-top:2px}
.section-badges.compact .section-badge{font-size:10px;padding:2px 6px}
.section-badges.compact .section-badge.section-badge-count{box-shadow:none;border-style:dashed;color:var(--muted);font-weight:600}
.section-badges.compact .section-badge.section-badge-count::before{display:none}

.holiday-note{margin:8px 0;border:1px solid rgba(38,198,218,.4);background:rgba(38,198,218,.08);color:#9be8f4;padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.4}

.section-admin-pane{display:flex;flex-direction:column;gap:18px}
.section-admin-toolbar{display:flex;flex-wrap:wrap;gap:10px}
.section-admin-summary{margin:0;font-size:13px;color:var(--muted)}
.section-admin-status{padding:10px 12px;border-radius:10px;border:1px solid var(--grid);background:color-mix(in srgb,var(--surface-alt) 80%,var(--surface));font-size:13px;transition:.2s ease color,.2s ease border-color,.2s ease background}
.section-admin-status[data-tone="success"]{border-color:color-mix(in srgb,var(--accent) 60%,var(--surface-strong));background:color-mix(in srgb,var(--accent) 25%,var(--surface));color:var(--surface-alt)}
.section-admin-status[data-tone="error"]{border-color:#c62828;background:color-mix(in srgb,#c62828 20%,var(--surface));color:var(--surface-alt)}
.section-admin-status[data-tone="info"]{color:var(--muted)}
.section-admin-tree{display:flex;flex-direction:column;gap:20px}
.section-admin-node{background:var(--surface-alt);border:1px solid var(--grid);border-radius:12px;padding:14px;box-shadow:0 10px 18px rgba(0,0,0,.28)}
.section-admin-node.depth-1{margin-left:12px}
.section-admin-node.depth-2{margin-left:24px}
.section-admin-node.depth-3{margin-left:36px}
.section-admin-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.section-admin-main{flex:1;min-width:220px;display:flex;flex-direction:column;gap:6px}
.section-admin-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-left:auto}
.section-admin-name{background:var(--surface-soft);border:1px solid var(--grid);border-radius:8px;color:var(--ink);padding:6px 10px;font-size:13px;min-width:200px;max-width:320px;height:32px}
.section-admin-name.is-root{border-color:transparent;font-weight:600}
.section-admin-path{font-size:12px;color:var(--muted)}
.section-admin-meta{font-size:11px;color:var(--muted)}
.section-admin-attendance-toggle{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px solid var(--grid);border-radius:999px;background:var(--surface-soft);font-size:12px;color:var(--ink);white-space:nowrap}
.section-admin-attendance-toggle input{accent-color:var(--accent)}
.section-admin-attendance-toggle input:disabled{cursor:not-allowed}
.section-admin-attendance-toggle input:disabled + span{opacity:.65}
.section-admin-color{width:44px;height:32px;padding:0;border-radius:8px;border:1px solid var(--grid);background:transparent;cursor:pointer}
.section-admin-color::-webkit-color-swatch-wrapper{padding:2px}
.section-admin-color::-webkit-color-swatch{border:none;border-radius:6px}
.section-admin-color::-moz-color-swatch{border:none;border-radius:6px}
.section-admin-actions .btn.small{padding:6px 10px;font-size:12px;line-height:1;height:32px}
.section-admin-color-hex{width:110px;height:32px;border-radius:6px;border:1px solid var(--grid);background:var(--surface-soft);color:var(--ink);padding:0 8px;font-family:monospace;text-transform:uppercase}
.section-admin-color-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px;padding:10px 12px;border:1px dashed var(--grid);border-radius:10px;background:var(--surface)}
.section-admin-color-preview{width:18px;height:18px;border-radius:50%;background:var(--section-color,var(--accent));box-shadow:0 0 0 3px rgba(0,0,0,.45) inset}
.section-admin-color-hint{font-size:12px;color:var(--muted)}
.section-admin-children{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.section-admin-add{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:10px;border:1px dashed var(--grid);background:var(--surface-soft)}
.section-admin-add input{background:var(--surface-soft);border:1px solid var(--grid);border-radius:8px;color:var(--ink);padding:6px 10px}
.section-admin-add-actions{display:flex;flex-wrap:wrap;gap:8px}

.preview-summary{margin:0;font-size:13px;color:var(--muted)}
.preview-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.preview-list{display:flex;flex-direction:column;gap:10px}
.preview-row{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border:1px solid var(--grid);border-radius:10px;background:var(--surface)}
.preview-select{display:flex;align-items:flex-start;padding-top:4px}
.preview-select input{accent-color:var(--accent)}
.preview-row-main{flex:1;display:flex;flex-direction:column;gap:6px}
.preview-title{font-weight:600;font-size:14px}
.preview-meta{font-size:12px;color:var(--muted)}
.preview-status{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;background:var(--surface);color:#cdd8e6;border:1px solid rgba(255,255,255,.05);width:max-content}
.preview-status.locked{background:var(--surface-strong);color:#f4c4ca;border-color:#c62828}
.preview-status.warn{background:var(--surface-strong);color:#f4deb1;border-color:#b5882e}
.preview-row-actions{display:flex;flex-direction:column;gap:8px;min-width:120px;align-items:flex-end}
.preview-locked-note{font-size:12px;color:var(--muted)}
.preview-actions{justify-content:flex-start;gap:10px}

.section-planning-pane{
  --section-planning-primary:var(--accent);
  --section-planning-primary-strong:color-mix(in srgb,var(--accent) 82%,#073b36);
  --section-planning-primary-soft:color-mix(in srgb,var(--accent) 18%,transparent);
  --section-planning-surface:color-mix(in srgb,var(--panel) 92%,var(--surface) 8%);
  --section-planning-surface-soft:color-mix(in srgb,var(--surface-alt) 74%,var(--surface-soft) 26%);
  --section-planning-border:color-mix(in srgb,var(--grid) 90%,var(--ink) 10%);
  --section-planning-border-soft:color-mix(in srgb,var(--grid) 76%,var(--surface-strong) 24%);
  --section-planning-border-strong:color-mix(in srgb,var(--ink) 38%,var(--grid) 62%);
  --section-planning-text:var(--ink);
  --section-planning-muted:var(--muted);
  --section-planning-table-min-width:clamp(1280px,180vw,2100px);
  --section-planning-sheet-bg:var(--section-planning-surface);
  --section-planning-sheet-head:color-mix(in srgb,var(--section-planning-surface-soft) 82%,var(--section-planning-surface));
  --section-planning-sheet-row:var(--section-planning-surface);
  --section-planning-sheet-row-alt:color-mix(in srgb,var(--section-planning-surface-soft) 58%,var(--section-planning-surface) 42%);
  --section-planning-sheet-border:color-mix(in srgb,var(--section-planning-border-soft) 84%,var(--section-planning-border) 16%);
  --section-planning-sheet-sub:color-mix(in srgb,var(--section-planning-muted) 92%,transparent);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.section-planning-hint{margin:0;font-size:13px;color:var(--section-planning-muted)}
.section-planning-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;align-items:end}
.section-planning-controls .field{display:flex;flex-direction:column;gap:6px;color:var(--section-planning-muted);font-size:12px}
.section-planning-controls .field.field-wide{grid-column:span 2}
.section-planning-field > span{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--section-planning-muted)}
.section-planning-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:8px 10px;
  border:1px solid var(--section-planning-border);
  border-radius:8px;
  background:var(--section-planning-surface);
  color:var(--section-planning-muted);
  font-size:12px;
}
.section-planning-toggle input{accent-color:var(--section-planning-primary)}
.section-planning-input,
.section-planning-select,
.section-planning-textarea{
  width:100%;
  background:var(--section-planning-surface);
  color:var(--section-planning-text);
  border:1px solid var(--section-planning-border);
  border-radius:8px;
  padding:9px 11px;
  font-size:13px;
  line-height:1.4;
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
}
.section-planning-input:hover,
.section-planning-select:hover,
.section-planning-textarea:hover{border-color:var(--section-planning-border-strong)}
.section-planning-input:focus,
.section-planning-select:focus,
.section-planning-textarea:focus{
  border-color:var(--section-planning-primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--section-planning-primary) 20%,transparent);
  outline:none;
}
.section-planning-select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:34px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--section-planning-primary) 50%),
    linear-gradient(135deg, var(--section-planning-primary) 50%, transparent 50%),
    linear-gradient(to right, color-mix(in srgb,var(--section-planning-border-soft) 70%,transparent), color-mix(in srgb,var(--section-planning-border-soft) 70%,transparent));
  background-position:
    calc(100% - 16px) calc(50% + 1px),
    calc(100% - 11px) calc(50% + 1px),
    calc(100% - 2.1rem) 50%;
  background-size:5px 5px,5px 5px,1px 60%;
  background-repeat:no-repeat;
}
.section-planning-input::placeholder,
.section-planning-textarea::placeholder{color:color-mix(in srgb,var(--section-planning-muted) 88%,transparent)}
.section-planning-input:disabled,
.section-planning-select:disabled,
.section-planning-textarea:disabled{
  background:color-mix(in srgb,var(--section-planning-surface-soft) 88%,var(--section-planning-surface));
  border-color:var(--section-planning-border-soft);
  color:color-mix(in srgb,var(--section-planning-muted) 78%,transparent);
  cursor:not-allowed;
}
.section-planning-textarea{min-height:74px;resize:vertical}
body[data-theme='light'] .section-planning-input,
body[data-theme='light'] .section-planning-select,
body[data-theme='light'] .section-planning-textarea{color-scheme:light}
body[data-theme='dark'] .section-planning-input,
body[data-theme='dark'] .section-planning-select,
body[data-theme='dark'] .section-planning-textarea{color-scheme:dark}
body[data-theme='system'] .section-planning-input,
body[data-theme='system'] .section-planning-select,
body[data-theme='system'] .section-planning-textarea{color-scheme:light dark}
@media (prefers-color-scheme: dark){
  body[data-theme='system'] .section-planning-input,
  body[data-theme='system'] .section-planning-select,
  body[data-theme='system'] .section-planning-textarea{color-scheme:dark}
}
@media (prefers-color-scheme: light){
  body[data-theme='system'] .section-planning-input,
  body[data-theme='system'] .section-planning-select,
  body[data-theme='system'] .section-planning-textarea{color-scheme:light}
}

.section-planning-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:36px;
  border-radius:8px;
  border:1px solid color-mix(in srgb,var(--section-planning-primary) 55%,var(--section-planning-border-soft));
  background:var(--section-planning-surface);
  color:var(--section-planning-primary-strong);
  font-size:13px;
  font-weight:600;
  line-height:1;
  padding:0 14px;
  cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease,transform .12s ease;
}
.section-planning-btn:hover{background:var(--section-planning-primary-soft);border-color:var(--section-planning-primary)}
.section-planning-btn:active{transform:translateY(1px)}
.section-planning-btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--section-planning-primary) 24%,transparent)}
.section-planning-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.section-planning-btn-primary{
  background:var(--section-planning-primary);
  border-color:var(--section-planning-primary);
  color:var(--surface-alt);
}
.section-planning-btn-primary:hover{
  background:var(--section-planning-primary-strong);
  border-color:var(--section-planning-primary-strong);
}
.section-planning-btn-small{height:30px;padding:0 10px;font-size:12px}

.section-planning-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.section-planning-summary{margin:0;font-size:13px;color:var(--section-planning-muted)}
.section-planning-toolbar-actions{display:flex;flex-wrap:wrap;gap:8px}
.section-planning-table-wrap{overflow:auto;border:1px solid var(--section-planning-border-soft);border-radius:12px;background:var(--section-planning-surface)}
.section-planning-table{width:100%;min-width:var(--section-planning-table-min-width);border-collapse:collapse;table-layout:fixed}
.section-planning-table col.section-planning-col-week{width:80px}
.section-planning-table col.section-planning-col-date{width:120px}
.section-planning-table col.section-planning-col-event{width:clamp(190px,20vw,230px)}
.section-planning-table col.section-planning-col-sections{width:clamp(160px,16vw,180px)}
.section-planning-table col.section-planning-col-category{width:150px}
.section-planning-table col.section-planning-col-owner{width:clamp(150px,15vw,170px)}
.section-planning-table col.section-planning-col-objective{width:clamp(170px,18vw,210px)}
.section-planning-table col.section-planning-col-agenda{width:clamp(190px,20vw,240px)}
.section-planning-table col.section-planning-col-materials{width:clamp(190px,20vw,240px)}
.section-planning-table col.section-planning-col-status{width:130px}
.section-planning-table col.section-planning-col-notes{width:clamp(180px,19vw,220px)}
.section-planning-table col.section-planning-col-actions{width:clamp(180px,16vw,220px)}
.section-planning-table th{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--section-planning-surface-soft);
  padding:8px 10px;
  border-bottom:1px solid var(--section-planning-border-soft);
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--section-planning-muted);
  text-align:left;
}
.section-planning-table td{padding:8px;vertical-align:top;border-top:1px solid var(--section-planning-border-soft)}
.section-planning-table th:last-child,
.section-planning-table td:last-child{
  position:sticky;
  right:0;
  z-index:2;
  background:var(--section-planning-surface);
  box-shadow:-1px 0 0 var(--section-planning-border-soft);
}
.section-planning-table th:last-child{
  z-index:4;
  background:var(--section-planning-surface-soft);
}
.section-planning-table tr:nth-child(odd){background:color-mix(in srgb,var(--section-planning-surface-soft) 72%,transparent)}
.section-planning-table tr.is-readonly{background:color-mix(in srgb,var(--section-planning-surface-soft) 88%,var(--section-planning-surface))}
.section-planning-table tr.is-dirty td{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--section-planning-primary) 40%,transparent)}
.section-planning-table tr.is-conflict td{box-shadow:inset 0 0 0 1px color-mix(in srgb,#ef4444 52%,transparent)}
.section-planning-table td .section-planning-input,
.section-planning-table td .section-planning-select,
.section-planning-table td .section-planning-textarea{min-width:100%}
.section-planning-cell-week{white-space:nowrap;color:var(--section-planning-muted);font-size:12px;font-variant-numeric:tabular-nums}
.section-planning-cell-date{white-space:nowrap;min-width:110px}
.section-planning-cell-event{min-width:230px;max-width:300px}
.section-planning-event-title{font-size:13px;font-weight:600;line-height:1.35}
.section-planning-title-input{font-weight:600}
.section-planning-sub{margin-top:4px;font-size:12px;color:var(--section-planning-muted);line-height:1.35}
.section-planning-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.section-planning-links a{font-size:12px;color:var(--section-planning-primary);text-decoration:none}
.section-planning-links a:hover{text-decoration:underline}
.section-planning-cell-sections{min-width:170px}
.section-planning-program-cell{display:flex;flex-direction:column;gap:6px}
.section-planning-program-summary{margin-top:0}
.section-planning-program-summary.is-empty{font-style:italic}
.section-planning-row-actions{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:180px}
.section-planning-lock{font-size:11px;color:var(--section-planning-muted)}
.section-planning-lock-conflict{color:#b91c1c;font-weight:600}
.section-planning-empty{
  margin:0;
  padding:12px;
  border:1px dashed var(--section-planning-border);
  border-radius:10px;
  background:var(--section-planning-surface-soft);
  color:var(--section-planning-muted);
  font-size:13px;
}

.section-planning-program-modal{
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(13,20,33,.45);
}
.section-planning-program-modal.hidden{display:none}
.section-planning-program-dialog{
  width:min(920px, calc(100vw - 24px));
  max-height:calc(100vh - 36px);
  overflow:auto;
  border-radius:14px;
  border:1px solid var(--section-planning-border-soft);
  background:var(--section-planning-surface);
  box-shadow:0 16px 36px rgba(13,20,33,.28);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.section-planning-program-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.section-planning-program-head-info h3{margin:0;font-size:17px}
.section-planning-program-head-info p{margin:4px 0 0 0;font-size:12px;color:var(--section-planning-muted)}
.section-planning-program-meta{margin:0;font-size:12px;color:var(--section-planning-muted)}
.section-planning-program-duration{margin:0;font-size:12px;font-weight:600;color:var(--section-planning-primary-strong)}
.section-planning-program-steps{display:flex;flex-direction:column;gap:10px}
.section-planning-program-step{
  border:1px solid var(--section-planning-border-soft);
  border-radius:10px;
  padding:10px;
  background:var(--section-planning-surface-soft);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.section-planning-program-step-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.section-planning-program-step-head-actions{display:flex;align-items:center;gap:6px}
.section-planning-program-grid{
  display:grid;
  gap:8px;
  grid-template-columns:minmax(0,1.5fr) minmax(0,0.8fr) minmax(0,1fr);
}
.section-planning-program-step-details{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .24s cubic-bezier(.4,0,.2,1),opacity .2s ease;
}
.section-planning-program-step-details.is-open{
  max-height:460px;
  opacity:1;
}
.section-planning-program-actions{display:flex;flex-wrap:wrap;gap:8px}
.section-planning-program-actions .section-planning-btn-primary{margin-left:auto}
.section-planning-attendance-dialog{max-width:min(920px,calc(100vw - 32px))}
.section-planning-attendance-controls{
  display:grid;
  gap:8px;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  align-items:end;
}
.section-planning-attendance-quick-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.section-planning-attendance-table-wrap{
  border:1px solid var(--section-planning-border-soft);
  border-radius:10px;
  background:var(--section-planning-surface-soft);
  overflow:auto;
  max-height:360px;
}
.section-planning-attendance-table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  font-size:13px;
}
.section-planning-attendance-table th{
  position:sticky;
  top:0;
  z-index:1;
  background:var(--section-planning-surface);
  border-bottom:1px solid var(--section-planning-border-soft);
  color:var(--section-planning-muted);
  text-align:left;
  padding:8px 10px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.section-planning-attendance-table td{
  border-bottom:1px solid var(--section-planning-border-soft);
  padding:8px 10px;
  vertical-align:middle;
}
.section-planning-attendance-table tr:last-child td{border-bottom:none}
.section-planning-attendance-check{display:inline-flex;align-items:center;gap:6px}
.section-planning-attendance-check input{accent-color:var(--section-planning-primary)}
.section-planning-attendance-notes{width:100%}
.section-planning-attendance-status{margin:0;font-size:12px;color:var(--section-planning-muted)}

.section-planning-bulk-card{
  border:1px solid var(--section-planning-border-soft);
  border-radius:12px;
  background:var(--section-planning-surface);
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0;
  box-shadow:0 1px 3px rgba(15,23,42,.08);
}
.section-planning-bulk-card.is-open > .section-planning-bulk-toggle{border-bottom:1px solid var(--section-planning-border-soft)}
.section-planning-bulk-toggle{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:12px;
  cursor:pointer;
  padding:12px 14px;
  background:linear-gradient(180deg,var(--section-planning-surface) 0%,color-mix(in srgb,var(--section-planning-primary-soft) 40%,var(--section-planning-surface)) 100%);
  transition:background .2s ease;
}
.section-planning-bulk-toggle{border:0;width:100%;text-align:left;font:inherit;color:inherit}
.section-planning-bulk-toggle:focus-visible{outline:2px solid var(--section-planning-primary);outline-offset:-2px}
.section-planning-bulk-toggle:hover{background:var(--section-planning-primary-soft)}
.section-planning-bulk-toggle-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--section-planning-primary-soft);
  color:var(--section-planning-primary-strong);
  font-size:12px;
  flex:0 0 auto;
  transition:transform .2s ease;
}
.section-planning-bulk-card.is-open .section-planning-bulk-toggle-icon{transform:rotate(90deg)}
.section-planning-bulk-toggle-icon .icon{width:12px;height:12px;transform:rotate(-90deg)}
.section-planning-bulk-toggle-label{display:flex;flex-direction:column;gap:2px}
.section-planning-bulk-toggle-label strong{font-size:15px;font-weight:600;color:var(--section-planning-text)}
.section-planning-bulk-toggle-label span{font-size:12px;color:var(--section-planning-muted)}
.section-planning-bulk-toggle-tag{
  display:inline-flex;
  align-items:center;
  padding:5px 12px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--section-planning-primary) 35%,var(--section-planning-border-soft));
  background:var(--section-planning-primary-soft);
  font-size:12px;
  font-weight:600;
  color:var(--section-planning-primary-strong);
  margin-left:auto;
}
.section-planning-bulk-content{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:0 14px;
  max-height:0;
  opacity:0;
  overflow:hidden;
  background:var(--section-planning-surface);
  transition:max-height .28s cubic-bezier(.4,0,.2,1),opacity .22s ease,padding .28s cubic-bezier(.4,0,.2,1);
}
.section-planning-bulk-card.is-collapsed .section-planning-bulk-content{pointer-events:none}
.section-planning-bulk-card.is-open .section-planning-bulk-content{padding:12px 14px;max-height:1400px;opacity:1}
.section-planning-bulk-head h3{margin:0;font-size:15px}
.section-planning-bulk-head p{margin:4px 0 0 0;font-size:12px;color:var(--section-planning-muted)}
.section-planning-bulk-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.section-planning-bulk-form .field{display:flex;flex-direction:column;gap:6px;color:var(--section-planning-muted);font-size:12px}
.section-planning-bulk-form .field.field-wide{grid-column:span 2}
.section-planning-bulk-months{grid-column:1/-1;border:1px solid var(--section-planning-border-soft);border-radius:10px;padding:10px;background:var(--section-planning-surface-soft)}
.section-planning-bulk-months-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;color:var(--section-planning-muted);font-size:12px}
.section-planning-bulk-month-actions{display:flex;gap:6px;flex-wrap:wrap}
.section-planning-bulk-actions{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
.section-planning-bulk-summary{grid-column:1/-1;margin:0;font-size:12px;color:var(--section-planning-muted)}
.section-planning-bulk-preview{grid-column:1/-1;display:flex;flex-direction:column;gap:8px;max-height:260px;overflow:auto}
.section-planning-bulk-preview-row{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--section-planning-border-soft);border-radius:10px;background:var(--section-planning-surface)}
.section-planning-bulk-preview-row input[type="checkbox"]{accent-color:var(--section-planning-primary);width:16px;height:16px;margin-top:2px}
.section-planning-bulk-preview-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.section-planning-bulk-preview-title{font-size:13px;font-weight:600}
.section-planning-bulk-preview-meta{font-size:12px;color:var(--section-planning-muted)}
.section-planning-bulk-preview-status{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;border:1px solid var(--section-planning-border);width:max-content}
.section-planning-bulk-preview-status.locked{border-color:#c62828;color:#a91b2f}
.section-planning-bulk-preview-status.warn{border-color:#b5882e;color:#8a651f}

.section-planning-save-reminder{
  position:fixed;
  right:104px;
  bottom:18px;
  z-index:55;
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--section-planning-border-soft);
  border-radius:12px;
  background:var(--section-planning-surface);
  box-shadow:0 8px 20px rgba(13,20,33,.18);
}
.section-planning-save-reminder-text{font-size:12px;color:var(--section-planning-muted);white-space:nowrap}

.section-planning-pane.is-sheet-theme{
  --section-planning-table-min-width:2100px;
}
.section-planning-pane.is-sheet-theme .section-planning-table-wrap{border-radius:0;background:var(--section-planning-sheet-bg)}
.section-planning-pane.is-sheet-theme .section-planning-table th{background:var(--section-planning-sheet-head);color:var(--section-planning-text);border-color:var(--section-planning-sheet-border);font-size:10px}
.section-planning-pane.is-sheet-theme .section-planning-table td{background:var(--section-planning-sheet-row);border-color:var(--section-planning-sheet-border)}
.section-planning-pane.is-sheet-theme .section-planning-table tr:nth-child(odd) td{background:var(--section-planning-sheet-row-alt)}
.section-planning-pane.is-sheet-theme .section-planning-table th:last-child{background:var(--section-planning-sheet-head)}
.section-planning-pane.is-sheet-theme .section-planning-table td:last-child{background:var(--section-planning-sheet-row)}
.section-planning-pane.is-sheet-theme .section-planning-input,
.section-planning-pane.is-sheet-theme .section-planning-select,
.section-planning-pane.is-sheet-theme .section-planning-textarea{background:var(--section-planning-sheet-row);border-color:var(--section-planning-sheet-border);color:var(--section-planning-text);border-radius:4px;padding:6px 8px;font-size:12px}
.section-planning-pane.is-sheet-theme .section-planning-sub{color:var(--section-planning-sheet-sub)}

body[data-theme='light'] .section-planning-pane.is-sheet-theme{
  --section-planning-sheet-row-alt:#f9fafb;
  --section-planning-sheet-head:#f3f4f6;
  --section-planning-sheet-border:#d1d5db;
  --section-planning-sheet-sub:#4b5563;
}

body[data-theme='dark'] .section-planning-pane.is-sheet-theme{
  --section-planning-sheet-row:#111827;
  --section-planning-sheet-row-alt:#0f172a;
  --section-planning-sheet-head:#1f2937;
  --section-planning-sheet-border:#334155;
  --section-planning-sheet-sub:#94a3b8;
}

@media (prefers-color-scheme: dark){
  body[data-theme='system'] .section-planning-pane.is-sheet-theme{
    --section-planning-sheet-row:#111827;
    --section-planning-sheet-row-alt:#0f172a;
    --section-planning-sheet-head:#1f2937;
    --section-planning-sheet-border:#334155;
    --section-planning-sheet-sub:#94a3b8;
  }
}

.section-planning-pane .months-grid{display:flex;flex-wrap:wrap;gap:8px}
.section-planning-pane .month-choice{
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border-radius:8px;
  border:1px solid var(--section-planning-border);
  background:var(--section-planning-surface);
  color:var(--section-planning-text);
  font-size:12px;
}
.section-planning-pane .month-choice input{accent-color:var(--section-planning-primary)}
.export-preview{margin-top:18px;padding:12px;background:var(--surface-alt);border:1px solid var(--grid);border-radius:10px;overflow:auto}
.export-preview .calendar{min-width:960px}
.event-row{align-items:flex-start}
.event-row.holiday-event{border-left:3px solid #26c6da;padding-left:10px}
.filters-summary{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px;padding:12px 14px;border:1px solid var(--grid);border-radius:10px;background:var(--surface)}
.event-title,.event-schedule,.event-location{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.filters-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.filters-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.filters-tags{display:flex;flex-wrap:wrap;gap:6px}
.filter-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--grid);background:var(--surface-soft);font-size:12px}
.filter-chip::before{content:'';display:block;width:8px;height:8px;border-radius:50%;background:var(--chip-color,var(--accent))}
.filter-chip.is-empty{padding:4px 8px;color:var(--muted);border-style:dashed}
.list-toolbar{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px;align-items:center}
.list-toolbar label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.list-toolbar select{background:var(--surface-soft);color:var(--ink);border:1px solid var(--grid);padding:6px 10px;border-radius:8px}
.list-nav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}

.admin-pane{display:flex;flex-direction:column;gap:16px}
.admin-status{padding:10px 12px;border-radius:10px;border:1px solid var(--grid);background:color-mix(in srgb,var(--surface-alt) 80%,var(--surface));font-size:13px;color:var(--muted);transition:.2s ease color,.2s ease border-color,.2s ease background}
.admin-status[data-tone="success"]{border-color:color-mix(in srgb,var(--accent) 60%,var(--surface-strong));background:color-mix(in srgb,var(--accent) 20%,var(--surface-soft));color:#004d40}
.admin-status[data-tone="error"]{border-color:#c62828;background:color-mix(in srgb,#c62828 20%,var(--surface));color:var(--surface-alt)}
.admin-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.admin-span-2{grid-column:span 2}
.admin-span-3{grid-column:span 3}
.admin-quick-links{display:flex;flex-wrap:wrap;gap:8px}
.admin-card{background:var(--panel);border:1px solid var(--grid);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:12px;box-shadow:0 10px 18px rgba(0,0,0,.18)}
.admin-card{overflow:hidden}
.admin-card-scroll{max-height:360px;overflow:hidden}
.admin-table-wrap{flex:1;overflow:auto;border-top:1px solid var(--grid); margin-top:10px; padding-top:10px}
.admin-card-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.admin-sync{display:flex;justify-content:flex-end;margin:8px 0 16px}
.admin-sync .btn{white-space:nowrap}
.admin-note{font-size:12px;color:var(--muted);margin:0}
.admin-actions{display:flex;flex-wrap:wrap;gap:10px}
.admin-input,.admin-textarea{background:var(--surface-soft);color:var(--ink);border:1px solid var(--grid);border-radius:8px;padding:8px 10px;font-size:13px}
.admin-input{flex:1;min-width:200px}
.admin-textarea{min-height:80px;resize:vertical}
.admin-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.admin-metric{background:var(--surface-alt);border:1px solid var(--grid);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.admin-metric .metric-label{font-size:12px;color:var(--muted)}
.admin-metric .metric-value{font-size:20px;font-weight:600}
.admin-table{width:100%;border-collapse:collapse;font-size:13px}
.admin-table th{padding:6px 8px;text-align:left;color:var(--muted);border-bottom:1px solid var(--grid);font-weight:500;text-transform:uppercase;letter-spacing:.04em;font-size:11px}
.admin-table td{padding:6px 8px;border-bottom:1px solid var(--grid);color:var(--ink)}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tbody tr:hover{background:var(--surface-strong)}
.brand-preview{padding:8px 12px;border-radius:8px;border:1px dashed var(--grid);background:color-mix(in srgb,var(--surface-alt) 70%,var(--surface));min-width:140px;text-align:center;font-weight:600;color:var(--ink);--preview-accent: var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--preview-accent) 30%,transparent)}
/* [16/08/2026] .admin-note.warning{color:#b45309} removida daqui -- regra
   morta duplicada, competindo com a versao tematizada nova em
   styles.new.css (.shell-redesign .admin-note.warning), que tem
   especificidade maior e cobre fundo/borda tambem, nao so a cor do texto.
   Ver Roadmap "Avisos do painel admin". */

.attendance-pane{display:flex;flex-direction:column;gap:14px}
.attendance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.attendance-card{border:1px solid var(--grid);border-radius:12px;padding:12px;background:var(--surface);display:flex;flex-direction:column;gap:10px;min-width:0}
.attendance-card h3{margin:0;font-size:15px}
.attendance-card-full{grid-column:1/-1}
.attendance-sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;max-height:240px;overflow:auto;padding:6px;border:1px solid var(--grid);border-radius:10px;background:var(--surface-alt)}
.attendance-section-choice{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--grid);border-radius:8px;background:var(--surface)}
.attendance-inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.attendance-inline-form input,
.attendance-inline-form select{height:34px;min-width:160px;border:1px solid var(--grid);border-radius:8px;background:var(--surface-soft);color:var(--ink);padding:0 10px}
.attendance-inline-form input[type="date"]{min-width:150px}
.attendance-inline-form input[type="text"]{min-width:220px}
.attendance-reports{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.attendance-pane .admin-table td input[type="text"],
.attendance-pane .admin-table td select{width:100%;height:32px;border:1px solid var(--grid);border-radius:8px;background:var(--surface-soft);color:var(--ink);padding:0 8px}

@media (max-width: 1280px){
  .section-planning-pane{--section-planning-table-min-width:1560px}
  .section-planning-pane.is-sheet-theme{--section-planning-table-min-width:1760px}
}

@media (max-width: 1080px){
  .section-planning-pane{--section-planning-table-min-width:1440px}
  .section-planning-pane.is-sheet-theme{--section-planning-table-min-width:1600px}
  .section-planning-controls{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
}

@media (max-width: 900px){
  .layout{grid-template-columns:1fr;max-width:100%}
  .legend{order:2}
  .form{grid-template-columns:1fr}
  .form-split{grid-template-columns:1fr}
  .form-split .field-row{grid-template-columns:1fr}
  .form-split .form-footer{justify-content:flex-start}
  .section-planning-controls .field.field-wide{grid-column:auto}
  .section-planning-bulk-form .field.field-wide{grid-column:auto}
  .section-planning-toolbar{flex-direction:column;align-items:flex-start}
  .section-planning-pane{--section-planning-table-min-width:1320px}
  .section-planning-pane.is-sheet-theme{--section-planning-table-min-width:1440px}
  .section-planning-bulk-preview-row{flex-direction:column}
  .section-planning-save-reminder{left:12px;right:12px;bottom:12px;justify-content:space-between}
  .section-planning-save-reminder-text{white-space:normal}
  .section-planning-program-dialog{padding:12px}
  .section-planning-program-grid{grid-template-columns:1fr}
  .section-planning-attendance-controls{grid-template-columns:1fr}
  .section-planning-attendance-quick-actions{justify-content:flex-start}
  .section-planning-attendance-table{min-width:0}
  .section-planning-program-actions .section-planning-btn-primary{margin-left:0}
  .list-toolbar{flex-direction:column;align-items:flex-start}
  .list-nav{justify-content:flex-start}
  .item-row{flex-direction:column;align-items:flex-start}
  .event-row-actions{width:100%}
  .user-row-actions{justify-content:flex-start}
  .topbar-nav{margin:0;justify-content:flex-start}
  .actions-group{margin-left:0;width:100%;justify-content:flex-start}
  .section-admin-node.depth-1,
  .section-admin-node.depth-2,
  .section-admin-node.depth-3{margin-left:0}
  .admin-grid{grid-template-columns:minmax(0,1fr)}
  .admin-span-2,.admin-span-3{grid-column:span 1}
  .attendance-grid{grid-template-columns:1fr}
  .attendance-reports{grid-template-columns:1fr}
  .attendance-inline-form input,
  .attendance-inline-form select{min-width:0;flex:1}
  .preview-row{flex-direction:column;align-items:flex-start}
  .preview-row-actions{align-items:flex-start;min-width:auto;width:100%}
}

/* [16/08/2026] Celular (<=767px): as larguras minimas de Planejamento (tabela
   estilo planilha) e Exportar (preview do calendario pra imagem) ainda
   forcam um scroll horizontal enorme (tabela chegava a 1320-1440px, preview
   a 960px, num viewport de ~375px). Reduz o piso pra algo mais proximo do
   aparelho -- ainda tem scroll horizontal (dados densos, tabela nao vira
   cards nesta rodada), mas bem menor. Precisa vir DEPOIS do bloco
   @media(max-width:900px) acima pra vencer o empate de especificidade.
   Ver Roadmap "Larguras minimas grandes em Planejamento e Exportar (mobile)". */
@media (max-width: 767px){
  .section-planning-pane{--section-planning-table-min-width:720px}
  .section-planning-pane.is-sheet-theme{--section-planning-table-min-width:800px}
  .export-preview .calendar{min-width:640px}
}

.toast-container{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:10px;z-index:9999;pointer-events:none}
.toast{min-width:240px;max-width:320px;background:var(--surface-soft);color:var(--ink);border-radius:10px;padding:12px 16px;box-shadow:0 12px 30px rgba(0,0,0,.35);border-left:4px solid var(--accent);opacity:0;transform:translateY(20px);transition:opacity .2s ease,transform .2s ease;pointer-events:auto;display:flex;justify-content:space-between;gap:12px}
.toast.visible{opacity:1;transform:translateY(0)}
.toast-success{border-color:#43a047}
.toast-error{border-color:#ef5350}
.toast-info{border-color:#29b6f6}
.toast-close{background:transparent;border:none;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:0;margin:0}
.toast-close:hover{color:var(--ink)}

.users-toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:16px 0}
.create-form-highlight{animation:pulse-highlight .8s ease}
@keyframes pulse-highlight{
  0%{box-shadow:0 0 0 rgba(46,163,255,.0)}
  50%{box-shadow:0 0 0 4px rgba(46,163,255,.35)}
  100%{box-shadow:0 0 0 rgba(46,163,255,.0)}
}

.feedback-widget{position:fixed;right:24px;bottom:24px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;z-index:1000}
.feedback-button{width:60px;height:60px;border-radius:50%;background:var(--accent);border:none;color:#fff;font-size:32px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.35);cursor:pointer}
.feedback-panel{width:320px;background:var(--panel);border:1px solid var(--grid);border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.25);padding:16px;display:flex;flex-direction:column;gap:8px}
.feedback-tabs{display:flex;gap:6px}
.feedback-tab{flex:1;padding:8px 12px;border-radius:999px;border:1px solid var(--grid);background:var(--surface-alt);color:var(--muted);text-align:center;cursor:pointer;font-size:13px}
.feedback-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.feedback-textarea{width:100%;height:120px;border-radius:10px;border:1px solid var(--grid);padding:8px;resize:none;background:var(--surface-soft);color:var(--ink)}
.feedback-meta{display:flex;gap:8px;flex-wrap:wrap}
.feedback-meta-input{flex:1;border-radius:8px;border:1px solid var(--grid);padding:8px;background:var(--surface-soft);color:var(--ink);font-size:14px}
.feedback-meta-input:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.feedback-actions{display:flex;justify-content:flex-end;gap:8px}
.feedback-send{padding:8px 16px;border:none;border-radius:8px;background:var(--accent);color:#fff;cursor:pointer}

@media (max-width: 640px){
  .topbar{padding:12px}
  .topbar-primary{grid-template-columns:1fr;align-items:flex-start;gap:8px}
  .topbar-nav{margin:0;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .controls-group{width:100%;justify-content:flex-start}
  .controls-group input[type=\"search\"],
  .controls-group select{min-width:100%}
  .session-controls,
  .actions-group{width:100%;justify-content:flex-start}
  .layout{grid-template-columns:1fr;padding:12px}
  .legend{order:2}
  .pane{padding:12px}
  .list-toolbar{width:100%;gap:8px}
  .admin-card{padding:12px}
  .admin-table-wrap{max-height:260px}
  .category-choices, .section-choices{max-height:260px;overflow:auto}
}
@media (max-width: 900px){
  body{padding-bottom:80px}
  .admin-pane{padding:8px}
  .admin-grid{grid-template-columns:1fr;gap:12px}
  .admin-span-2,.admin-span-3{grid-column:span 1}
  .admin-card{padding:12px;border-radius:10px}
  .admin-table-wrap{max-height:240px}
  .admin-actions{flex-wrap:wrap;gap:8px}
}

@media (max-width: 640px){
  .topbar{padding:12px 14px}
  .topbar-primary{grid-template-columns:1fr;gap:10px}
  .topbar-nav{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start;margin:0;gap:6px}
  .session-controls{width:100%;justify-content:flex-start}
  .topbar-controls{gap:10px}
  .controls-group{width:100%;flex-wrap:wrap;justify-content:flex-start;gap:8px}
  .controls-group label,
  .controls-group input[type="search"],
  .controls-group select{width:100%}
  .actions-group{width:100%;justify-content:flex-start;gap:8px}
  .actions-group .btn{flex:1}
  .layout{padding:12px;gap:12px}
}

@media (max-width: 900px){
  .topbar-row{gap:10px}
  .controls-group{width:100%;flex-wrap:wrap;gap:8px}
  .controls-group label{width:calc(50% - 6px);min-width:140px}
  .controls-group input[type="search"]{min-width:100%}
  .actions-group{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:8px}
  .layout{grid-template-columns:1fr;padding:12px}
  .calendar{min-width:0}
  .legend{order:2}
}

@media (max-width: 520px){
  .controls-group label{width:100%}
  .actions-group .btn{width:100%}
  .topbar-nav{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

.legend-floating{
  position:fixed;
  top:72px;
  left:12px;
  right:12px;
  max-height:70vh;
  overflow:auto;
  z-index:1500;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.legend-hidden{display:none}
.legend-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:1499;
}
.legend-overlay.visible{display:block}

/* Loader */
.app-loader {
  position: fixed;
  inset: 0;
  background: rgba(13, 17, 23, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.app-loader.hidden {
  opacity: 0;
  visibility: hidden;
}
.app-loader-box {
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 10px;
  padding: 20px 28px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.35);
  text-align: center;
  color: #e5e7eb;
  min-width: 220px;
}
.app-loader-spinner {
  width: 36px;
  height: 36px;
  border: 4px solid #374151;
  border-top-color: #10b981;
  border-radius: 50%;
  margin: 0 auto 12px;
  animation: app-loader-spin 0.8s linear infinite;
}
@keyframes app-loader-spin {
  to { transform: rotate(360deg); }
}

/* Categorias */
.form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
  margin-top:12px;
}
.form-grid .card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#ffffff;
  box-shadow:0 6px 16px rgba(0,0,0,0.06);
}
.form-grid label{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-weight:600;
  color:#1f2937;
}
.form-grid input[type="text"]{
  width:100%;
}
.form-grid input[type="color"]{
  width:56px;
  height:32px;
  padding:0;
  border:none;
  background:transparent;
}
.form-grid .color-hex-input{
  margin-top:4px;
  width:100%;
}
.form-grid .actions{
  display:flex;
  gap:8px;
  margin-top:4px;
}
.form-grid .actions .btn{
  flex:1;
}


/* ======================================================================
   === Conteudo de styles.new.css — unificado em 28/08/2026 (v2.57) ===
   === Antes era um segundo <link> apos styles.css; agora e um unico arquivo ===
   ====================================================================== */
/* ============================================================
   Redesenho de navegacao (Incremento 3) — unificado em styles.css
   em 28/08/2026 (v2.57). Antes vivia em styles.new.css como overlay.
   Regras escopadas em .shell-redesign (body tem essa classe em producao).
   ============================================================ */

/* ---------- Scrollbars finas e arredondadas ---------- */
/* [23/08/2026] Substitui o scrollbar nativo largo do sistema por uma versao
   thin (6px) com thumb arredondado e semi-transparente. Usa CSS variables
   (--muted) para adaptar automaticamente ao tema claro/escuro. */
html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 45%,transparent) transparent}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 45%,transparent);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--muted) 70%,transparent)}

/* ---------- utilitarios ---------- */
.shell-redesign .sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- Topbar enxuta ---------- */
.shell-redesign .topbar-inner{
  width:100%;max-width:100%;margin:0;display:flex;flex-direction:column;gap:8px;
}
.shell-redesign .topbar-primary{
  display:flex;flex-wrap:nowrap;align-items:center;gap:10px;
}
.shell-redesign .topbar-primary h1{
  font-size:16px;font-weight:700;white-space:nowrap;margin:0;color:var(--ink);
}
.shell-redesign .brand-logo-box{
  width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;
  display:inline-grid;place-items:center;font-weight:800;font-size:12px;flex:0 0 auto;
}
.shell-redesign .topbar-spacer{flex:1 1 auto}

/* ---------- Seletor de secao (topbar) ---------- */
.shell-redesign .secpick{position:relative;flex:0 0 auto}
.shell-redesign .secpick-btn{
  display:inline-flex;align-items:center;gap:8px;background:var(--surface-alt);
  border:1px solid var(--grid);border-radius:999px;padding:6px 12px;cursor:pointer;
  color:var(--ink);font:inherit;font-size:13px;font-weight:600;max-width:230px;
}
.shell-redesign .secpick-btn:hover{border-color:var(--accent)}
.shell-redesign .secpick-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.shell-redesign .secpick-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell-redesign .secpick-chev{color:var(--muted);font-size:11px;flex:0 0 auto}
.shell-redesign .secpick-pop{
  position:absolute;z-index:70;top:calc(100% + 6px);left:0;width:300px;max-width:80vw;
  max-height:min(70vh,460px);overflow:auto;background:var(--panel);border:1px solid var(--grid);
  /* canto superior-esquerdo quase reto: cria continuidade visual com o canto inferior-esquerdo do .secpick-btn (pill) acima */
  border-radius:3px 12px 12px 12px;box-shadow:0 12px 40px rgba(0,0,0,.28);padding:6px;
}
.shell-redesign .secpick-group{
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
  font-weight:800;padding:8px 8px 3px;
}
.shell-redesign .secpick-opt{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;
  border:0;border-radius:8px;padding:7px 10px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer;
}
.shell-redesign .secpick-opt:hover{background:var(--surface-alt)}
.shell-redesign .secpick-optdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.shell-redesign .secpick-all{font-weight:700;border-bottom:1px solid var(--grid);border-radius:8px 8px 0 0;margin-bottom:2px}
.shell-redesign .secpick-loading{padding:14px;color:var(--muted);font-size:12.5px;text-align:center}
@media (max-width:620px){ .shell-redesign .secpick-label{display:none} .shell-redesign .secpick-btn{max-width:none} }

/* ---------- Menu suspenso do usuario (avatar): Preferencias + Sair ----------
   [16/08/2026] Antes Tema/Estilo dos eventos/Sair ficavam soltos no rail
   lateral (desktop) e no sheet "Mais" (mobile) -- agora vivem so' aqui,
   atras do avatar, nos dois breakpoints (a topbar existe em ambos). Mesmo
   padrao aberto/fechado do .secpick (ver script inline no fim do body). */
.shell-redesign .user-menu{position:relative;display:flex;align-items:center}
.shell-redesign .user-menu-trigger{
  display:inline-flex;align-items:center;justify-content:center;padding:0;
  border:0;background:none;cursor:pointer;border-radius:50%;
  box-shadow:0 0 0 2px transparent;transition:box-shadow .15s ease;
}
.shell-redesign .user-menu-trigger:hover,
.shell-redesign .user-menu-trigger[aria-expanded="true"]{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent)}
.shell-redesign .user-menu-pop{
  /* right:4px (nao 0) de proposito -- uma folga minima de seguranca contra
     zoom/scrollbar/etc que podia deixar a borda direita "saindo" um pouco
     do viewport, relatado pelo usuario mesmo com o calculo "certo". */
  position:absolute;z-index:70;top:calc(100% + 8px);right:4px;width:240px;max-width:calc(100vw - 24px);
  background:var(--panel);border:1px solid var(--grid);border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.28);padding:6px;display:flex;flex-direction:column;gap:2px;
}
/* display:flex acima venceria o [hidden] nativo do navegador (que so' teria
   efeito se nenhuma regra de autor tocasse "display") -- precisa reforcar
   explicitamente. Mesmo motivo pelo qual .secpick-pop nunca define
   "display" na regra base (evita esse problema por completo). */
.shell-redesign .user-menu-pop[hidden]{display:none}
.shell-redesign .user-menu-section{display:flex;flex-direction:column;gap:2px;padding:4px 0}
.shell-redesign .user-menu-section + .user-menu-section{border-top:1px solid var(--grid);margin-top:2px;padding-top:8px}
.shell-redesign .user-menu-title{
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding:2px 8px 4px;
}
.shell-redesign .user-menu-pop .prefs-chip-btn{width:auto}

/* ---------- Hub de Administracao (abas compartilhadas) ---------- */
.shell-redesign .admin-hub-tabs{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0 0 16px;
  padding:0 4px 0 8px;border-bottom:1px solid var(--grid);
}
.shell-redesign .admin-hub-title{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-right:10px;
}
.shell-redesign .admin-hub-tab{
  text-decoration:none;font-size:13px;font-weight:600;color:var(--muted);
  padding:9px 13px;border-radius:8px 8px 0 0;border-bottom:2px solid transparent;margin-bottom:-1px;
}
.shell-redesign .admin-hub-tab:hover{color:var(--ink);background:var(--surface-alt)}
.shell-redesign .admin-hub-tab.active{color:var(--accent);border-bottom-color:var(--accent)}

/* ============================================================
   Painel de Administracao — repaginacao completa
   ============================================================ */
.shell-redesign .admin-pane{
  background:transparent;border:0;box-shadow:none;padding:0;display:flex;flex-direction:column;gap:14px;
}
.shell-redesign .admin-pane > h2{font-size:18px;font-weight:700;margin:0}
.shell-redesign .admin-pane > p{color:var(--muted);font-size:13.5px;margin:0}

/* Barra de status (info/success/error) */
.shell-redesign .admin-status{
  border-radius:10px;padding:10px 14px;font-size:13px;font-weight:600;border:1px solid var(--grid);
  background:var(--surface-alt);color:var(--ink);
}
.shell-redesign .admin-status[data-tone="success"]{
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  border-color:color-mix(in srgb,var(--accent) 35%,transparent);color:var(--accent);
}
.shell-redesign .admin-status[data-tone="error"]{
  background:color-mix(in srgb,var(--danger,#c0392b) 12%,transparent);
  border-color:color-mix(in srgb,var(--danger,#c0392b) 35%,transparent);color:var(--danger,#c0392b);
}

/* Links rapidos + acoes de sync no topo */
.shell-redesign .admin-quick-links{display:flex;flex-wrap:wrap;gap:8px}

/* Busca do admin */
.shell-redesign .admin-pane input[type="search"],
.shell-redesign .admin-pane input[type="text"],
.shell-redesign .admin-input{
  width:100%;background:var(--surface-alt);border:1px solid var(--grid);border-radius:10px;
  color:var(--ink);padding:9px 13px;font-size:13px;
}
.shell-redesign .admin-textarea{
  width:100%;background:var(--surface-alt);border:1px solid var(--grid);border-radius:10px;
  color:var(--ink);padding:9px 13px;font-size:13px;min-height:80px;resize:vertical;
}
.shell-redesign .admin-pane input:focus,
.shell-redesign .admin-input:focus,
.shell-redesign .admin-textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent);
}

/* Grid e cards */
.shell-redesign .admin-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;
}
/* [17/08/2026] Titulos de secao agrupando os cards do Painel Admin -- ocupam
   a largura toda do grid (grid-column:1/-1) independente de quantas colunas
   o auto-fill decidir usar. Ver Roadmap "Painel Admin: reorganizar e
   embelezar o menu interno". */
.shell-redesign .admin-group-heading{
  grid-column:1/-1;margin:18px 0 -2px;padding-bottom:6px;
  border-bottom:1px solid var(--grid);
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.shell-redesign .admin-group-heading:first-child{margin-top:0}
.shell-redesign .admin-card{
  background:var(--panel);border:1px solid var(--grid);border-radius:14px;padding:16px;
  box-shadow:0 1px 2px rgba(16,20,30,.04),0 8px 22px rgba(16,20,30,.05);
  display:flex;flex-direction:column;gap:10px;
}
.shell-redesign .admin-card-scroll{max-height:420px;overflow:auto}
.shell-redesign .admin-card > h3,
.shell-redesign .admin-card-header{font-size:14.5px;font-weight:700;margin:0;display:flex;align-items:center;justify-content:space-between;gap:10px}
.shell-redesign .admin-card-header h3,
.shell-redesign .admin-card-header > *:first-child{font-size:14.5px;font-weight:700;margin:0}
.shell-redesign .admin-note{color:var(--muted);font-size:12px;line-height:1.5;margin:0}
/* [16/08/2026] Badge Ligado/Desligado dos modulos do painel admin -- antes
   era `t.style.color = on ? '#fff' : ...` via JS inline (admin-panel-runtime.js).
   Movido pra CSS puro reaproveitando o data-on ja setado no JS, mais facil
   de ajustar/tematizar no futuro sem tocar em JS. Ver Roadmap "Badge
   Ligado/Desligado". */
.shell-redesign .module-toggle{min-width:104px}
/* Precisa bater (ou passar) a especificidade de ".shell-redesign .calendar
   .btn" (styles.new.css mais abaixo, que tambem define background/color) --
   inclui ".calendar" aqui so' por isso, mesmo o elemento real sempre
   estando dentro de #calendar de qualquer forma. */
.shell-redesign .calendar .module-toggle[data-on="1"]{background:var(--accent);border-color:var(--accent);color:#fff}
.shell-redesign .calendar .module-toggle[data-on="0"]{background:var(--surface-alt);border-color:var(--grid);color:var(--muted)}
/* [16/08/2026] Tons de aviso tematizados via color-mix(), mesmo padrao de
   .section-admin-status[data-tone]. Antes admin-style.js injetava classes
   Tailwind fixas (text-amber-200 etc, pensadas pra fundo escuro) por cima
   das classes base sem nunca remover as anteriores -- acumulava 2 fundos
   conflitantes no mesmo elemento e ficava ilegivel no tema claro. Ver
   Roadmap "Avisos do painel admin". */
.shell-redesign .admin-note.warning{
  background:color-mix(in srgb,var(--warning,#b45309) 14%,transparent);
  border-color:color-mix(in srgb,var(--warning,#b45309) 35%,transparent);
  color:var(--warning,#b45309);
}
.shell-redesign .admin-note.success{
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  border-color:color-mix(in srgb,var(--accent) 35%,transparent);
  color:var(--accent);
}
.shell-redesign .admin-note.error{
  background:color-mix(in srgb,var(--danger,#c0392b) 12%,transparent);
  border-color:color-mix(in srgb,var(--danger,#c0392b) 35%,transparent);
  color:var(--danger,#c0392b);
}

/* Metricas */
.shell-redesign .admin-metrics{display:flex;flex-direction:column;gap:2px}
.shell-redesign .admin-metric{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:8px 0;border-top:1px solid var(--grid);
}
.shell-redesign .admin-metric:first-child{border-top:0}
.shell-redesign .metric-label{color:var(--muted);font-size:12.5px}
.shell-redesign .metric-value{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}

/* Acoes */
.shell-redesign .admin-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.shell-redesign .admin-inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.shell-redesign .admin-list{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0;font-size:13px}
.shell-redesign .admin-list li{padding:6px 8px;border-radius:8px;background:var(--surface-alt)}

/* Botoes do admin */
.shell-redesign .admin-pane .btn{
  border:1px solid var(--grid);background:var(--surface-alt);color:var(--ink);
  border-radius:9px;padding:8px 13px;font-size:13px;font-weight:600;min-height:0;
}
.shell-redesign .admin-pane .btn:hover{border-color:var(--accent)}
.shell-redesign .admin-pane .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.shell-redesign .admin-pane .btn.secondary{background:transparent}
.shell-redesign .admin-pane .btn[disabled]{opacity:.5;cursor:not-allowed}

/* Tabelas */
.shell-redesign .admin-table-wrap,
.shell-redesign .table-wrapper{overflow-x:auto;border:1px solid var(--grid);border-radius:10px}
.shell-redesign .admin-table{width:100%;border-collapse:collapse;font-size:12.5px}
.shell-redesign .admin-table th{
  background:var(--surface-alt);text-align:left;padding:9px 11px;font-size:11px;
  color:var(--muted);letter-spacing:.03em;text-transform:uppercase;font-weight:700;white-space:nowrap;
}
.shell-redesign .admin-table td{padding:9px 11px;border-top:1px solid var(--grid);vertical-align:top}

/* Branding: preview e toggles */
.shell-redesign .brand-preview{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;
  border:1px solid var(--grid);background:var(--surface-alt);font-weight:700;
}
.shell-redesign .toggle{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.shell-redesign .logo-status{font-size:11.5px;color:var(--muted)}

/* ============================================================
   Painel Admin — layout sidebar + secoes (18/08/2026)
   Desktop (>=1024px): nav lateral fixa + area de conteudo.
   Mobile (<1024px): sidebar oculta, todas as secoes visiveis
   em coluna scroll normal.
   ============================================================ */

/* Layout geral do painel */
.shell-redesign .admin-layout{display:flex;flex-direction:column;gap:16px}

/* Sidebar de navegacao */
.shell-redesign .admin-sidebar{
  width:188px;flex-shrink:0;
  position:sticky;top:12px;
  display:flex;flex-direction:column;gap:2px;
  background:var(--panel);border:1px solid var(--grid);border-radius:14px;
  padding:8px;align-self:flex-start;
}
.shell-redesign .admin-sidebar-divider{
  height:1px;background:var(--grid);margin:4px 4px;
}
/* Botao de navegacao da sidebar */
.shell-redesign .admin-nav-item{
  display:flex;align-items:center;gap:9px;
  padding:9px 11px;border-radius:9px;
  text-align:left;width:100%;background:transparent;border:none;
  color:var(--ink);font-size:13px;font-weight:500;cursor:pointer;
  line-height:1.2;transition:background .13s,color .13s;
}
.shell-redesign .admin-nav-item:hover{background:var(--surface-alt)}
.shell-redesign .admin-nav-item.active{
  background:var(--accent);color:#fff;font-weight:600;
}
.shell-redesign .admin-nav-item .icon{width:15px;height:15px;flex-shrink:0;opacity:.75}
.shell-redesign .admin-nav-item.active .icon{opacity:1}
.shell-redesign .admin-nav-item.danger:not(.active){color:var(--danger,#c0392b)}

/* Secoes de conteudo */
.shell-redesign .admin-section{
  display:flex;flex-direction:column;gap:14px;
}
.shell-redesign .admin-section-heading{
  font-size:16px;font-weight:700;margin:0;color:var(--ink);
  padding-bottom:10px;border-bottom:1px solid var(--grid);
}
/* Na secao de config, os dois cards ficam lado a lado (grid) */
.shell-redesign .admin-section-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;
}

/* Card de sync dentro da secao de dados */
.shell-redesign .admin-sync-card .admin-sync{flex:1}
.shell-redesign .admin-sync{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* Backup combinado (manual + agendamento em 1 card) */
.shell-redesign .admin-backup-sub{display:flex;flex-direction:column;gap:10px}
.shell-redesign .admin-backup-sub-label{
  font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);
}
.shell-redesign .admin-backup-divider{
  height:1px;background:var(--grid);margin:2px 0;
}

/* Extras (admin-extras.js) dentro de secoes -- normaliza o .pane antigo */
.shell-redesign .admin-section > .pane{
  background:var(--panel);border:1px solid var(--grid);border-radius:14px;padding:16px;
  box-shadow:0 1px 2px rgba(16,20,30,.04),0 8px 22px rgba(16,20,30,.05);
  display:flex;flex-direction:column;gap:10px;margin:0;
}

/* Mensagens de status (area acima das secoes, dentro do conteudo) */
.shell-redesign .admin-messages:empty{display:none}
/* Media queries do admin -- DEVEM vir apos as regras base para que a cascade funcione
   corretamente (mesma especificidade: a regra posterior vence) */
@media(min-width:1024px){
  .shell-redesign .admin-layout{flex-direction:row;align-items:flex-start;gap:20px}
  .shell-redesign .admin-content{flex:1;min-width:0}
  .shell-redesign .admin-section--hidden{display:none}
}
@media(max-width:1023px){
  .shell-redesign .admin-sidebar{display:none}
  .shell-redesign .admin-section--hidden{display:flex}
}

/* ============================================================
   Telas de administracao (Usuarios / Categorias / Secoes) —
   repaginacao completa. Cobre os 3 sistemas de classe distintos
   e sobrescreve as cores Tailwind fixas da tela de Categorias.
   ============================================================ */

/* ---- Comuns: pane, formularios, inputs, toggles ---- */
.shell-redesign .calendar > .pane,
.shell-redesign .calendar .pane{
  background:var(--panel);border:1px solid var(--grid);border-radius:14px;padding:16px;
  box-shadow:0 1px 2px rgba(16,20,30,.04),0 8px 22px rgba(16,20,30,.05);color:var(--ink);
}
.shell-redesign .calendar h2{font-size:18px;font-weight:700;color:var(--ink)}
.shell-redesign .form{display:flex;flex-direction:column;gap:12px}
.shell-redesign .field{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted)}
.shell-redesign .field.inline{flex-direction:row;align-items:center;gap:8px}
.shell-redesign .field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.shell-redesign .input,
.shell-redesign .color-hex-input,
.shell-redesign .calendar .pane input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.shell-redesign .calendar .pane select,
.shell-redesign .calendar .pane textarea{
  background:var(--surface-alt);border:1px solid var(--grid);border-radius:10px;color:var(--ink);
  padding:9px 12px;font-size:13px;
}
.shell-redesign .calendar .pane input:focus,
.shell-redesign .calendar .pane select:focus,
.shell-redesign .calendar .pane textarea:focus,
.shell-redesign .input:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent);
}
.shell-redesign .toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink)}
.shell-redesign .swatch{width:14px;height:14px;border-radius:4px;flex:0 0 auto}
.shell-redesign .list{display:flex;flex-direction:column;gap:10px}

/* Botoes comuns nas telas */
.shell-redesign .calendar .btn{
  border:1px solid var(--grid);background:var(--surface-alt);color:var(--ink);border-radius:9px;
  padding:8px 13px;font-size:13px;font-weight:600;box-shadow:none;
}
.shell-redesign .calendar .btn:hover{border-color:var(--accent)}
.shell-redesign .calendar .btn.primary,
.shell-redesign .calendar .btn.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
/* [16/08/2026] styles.css:178 usava um azul fixo (#205b86) sem relacao com
   --accent pro estado desabilitado -- contraste ficava baixo no tema
   escuro. Agora e' o proprio --accent apagado, consistente com o resto do
   botao. Ver Roadmap "Botao primario desabilitado". */
.shell-redesign .btn.primary:disabled,
.shell-redesign .btn.btn-primary:disabled{
  background:color-mix(in srgb,var(--accent) 55%,var(--surface-soft));
  border-color:color-mix(in srgb,var(--accent) 55%,var(--surface-soft));
  color:var(--surface-alt);opacity:.65;
}
.shell-redesign .calendar .btn.secondary{background:transparent}
.shell-redesign .calendar .btn.danger{background:transparent;border-color:var(--danger,#c0392b);color:var(--danger,#c0392b)}
.shell-redesign .calendar .btn.danger:hover{background:color-mix(in srgb,var(--danger,#c0392b) 12%,transparent)}
.shell-redesign .calendar .btn.small{padding:5px 10px;font-size:12px}

/* ---- Categorias: sobrescreve Tailwind fixo (bg-white/slate/emerald/rose) ---- */
.shell-redesign .card{
  background:var(--panel);border:1px solid var(--grid);border-radius:12px;padding:16px;
  box-shadow:0 1px 2px rgba(16,20,30,.04),0 8px 22px rgba(16,20,30,.05);color:var(--ink);
}
.shell-redesign [class*="bg-white"]{background-color:var(--panel)}
.shell-redesign [class*="text-slate"]{color:var(--ink)}
.shell-redesign [class*="border-slate"]{border-color:var(--grid)}
.shell-redesign [class*="bg-emerald"]{background-color:var(--accent);color:#fff}
.shell-redesign [class*="bg-emerald"]:hover{background-color:color-mix(in srgb,var(--accent) 85%,#000)}
.shell-redesign [class*="bg-rose"]{background-color:var(--danger,#c0392b);color:#fff}
.shell-redesign [class*="bg-rose"]:hover{background-color:color-mix(in srgb,var(--danger,#c0392b) 85%,#000)}
.shell-redesign input[type="color"].color-hex-input,
.shell-redesign input[type="color"]{padding:0;border:1px solid var(--grid);border-radius:8px;background:var(--surface-alt)}

/* ---- Usuarios ---- */
.shell-redesign .users-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
/* [17/08/2026] Busca + filtro por papel da aba Usuarios -- ver Roadmap
   "Recriar visual da aba de Usuários". */
.shell-redesign .users-filter-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px;
}
.shell-redesign .users-filter-row .users-search{flex:1 1 220px;min-width:180px}
.shell-redesign .users-filter-row .users-role-filter{flex:0 0 auto;width:auto}
.shell-redesign .users-filter-count{
  font-size:12px;color:var(--muted);white-space:nowrap;margin-left:auto;
}
@media (max-width:640px){
  .shell-redesign .users-filter-row{flex-direction:column;align-items:stretch}
  .shell-redesign .users-filter-row .users-search,
  .shell-redesign .users-filter-row .users-role-filter{width:100%}
  .shell-redesign .users-filter-count{margin-left:0}
}
.shell-redesign .user-row,
.shell-redesign .users-accordion-card{
  background:var(--panel);border:1px solid var(--grid);border-radius:12px;overflow:hidden;margin:0;
}
/* [17/08/2026] Wrapper do cabecalho: toggle (flex:1) + acoes rapidas. */
.shell-redesign .users-card-header{display:flex;align-items:center;overflow:hidden}
.shell-redesign .users-accordion-card.is-open .users-card-header{border-bottom:1px solid var(--grid)}
.shell-redesign .users-accordion-toggle{
  display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;
  background:transparent;border:0;cursor:pointer;
  padding:11px 14px;color:var(--ink);font:inherit;text-align:left;
}
.shell-redesign .users-accordion-toggle:hover{background:var(--surface-alt)}
/* [16/08/2026] styles.css:400 tem background:color-mix(...#ffffff) fixo no
   icone -- so' a cor do glifo era redefinida aqui, nao o fundo, entao o
   circulo ficava sempre claro/lavado em qualquer tema. Ver Roadmap
   "Icone de acordeao... cor fixa". */
.shell-redesign .users-accordion-toggle-icon{
  color:var(--muted);transition:transform .15s;
  background:color-mix(in srgb,var(--accent) 16%,var(--panel));
}
/* [16/08/2026] styles.css:368-374 tem fundo em gradiente claro fixo e
   color:#6b7280 fixo pro texto de cards inativos, com especificidade maior
   que qualquer override generico -- precisa mirar a MESMA especificidade
   (cartao.is-inactive + label + strong/span) pra vencer de verdade. */
.shell-redesign .users-accordion-card.is-inactive{
  background:color-mix(in srgb,var(--surface-alt) 70%,var(--panel));
}
.shell-redesign .users-accordion-card.is-inactive .users-accordion-toggle-label strong,
.shell-redesign .users-accordion-card.is-inactive .users-accordion-toggle-label span{
  color:var(--muted);
}
/* [17/08/2026] Avatar + badges de papel/status por linha -- ver Roadmap
   "Recriar visual da aba de Usuários". Cores por papel reaproveitam tokens
   ja existentes (nao inventa paleta nova): admin = accent (mesma cor do
   avatar do proprio usuario logado, session-ui.js), editor = azul ja usado
   em categorias do app, leitor = tom neutro/muted. */
.shell-redesign .users-row-avatar{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:36px;height:36px;border-radius:50%;font-size:13px;font-weight:800;color:#fff;
}
.shell-redesign .users-row-avatar.role-admin{background:var(--accent)}
.shell-redesign .users-row-avatar.role-editor{background:#1976d2}
.shell-redesign .users-row-avatar.role-viewer{background:var(--muted)}
.shell-redesign .users-accordion-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.shell-redesign .users-role-badge{
  font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;letter-spacing:.02em;
}
.shell-redesign .users-role-badge.role-admin{
  background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);
}
.shell-redesign .users-role-badge.role-editor{
  background:color-mix(in srgb,#1976d2 16%,transparent);color:#1976d2;
}
.shell-redesign .users-role-badge.role-viewer{
  background:var(--surface-alt);color:var(--muted);
}
.shell-redesign .users-inactive-badge{
  font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;letter-spacing:.02em;
  background:color-mix(in srgb,var(--danger,#c0392b) 14%,transparent);color:var(--danger,#c0392b);
}
.shell-redesign .users-accordion-card.is-inactive .users-role-badge.role-admin,
.shell-redesign .users-accordion-card.is-inactive .users-role-badge.role-editor,
.shell-redesign .users-accordion-card.is-inactive .users-row-avatar{opacity:.55}
.shell-redesign .users-accordion-toggle-label{font-weight:700;font-size:14px;flex:1;min-width:0}
.shell-redesign .users-accordion-toggle-tag{
  font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--surface-alt);
  border:1px solid var(--grid);color:var(--muted);
}
.shell-redesign .users-accordion-content{padding:14px;border-top:1px solid var(--grid);display:flex;flex-direction:column;gap:12px}
.shell-redesign .user-row-main{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.shell-redesign .user-row-actions{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px}
/* [17/08/2026] Lista com gap entre cards e acoes rapidas no cabecalho
   (status, papel, remover sem precisar abrir o acordeao).
   Ver Roadmap "Recriar visual da aba de Usuarios". */
/* [17/08/2026] Lista compacta (substitui gap:8px do acordeao): container
   com borda unica e divisores internos, mais denso. Ver Roadmap
   "Recriar visual da aba de Usuarios". */
.shell-redesign .users-list{
  background:var(--panel);border:1px solid var(--grid);border-radius:14px;
  overflow:hidden;display:flex;flex-direction:column;
}
.shell-redesign .users-quick-actions{
  display:flex;align-items:center;gap:6px;padding:0 10px 0 4px;flex-shrink:0;
}
.shell-redesign .users-qa-status{
  font-family:inherit;font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:999px;
  border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
  background:transparent;transition:opacity .15s;
}
.shell-redesign .users-qa-status.is-active{
  color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 60%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
}
.shell-redesign .users-qa-status:not(.is-active){
  color:var(--muted);border-color:var(--grid);
}
.shell-redesign .users-qa-status:disabled{opacity:.45;cursor:default}
.shell-redesign .users-qa-status:not(:disabled):hover{opacity:.7}
.shell-redesign .users-qa-role{
  font-family:inherit;font-size:11px;font-weight:600;border-radius:6px;padding:3px 6px;
  border:1px solid var(--grid);background:var(--surface-alt);color:var(--ink);cursor:pointer;
}
.shell-redesign .users-qa-role:disabled{opacity:.45;cursor:default}
.shell-redesign .users-qa-remove{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:6px;border:0;
  background:transparent;cursor:pointer;color:var(--muted);
  transition:background .15s,color .15s;
}
.shell-redesign .users-qa-remove:hover{
  background:color-mix(in srgb,var(--danger,#c0392b) 12%,transparent);
  color:var(--danger,#c0392b);
}
.shell-redesign .users-qa-remove .icon{width:12px;height:12px}
@media(max-width:600px){
  .shell-redesign .users-quick-actions{gap:4px;padding:0 8px 0 0}
  .shell-redesign .users-qa-status{padding:2px 8px;font-size:10px}
}
/* ---- Linhas da lista de usuarios ---- */
.shell-redesign .users-list-row{
  display:flex;align-items:center;gap:12px;padding:10px 16px;
  border-bottom:1px solid var(--grid);transition:background .12s;
}
.shell-redesign .users-list-row:last-child{border-bottom:0}
.shell-redesign .users-list-row:hover{background:var(--surface-alt)}
.shell-redesign .users-list-row.is-inactive{opacity:.6}
.shell-redesign .users-list-row.is-inactive .users-list-name{color:var(--muted)}
.shell-redesign .users-list-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.shell-redesign .users-list-name{
  font-weight:600;font-size:13.5px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.shell-redesign .users-list-login{font-size:12px;color:var(--muted)}
.shell-redesign .users-list-meta{display:flex;align-items:center;gap:7px;flex-shrink:0}
.shell-redesign .users-list-actions{flex-shrink:0}
.shell-redesign .users-list-edit-btn{font-size:12px;padding:4px 12px}
/* Status pill: acao rapida de ativar/desativar sem abrir modal */
.shell-redesign .users-status-pill{
  font-family:inherit;font-size:10.5px;font-weight:700;
  padding:2px 10px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;white-space:nowrap;background:transparent;
  transition:opacity .15s;line-height:1.7;
}
.shell-redesign .users-status-pill.is-active{
  color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 50%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
}
.shell-redesign .users-status-pill:not(.is-active){
  color:var(--muted);border-color:var(--grid);
}
.shell-redesign .users-status-pill:disabled{opacity:.4;cursor:default}
.shell-redesign .users-status-pill:not(:disabled):hover{opacity:.7}

/* ---- Modal de edicao/criacao de usuario ---- */
/* Overlay com position:fixed: o overlay e' filho do <body class="shell-redesign">
   portanto .shell-redesign .users-modal-overlay resolve corretamente. */
.shell-redesign .users-modal-overlay{
  position:fixed;inset:0;
  background:rgba(5,10,20,.5);
  z-index:10000;
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.shell-redesign .users-modal{
  background:var(--panel);border:1px solid var(--grid);border-radius:14px;
  box-shadow:0 24px 60px rgba(16,20,30,.22),0 4px 16px rgba(16,20,30,.08);
  width:100%;max-width:560px;max-height:88vh;
  display:flex;flex-direction:column;overflow:hidden;
  animation:users-modal-in .17s cubic-bezier(.22,.8,.36,1) both;
}
@keyframes users-modal-in{
  from{opacity:0;transform:translateY(12px) scale(.97)}
  to{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .shell-redesign .users-modal{animation:none}
}
.shell-redesign .users-modal-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px 0;flex-shrink:0;
}
.shell-redesign .users-modal-header h3{
  font-size:15.5px;font-weight:700;color:var(--ink);margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.shell-redesign .users-modal-close{
  width:28px;height:28px;border-radius:7px;border:0;
  background:transparent;cursor:pointer;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .12s,color .12s;
}
.shell-redesign .users-modal-close:hover{background:var(--surface-alt);color:var(--ink)}
.shell-redesign .users-modal-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.shell-redesign .users-modal-close .icon{width:14px;height:14px}
.shell-redesign .users-modal form{
  flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;
}
.shell-redesign .users-modal-body{
  flex:1;overflow-y:auto;padding:14px 20px;
  display:flex;flex-direction:column;gap:11px;
}
.shell-redesign .users-modal-sep{
  height:1px;background:var(--grid);border:0;margin:2px 0;
}
.shell-redesign .users-modal-footer{
  display:flex;align-items:center;gap:8px;
  padding:11px 20px 16px;border-top:1px solid var(--grid);flex-shrink:0;
}

/* Campo de permissoes — tabela por funcao [v2.63] */
.shell-redesign .users-permissions-field{
  display:flex;flex-direction:column;gap:8px;
}
/* Barra de botoes Marcar/Desmarcar */
.shell-redesign .permissions-topbar{
  display:flex;gap:8px;justify-content:flex-end;
}
.shell-redesign .permissions-mark-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;font-size:0.8rem;font-weight:600;
  border:1px solid var(--border,#ccc);border-radius:6px;
  background:var(--surface,#fff);color:var(--ink);cursor:pointer;
  transition:background .15s,border-color .15s;
}
.shell-redesign .permissions-mark-btn:hover{
  background:var(--hover-bg,#f0f0f0);border-color:var(--accent,#666);
}
.shell-redesign .permissions-mark-btn .icon{
  width:12px;height:12px;flex-shrink:0;
}
/* Wrap com borda e arredondamento */
.shell-redesign .permissions-table-wrap{
  border:1px solid var(--border,#ddd);border-radius:8px;overflow:hidden;
}
/* Tabela: Funcao | Permissoes */
.shell-redesign .permissions-table{
  width:100%;border-collapse:collapse;font-size:0.82rem;
}
.shell-redesign .permissions-table thead tr{
  background:var(--table-header-bg,#f4f4f4);
}
.shell-redesign .permissions-table th{
  padding:8px 12px;text-align:left;font-weight:700;font-size:0.78rem;
  color:var(--muted);text-transform:uppercase;letter-spacing:.04em;
  border-bottom:2px solid var(--border,#ddd);
}
.shell-redesign .permissions-th-fn{
  width:180px;min-width:140px;
}
/* Linha de cabecalho de grupo (secao por modulo) */
.shell-redesign .permissions-table .permissions-group-row td{
  padding:5px 12px;font-weight:700;font-size:0.73rem;
  text-transform:uppercase;letter-spacing:.07em;
  color:var(--accent,#555);
  background:var(--table-header-bg,#f0f0f0);
  border-top:1px solid var(--border,#ddd);
  border-bottom:1px solid var(--border,#ddd);
}
.shell-redesign .permissions-table .permissions-group-row:first-child td{
  border-top:none;
}
/* Linhas de funcao */
.shell-redesign .permissions-table .permissions-fn-row{
  background:var(--surface,#fff);
  border-bottom:1px solid var(--border,#eee);
}
.shell-redesign .permissions-table .permissions-fn-row.alt{
  background:var(--row-alt,#f8f9fb);
}
.shell-redesign .permissions-table .permissions-fn-row:last-child{
  border-bottom:none;
}
/* Celula esquerda: nome da funcao */
.shell-redesign .permissions-td-fn{
  padding:9px 12px;vertical-align:middle;
  font-size:0.82rem;color:var(--ink);
  border-right:1px solid var(--border,#eee);
  white-space:nowrap;
}
/* Celula direita: checkboxes dos desdobramentos */
.shell-redesign .permissions-td-cbs{
  padding:8px 14px;vertical-align:middle;
  display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;
}
/* Cada item clicavel: checkbox + label */
.shell-redesign .permissions-item{
  display:inline-flex;align-items:center;gap:5px;
  cursor:pointer;white-space:nowrap;
}
.shell-redesign .permissions-cb{
  width:15px;height:15px;flex-shrink:0;
  cursor:pointer;accent-color:var(--accent,#555);
}
.shell-redesign .permissions-cb:disabled{
  cursor:not-allowed;opacity:.55;
}
.shell-redesign .permissions-item-label{
  font-size:0.81rem;color:var(--ink);user-select:none;
}
/* Tokens de tema escuro */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --table-header-bg:#252525;
    --row-alt:#1a1d22;
  }
}
:root[data-theme="dark"]{
  --table-header-bg:#252525;
  --row-alt:#1a1d22;
}
/* Mensagem de carregamento */
.shell-redesign .permissions-loading{
  font-size:0.82rem;color:var(--muted);font-style:italic;padding:4px 0;
}
/* Campos do modal: label em coluna + input com borda visível.
   :not(.toggle) evita que o estilo de campo-titulo vaze nos toggles
   que ficam dentro de .field via planWrap (canEditPerm, canBatchPerm, etc). */
.shell-redesign .users-modal .field{display:flex;flex-direction:column;gap:4px}
.shell-redesign .users-modal .field label:not(.toggle){
  display:flex;flex-direction:column;gap:5px;
  font-size:11.5px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;
}
.shell-redesign .users-modal .field input:not([type=checkbox]),
.shell-redesign .users-modal .field select{
  border:1px solid var(--grid);border-radius:8px;
  padding:8px 10px;background:var(--panel);color:var(--ink);
  font-family:inherit;font-size:13.5px;width:100%;box-sizing:border-box;
  transition:border-color .15s;
}
.shell-redesign .users-modal .field input:not([type=checkbox]):focus,
.shell-redesign .users-modal .field select:focus{
  border-color:var(--accent);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
.shell-redesign .users-modal .field input::placeholder{color:var(--muted);opacity:.7}
.shell-redesign .users-modal .field .hint{font-size:11px;color:var(--muted);font-weight:400;letter-spacing:0;text-transform:none}

/* --- Feed Subscribe Modal ---
   Reutiliza .users-modal-overlay/.users-modal/.users-modal-header/body/footer.
   As regras abaixo cobrem apenas os elementos especificos do modal de assinatura. */
.shell-redesign .feed-subscribe-intro{
  font-size:13px;color:var(--ink);line-height:1.5;margin:0;
}
.shell-redesign .feed-url-row{
  display:flex;gap:8px;align-items:stretch;
}
.shell-redesign .feed-url-input{
  flex:1 1 auto;min-width:0;
  border:1px solid var(--grid);border-radius:8px;
  padding:8px 10px;background:var(--surface-soft);color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Consolas,'Courier New',monospace;
  font-size:11.5px;box-sizing:border-box;cursor:pointer;
  transition:border-color .15s;
}
.shell-redesign .feed-url-input:focus{
  border-color:var(--accent);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
.shell-redesign .feed-copy-btn{flex-shrink:0;align-self:stretch}
.shell-redesign .feed-actions-row{display:flex;flex-wrap:wrap;gap:8px}
.shell-redesign .feed-google-btn,
.shell-redesign .feed-webcal-btn{text-decoration:none}
.shell-redesign .feed-section-label,
.shell-redesign .feed-instr-title{
  font-size:11.5px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;
}
.shell-redesign .feed-section-hint{
  font-size:12px;color:var(--muted);margin:0;line-height:1.45;
}
.shell-redesign .feed-section-choices{
  /* herda .section-choices: border + scroll */
}
.shell-redesign .feed-instr-list{
  margin:0;padding-left:18px;
  display:flex;flex-direction:column;gap:5px;
}
.shell-redesign .feed-instr-list li{
  font-size:12.5px;color:var(--ink);line-height:1.45;
}
@media(max-width:600px){
  .shell-redesign .feed-url-row{flex-direction:column}
  .shell-redesign .feed-copy-btn{width:100%}
}

@media(max-width:600px){
  .shell-redesign .users-list-row{flex-wrap:wrap;gap:8px}
  .shell-redesign .users-list-info{flex:1 1 150px}
  .shell-redesign .users-list-meta{flex:0 0 auto}
  .shell-redesign .users-list-actions{flex:0 0 auto;margin-left:auto}
  .shell-redesign .users-modal{border-radius:10px}
}

/* ============================================================= */
.shell-redesign .category-choices,
.shell-redesign .section-choices{
  border:1px solid var(--grid);border-radius:10px;padding:8px;
  max-height:220px;overflow-y:auto;overflow-x:hidden;
  /* flex-wrap:nowrap obrigatorio: styles.css tem flex-wrap:wrap em .category-choices
     que, combinado com flex-direction:column e max-height, cria layout multi-coluna.
     Sem nowrap explicito, o override de flex-direction nao e' suficiente. */
  display:flex;flex-direction:column;flex-wrap:nowrap;gap:2px;background:var(--surface-soft);
}
.shell-redesign .category-selection-panel{
  display:flex;flex-direction:column;gap:6px;
}
.shell-redesign .category-select-toolbar{display:flex;flex-wrap:wrap;gap:6px}
.shell-redesign .category-choice,
.shell-redesign .section-choice{
  display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;font-size:13px;color:var(--ink);
}
.shell-redesign .category-choice:hover,
.shell-redesign .section-choice:hover{background:var(--surface-alt)}
.shell-redesign .section-choice.depth-1{padding-left:22px}
.shell-redesign .section-choice.depth-2{padding-left:34px}
.shell-redesign .section-choice.depth-3{padding-left:46px}
.shell-redesign .section-group{color:var(--muted);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:8px 8px 3px}

/* ---- Secoes (section-admin-*) ---- */
.shell-redesign .section-admin-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.shell-redesign .section-admin-summary{color:var(--muted);font-size:12.5px;margin-bottom:10px}
.shell-redesign .section-admin-status{
  border-radius:10px;padding:9px 13px;font-size:13px;font-weight:600;border:1px solid var(--grid);
  background:var(--surface-alt);color:var(--ink);margin-bottom:10px;
}
.shell-redesign .section-admin-status[data-tone="success"]{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:color-mix(in srgb,var(--accent) 35%,transparent);color:var(--accent)}
.shell-redesign .section-admin-status[data-tone="error"]{background:color-mix(in srgb,var(--danger,#c0392b) 12%,transparent);border-color:color-mix(in srgb,var(--danger,#c0392b) 35%,transparent);color:var(--danger,#c0392b)}
.shell-redesign .section-admin-tree{display:flex;flex-direction:column;gap:6px}
.shell-redesign .section-admin-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--panel);
  border:1px solid var(--grid);border-radius:10px;padding:9px 12px;
}
.shell-redesign .section-admin-node.depth-1{margin-left:14px}
.shell-redesign .section-admin-node.depth-2{margin-left:28px}
.shell-redesign .section-admin-node.depth-3{margin-left:42px}
.shell-redesign .section-admin-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.shell-redesign .section-admin-name{font-weight:600;font-size:13.5px;color:var(--ink)}
.shell-redesign .section-admin-path{font-size:11px;color:var(--muted)}
.shell-redesign .section-admin-meta,
.shell-redesign .section-admin-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.shell-redesign .section-admin-color{width:30px;height:30px;padding:0;border:1px solid var(--grid);border-radius:8px;background:var(--surface-alt)}
.shell-redesign .section-admin-color-hex{width:90px}

.shell-redesign .topbar-search{
  display:flex;flex-wrap:nowrap;align-items:center;gap:6px;background:var(--surface-alt);
  border:1px solid var(--grid);border-radius:999px;padding:6px 12px;
  flex:0 1 260px;min-width:120px;
}
.shell-redesign .topbar-search input{
  border:0;background:transparent;color:var(--ink);font:inherit;font-size:13px;
  width:100%;min-width:0;outline:none;
}
.shell-redesign .topbar-search input::placeholder{color:var(--muted)}
/* [16/08/2026] input[type="search"] tem um "x" de limpar NATIVO do proprio
   navegador (Chrome/Edge), que aparecia JUNTO com o nosso #searchClearBtn
   customizado -- 2 X's ao mesmo tempo (um deles com box model proprio do
   navegador, que nao respeitava a altura da pilula e "empurrava" o campo
   pra crescer verticalmente). Desliga so o nativo, mantendo so o nosso. */
.shell-redesign .topbar-search input[type="search"]::-webkit-search-cancel-button,
.shell-redesign .topbar-search input[type="search"]::-webkit-search-decoration{
  -webkit-appearance:none;appearance:none;display:none;
}
.shell-redesign .topbar-search input[type="search"]::-ms-clear,
.shell-redesign .topbar-search input[type="search"]::-ms-reveal{
  display:none;width:0;height:0;
}
.shell-redesign .search-clear-btn{
  border:0;background:transparent;color:var(--muted);cursor:pointer;
  font-size:16px;line-height:1;padding:2px 4px;border-radius:999px;flex:0 0 auto;
}
.shell-redesign .search-clear-btn:hover{color:var(--ink);background:var(--grid)}
.shell-redesign .search-result-count{
  color:var(--muted);font-size:12px;white-space:nowrap;flex:0 0 auto;
}

.subscribe-feed-card{margin-top:16px}
.subscribe-feed-card .field-row{display:flex;gap:8px;align-items:center;margin:10px 0;flex-wrap:wrap}
.subscribe-feed-input{
  flex:1 1 320px;min-width:0;font:inherit;font-size:13px;color:var(--ink);
  background:var(--surface-alt);border:1px solid var(--grid);border-radius:8px;
  padding:7px 10px;
}

.shell-redesign .session-controls{
  display:flex;align-items:center;gap:6px;flex-wrap:nowrap;
}
.shell-redesign .session-controls .session-label{
  color:var(--muted);font-size:12px;white-space:nowrap;
}

.shell-redesign .rail-toggle{
  display:none;width:36px;height:36px;border:1px solid var(--grid);
  background:var(--surface-alt);color:var(--ink);border-radius:9px;cursor:pointer;
  align-items:center;justify-content:center;font-size:16px;flex:0 0 auto;
}
.shell-redesign .rail-toggle .icon{width:18px;height:18px}

/* ---------- Sprite de icones (self-hosted, ver index.html) ----------
   Uso padrao: herda cor via currentColor, tamanho default 16px, sobrescrito
   por contexto abaixo. Pontos/agulhas internos (list, compass, tag, palette)
   ja vem com fill="currentColor" fixo no proprio symbol — sempre visiveis
   independente do stroke. */
.icon{
  width:16px;height:16px;flex:0 0 auto;display:inline-block;vertical-align:middle;
  fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
}
.shell-redesign .secpick-chev .icon{width:10px;height:10px}

/* ---------- Faixa de contexto (periodo/visao/tema) ---------- */
.shell-redesign .topbar-controls{
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 12px;
  width:100%;border-top:1px solid var(--grid);padding-top:10px;
}
.shell-redesign .topbar-controls .controls-group{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
}
/* rotulos inline (Ano/Inicio) na mesma altura dos demais controles */
.shell-redesign .topbar-controls .controls-group label{flex-direction:row;align-items:center;gap:6px;white-space:nowrap}
.shell-redesign .topbar-controls .actions-group{
  margin-left:auto;display:flex;gap:8px;align-items:center;width:auto;flex:0 0 auto;
}
/* controls-group nao ocupa a linha toda (senao as acoes quebram para baixo) */
.shell-redesign .topbar-controls .controls-group{width:auto;flex:0 1 auto}
.shell-redesign .topbar-controls .controls-group > label,
.shell-redesign .topbar-controls .year-control{align-self:center}

/* Selects modernos (Ano, Inicio, Meses, Tema) — sem cara de dropdown nativo */
.shell-redesign .topbar-controls select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-color:var(--surface-alt);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  border:1px solid var(--grid);border-radius:9px;color:var(--ink);
  padding:7px 26px 7px 10px;font-size:13px;font-weight:600;cursor:pointer;min-height:34px;
}
.shell-redesign .topbar-controls label{font-size:11px}

/* Controle de ano: ◄ [2026] ► */
.shell-redesign .year-control{align-items:center;gap:6px}
.shell-redesign .year-control .icon-btn{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--grid);
  background:var(--surface-alt);color:var(--ink);display:inline-flex;
  align-items:center;justify-content:center;padding:0;
}

/* Pilulas de visao */
.shell-redesign .view-pills{
  display:inline-flex;align-self:center;background:var(--surface-alt);
  border:1px solid var(--grid);border-radius:999px;padding:3px;gap:2px;
}
.shell-redesign .view-pill{
  border:0;background:transparent;color:var(--muted);font:inherit;font-size:12.5px;
  font-weight:600;padding:6px 12px;border-radius:999px;cursor:pointer;white-space:nowrap;
}
.shell-redesign .view-pill:hover{color:var(--ink)}
.shell-redesign .view-pill[aria-pressed="true"]{background:var(--accent);color:#fff}

.shell-redesign .topbar-controls .actions-group .btn{min-height:34px}
/* [23/08/2026] No shell-redesign os filtros ficam no rail lateral (desktop)
   e na tab bar (mobile) — o botão "Filtros" do topbar é redundante. */
.shell-redesign #toggleLegendBtn{display:none!important}

/* ---------- Layout: lateral (nav + filtros) | calendario ---------- */
.shell-redesign .layout{
  display:grid;
  grid-template-columns:264px minmax(0,1fr);
  gap:16px;padding:16px;align-items:start;width:100%;max-width:100%;
}
/* [23/08/2026] styles.css dá ao section.calendar uma caixa própria
   (background:panel, border, border-radius:10px). Na shell-redesign
   todos os elementos filhos (.mcal, .mini-cal, .pane) já têm caixas
   próprias — manter a caixa da section criava duplo-border com raios
   desalinhados (10px na section vs 16px no mcal). A section vira
   container transparente; o body-gradient aparece nos cantos. */
.shell-redesign .calendar{background:transparent;border:none;border-radius:0;box-shadow:none}
.shell-redesign .app-rail .legend{margin-top:2px;width:100%}
/* Sessao: some o texto "Usuario: X" / "Modo leitura"; mantem o avatar. */
.shell-redesign .session-controls .session-label{display:none}

/* Controle de Tema, dentro do menu suspenso do avatar (#userMenuPop)
   [16/08/2026] O <select> nativo foi trocado por um controle segmentado
   (mesma familia visual do .mob-seg Agenda/Grade do mobile) -- a lista
   suspensa nativa do navegador nao da pra estilizar de verdade (so'
   background-color/color em alguns navegadores, sem raio/sombra/hover
   proprios). O <select> continua existindo escondido (hidden) como fonte
   da verdade: topbar-controls.js escuta o 'change' dele sem nenhuma
   mudanca; o clique nos botoes so' seta o value e dispara 'change'. Ver
   Roadmap "Menu suspenso no avatar" / achado "caixa suspensa do tema". */
.shell-redesign .user-menu-pop .theme-control{
  display:flex;flex-direction:column;gap:6px;width:100%;padding:6px 10px 8px;
}
.shell-redesign .user-menu-pop .theme-control-label{
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;
}
.shell-redesign .theme-seg{
  display:flex;background:var(--surface-alt);border:1px solid var(--grid);
  border-radius:999px;padding:2px;gap:2px;
}
.shell-redesign .theme-seg-btn{
  flex:1;border:0;background:transparent;font:inherit;font-size:11.5px;font-weight:700;
  color:var(--muted);padding:6px 4px;border-radius:999px;cursor:pointer;text-align:center;
  white-space:nowrap;
}
.shell-redesign .theme-seg-btn:hover{color:var(--ink)}
.shell-redesign .theme-seg-btn.active{background:var(--accent);color:#fff}

/* ---------- Lateral "Acessos" ---------- */
.shell-redesign .app-rail{display:flex;flex-direction:column;gap:12px}
.shell-redesign .app-nav{
  display:flex;flex-direction:column;gap:14px;background:var(--panel);
  border:1px solid var(--grid);border-radius:12px;padding:12px;
}
.shell-redesign .app-nav-group{display:flex;flex-direction:column;gap:2px}
.shell-redesign .app-nav-title{
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding:2px 8px 4px;
}
.shell-redesign .app-nav .nav-btn{
  display:flex;align-items:center;gap:10px;justify-content:flex-start;text-align:left;
  width:100%;padding:8px 10px;font-size:13px;font-weight:600;border:1px solid transparent;
  background:transparent;color:var(--ink);border-radius:9px;cursor:pointer;
  box-shadow:none;
}
.shell-redesign .app-nav .nav-btn:hover{background:var(--surface-alt);border-color:transparent}
.shell-redesign .app-nav .nav-btn.nav-active{
  background:color-mix(in srgb,var(--accent) 15%,transparent);
  border-color:color-mix(in srgb,var(--accent) 35%,transparent);
  color:var(--accent);
}
.shell-redesign .app-nav .nav-btn .ni{width:18px;text-align:center;flex:0 0 auto}
.shell-redesign .app-nav .nav-btn .ni .icon{width:18px;height:18px}
.shell-redesign .app-nav .nav-btn.danger-nav{color:var(--danger,#c0392b)}
.shell-redesign .app-nav .nav-btn.danger-nav:hover{
  background:color-mix(in srgb,var(--danger,#c0392b) 12%,transparent);
}
/* [16/08/2026] "Sair" (#logoutBtn) mudou de casa (.app-nav -> dentro do menu
   suspenso do avatar) -- precisa do mesmo visual de .nav-btn/.danger-nav
   aqui, ja que essas regras so' valiam dentro de .app-nav. */
.shell-redesign .user-menu-pop .nav-btn{
  display:flex;align-items:center;gap:10px;justify-content:flex-start;text-align:left;
  width:100%;padding:8px 10px;font-size:13px;font-weight:600;border:1px solid transparent;
  background:transparent;color:var(--ink);border-radius:9px;cursor:pointer;box-shadow:none;
}
.shell-redesign .user-menu-pop .nav-btn .ni{width:18px;text-align:center;flex:0 0 auto}
.shell-redesign .user-menu-pop .nav-btn .ni .icon{width:18px;height:18px}
.shell-redesign .user-menu-pop .nav-btn.danger-nav{color:var(--danger,#c0392b)}
.shell-redesign .user-menu-pop .nav-btn.danger-nav:hover{
  background:color-mix(in srgb,var(--danger,#c0392b) 12%,transparent);
}

/* Backdrop do rail (mobile) — oculto por padrao via atributo hidden. */
.shell-redesign .rail-backdrop{display:none}

/* ============================================================
   Responsivo
   ============================================================ */

/* Tablet e abaixo: rail vira gaveta deslizante (☰). */
@media (max-width:1023px){
  .shell-redesign .layout{
    grid-template-columns:1fr;
  }
  .shell-redesign .rail-toggle{display:inline-flex}
  .shell-redesign .app-rail{
    position:fixed;top:0;left:0;bottom:0;width:266px;transform:translateX(-105%);
    transition:transform .22s ease;z-index:60;background:var(--panel);
    border-right:1px solid var(--grid);overflow:auto;padding:14px;
    box-shadow:0 10px 40px rgba(0,0,0,.32);
  }
  .shell-redesign.rail-open .app-rail{transform:none}
  .shell-redesign .rail-backdrop{
    position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:55;
  }
  /* So mostra o backdrop escuro quando a gaveta esta REALMENTE aberta
     (body.rail-open). Antes esta regra nao tinha o escopo ".rail-open" e
     display:block valia sempre em telas <=1023px, sobrepondo o atributo
     "hidden" do elemento e deixando a tela com uma camada escura permanente
     em mobile/tablet mesmo com a gaveta fechada. */
  .shell-redesign.rail-open .rail-backdrop{display:block}
}

/* Celular: uma coluna (calendario); legenda usa o overlay existente;
   espaco para a barra inferior fixa. */
@media (max-width:767px){
  .shell-redesign .layout{grid-template-columns:1fr;padding-bottom:78px}
  .shell-redesign .topbar-primary{flex-wrap:wrap}
  .shell-redesign .topbar-search{flex-basis:100%;order:5}
}

/* Modo Grade no mobile: aproveita a largura da tela (o respiro de 16px de
   cada lado do .layout sobra pouco numa grade de 7 colunas em 375px). So
   quando a Grade esta ativa -- o Agenda continua com o respiro padrao,
   pedido explicito do Felipe. .mob-gridbox so existe no DOM enquanto o
   modo Grade esta selecionado (renderMobileCalendar troca o innerHTML ao
   alternar pra Agenda) -- :has() aqui e auto-limpante, sem precisar de
   nenhuma classe JS pra manter sincronizada com o modo atual nem risco de
   ficar "preso" ao trocar de rota. */
@media (max-width:767px){
  .shell-redesign .layout:has(.mob-gridbox){padding-left:4px;padding-right:4px}
}

/* Muito estreito: esconde o rotulo do botao "Novo evento". */
@media (max-width:520px){
  .shell-redesign .hide-xs{display:none}
}

/* Mobile: pilulas de visao rolam na horizontal (nao cortam "Personalizado");
   grade rola horizontal como fallback (o caminho recomendado no mobile e a Lista). */
@media (max-width:767px){
  .shell-redesign .view-pills{
    overflow-x:auto;max-width:100%;flex:1 1 100%;scrollbar-width:none;
  }
  .shell-redesign .view-pills::-webkit-scrollbar{display:none}
  .shell-redesign .topbar-controls .actions-group{width:100%;justify-content:flex-start;margin-left:0}
  .shell-redesign .calendar{overflow-x:auto}
}

/* ============================================================
   Repaginacao dos componentes (legenda, filtros, calendario,
   formularios, toasts). Escopado em .shell-redesign para vencer
   o styles.css por especificidade, sem altera-lo.
   ============================================================ */

/* ---------- Legenda / filtros (coluna) ---------- */
.shell-redesign .legend{padding:14px;box-shadow:none;border-radius:12px}
.shell-redesign .legend h3{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin:0 0 8px;
}
.shell-redesign .legend-section-body{display:flex;flex-direction:column;gap:8px}
/* display:flex acima venceria o [hidden] nativo -- mesmo padrao de .user-menu-pop[hidden] */
.shell-redesign .legend-section-body[hidden]{display:none}
.shell-redesign .legend-toggle{
  font-size:11px;font-weight:700;color:var(--accent);background:transparent;border:0;
  cursor:pointer;padding:2px 6px;border-radius:6px;
}
.shell-redesign .legend-toggle:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.shell-redesign .legend-filters{display:flex;flex-wrap:wrap;gap:6px}
.shell-redesign .legend-filters .btn,
.shell-redesign .legend-section-presets .btn{
  padding:4px 10px;font-size:11.5px;border-radius:999px;background:var(--surface-alt);
  border:1px solid var(--grid);color:var(--muted);font-weight:600;min-height:0;
}
.shell-redesign .legend-filters .btn:hover,
.shell-redesign .legend-section-presets .btn:hover{border-color:var(--accent);color:var(--ink)}
.shell-redesign .legend-section-presets{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.shell-redesign .legend-items-grid{display:flex;flex-direction:column;gap:1px}
.shell-redesign .legend .item,
.shell-redesign .legend .legend-item{
  display:flex;align-items:center;gap:9px;padding:5px 6px;border-radius:8px;margin:0;
}
.shell-redesign .legend .item:hover{background:var(--surface-alt)}
.shell-redesign .legend .swatch{width:12px;height:12px;border-radius:4px;flex:0 0 auto}
.shell-redesign .legend .lbl{font-size:12.5px;color:var(--ink)}

/* Arvore de secoes */
.shell-redesign .section-tree{display:flex;flex-direction:column;gap:1px;margin-top:4px}
.shell-redesign .section-label{
  color:var(--muted);font-weight:700;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.05em;padding:6px 6px 2px;
}
.shell-redesign .section-leaf{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:8px}
.shell-redesign .section-leaf:hover{background:var(--surface-alt)}
.shell-redesign .section-pill{display:flex;align-items:center;gap:8px;cursor:pointer;width:100%;font-size:12.5px}
.shell-redesign .section-pill .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.shell-redesign .section-node.depth-1{margin-left:8px}
.shell-redesign .section-node.depth-2{margin-left:16px}
.shell-redesign .section-tree-empty{font-size:12px;color:var(--muted);padding:6px}

/* ---------- Resumo de filtros (topo do calendario) ----------
   [16/08/2026] Removido o "cartao" (fundo/borda/raio) que envolvia o
   resumo -- o raio de 12px do cartao ficava colado ao raio 999px (pilula)
   dos proprios chips logo dentro, com curvas bem diferentes quase se
   tocando; a borda do cartao tambem ficava a poucos px da borda do
   primeiro chip, lendo como uma linha só mais grossa. Os chips (que já
   têm sua própria borda/pilula) seguram a legibilidade sozinhos, sem
   precisar de uma moldura por fora. */
.shell-redesign .filters-summary{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:10px 8px 12px;
  margin-bottom:6px;
  /* Cancela o "cartao" vindo de styles.css:1024 (border/background/radius) --
     precisa ser explicito (não so' omitir), senão a regra base ainda
     aparece pra essas propriedades especificas mesmo com esta regra mais
     especifica vencendo o resto. */
  border:0;background:none;border-radius:0;
}
.shell-redesign .filters-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.shell-redesign .filters-label{
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;
}
.shell-redesign .filters-tags{display:flex;flex-wrap:wrap;gap:6px}
.shell-redesign .filter-chip{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink);
  background:var(--surface-alt);border:1px solid var(--grid);border-radius:999px;padding:4px 11px;
}
.shell-redesign .filter-chip.is-empty{color:var(--muted);font-weight:500}

/* ---------- Grade do calendario (polimento leve) ---------- */
.shell-redesign .cal-header .cell,
.shell-redesign .cal-header .month-header{
  font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.03em;
}
.shell-redesign .day .date{font-variant-numeric:tabular-nums;font-size:12px}
/* ============================================================
   Calendario — repaginacao de UX/UI (o que todos usam)
   Refinamentos sobre a grade customizada, sem alterar a mecanica.
   ============================================================ */

/* Cabecalho dos dias */
.shell-redesign .cal-header{background:var(--surface-soft)}
.shell-redesign .cal-header .cell{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.shell-redesign .cal-header .month-header{font-size:11px;letter-spacing:.08em}

/* Celulas dos dias: numero legivel, hover, hoje */
.shell-redesign .week-grid .day{transition:background .12s ease}
.shell-redesign .week-grid .day:hover{background:color-mix(in srgb,var(--accent) 9%,transparent)}
/* Fim de semana (SAB = 8a coluna, DOM = 9a) — leve destaque para escaneabilidade */
.shell-redesign .week-grid > .day:nth-child(8),
.shell-redesign .week-grid > .day:nth-child(9){background:color-mix(in srgb,var(--accent) 4%,transparent)}
.shell-redesign .week-grid > .day:nth-child(8):hover,
.shell-redesign .week-grid > .day:nth-child(9):hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.shell-redesign .cal-header .cell:nth-child(8),
.shell-redesign .cal-header .cell:nth-child(9){color:var(--accent)}
.shell-redesign .week-grid .day .date,
.shell-redesign .week-grid .day .date a{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.shell-redesign .day.today{background:color-mix(in srgb,var(--accent) 10%,transparent) !important}
.shell-redesign .day.today .date a{
  display:inline-block;background:var(--accent);color:#fff !important;
  border-radius:999px;padding:2px 8px;font-weight:800;
}

/* Lateral enxuta: listas de categorias/secoes com altura maxima + scroll */
.shell-redesign .app-rail .legend .legend-items-grid,
.shell-redesign .app-rail .legend .section-tree{max-height:232px;overflow:auto;padding-right:2px}

/* Coluna do numero da semana */
.shell-redesign .week-grid .wk{font-size:11px;font-weight:600;opacity:.85}

/* Estado vazio amigavel (dia/lista/busca sem eventos) */
.shell-redesign .empty-state{
  text-align:center;color:var(--muted);padding:40px 16px;font-size:14px;line-height:1.5;
}
.shell-redesign .empty-state::before{
  content:"\1F4C5";display:block;font-size:34px;margin-bottom:10px;opacity:.55;
}

/* #2 Grade menos "crua": linhas mais suaves, cabecalho arredondado no topo,
   coluna do mes com destaque, hover coeso. */
.shell-redesign .week-grid .day,
.shell-redesign .cal-header .cell{border-color:color-mix(in srgb,var(--grid) 55%,transparent)}
/* Sem borda/arredondamento no cabecalho (evita "cantinho" solto que nao
   continuava pela grade). O alinhamento vem das celulas. */
.shell-redesign .cal-header{border:0;border-radius:0}
.shell-redesign .month-cell{
  display:flex;align-items:flex-start;justify-content:center;padding-top:6px;
  font-weight:800;color:var(--accent);font-size:11.5px;letter-spacing:.04em;
}
.shell-redesign .week-row:first-of-type .week-grid .day:first-of-type{border-top-left-radius:0}

/* #3 Filtros da lateral (categorias e secoes) mais bonitos e escaneaveis */
.shell-redesign .legend .item,
.shell-redesign .legend .legend-item{
  display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:9px;cursor:pointer;
  transition:background .12s ease;
}
.shell-redesign .legend .item:hover,
.shell-redesign .legend .legend-item:hover{background:var(--surface-alt)}
.shell-redesign .legend .item input[type="checkbox"]{
  width:16px;height:16px;accent-color:var(--accent);border-radius:4px;flex:0 0 auto;cursor:pointer;margin:0;
}
.shell-redesign .legend .swatch{
  width:14px;height:14px;border-radius:5px;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.25);
}
.shell-redesign .legend .lbl{font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Arvore de secoes: dot + nome com respiro e hover */
.shell-redesign .legend .section-leaf,
.shell-redesign .legend .section-label{padding:6px 8px;border-radius:9px}
.shell-redesign .legend .section-pill{gap:10px}
.shell-redesign .legend .section-pill .dot{
  width:12px;height:12px;border-radius:5px;
  box-shadow:0 0 0 1px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.25);
}
.shell-redesign .legend .section-pill .name{font-size:12.5px;color:var(--ink)}
/* Botoes Todas/Limpar/Minhas mais discretos */
.shell-redesign .legend .legend-filters .btn{padding:4px 11px;font-size:11.5px}

/* [23/08/2026] C1 — Identidade visual do filtro de Categorias
   PROBLEMA: styles.css tem .legend .item .swatch (especificidade 0,3,0) que
   definia um oval (18×10px, border-radius:8px) e vencia o
   .shell-redesign .legend .swatch (0,2,0). Swatch das categorias aparecia
   como pilula larga, enquanto o dot das seções é 14×14 quadrado.
   FIX 1: iguala especificidade com .legend .item .swatch para corrigir.
   FIX 2: adiciona transição de opacity + estado inativo (55%) via :has()
   em categorias E seções para consistência visual entre os dois filtros.
   :has() com suporte universal desde 2023 (Chrome 105, Safari 15.4, FF 121). */
.shell-redesign .legend .item .swatch{width:14px;height:14px;border-radius:5px}
.shell-redesign .legend .legend-item{transition:background .12s ease,opacity .15s ease}
.shell-redesign .legend .section-leaf{transition:background .12s ease,opacity .15s ease}
.shell-redesign .legend .legend-item:has(input[type="checkbox"]:not(:checked)),
.shell-redesign .legend .section-leaf:has(input[type="checkbox"]:not(:checked)){opacity:.5}
.shell-redesign .legend .legend-item:has(input[type="checkbox"]:not(:checked)):hover,
.shell-redesign .legend .section-leaf:has(input[type="checkbox"]:not(:checked)):hover{opacity:.8}

/* [23/08/2026] C1b — Opção A: apenas [dot colorido] + nome, sem checkbox visível
   Checkbox oculto visualmente (position:absolute, opacity:0, tamanho zero);
   funcionalidade mantida via <label> clicável que já envolve o input.
   Aplicado em categorias (.legend-item) E seções (.section-leaf) para consistência.
   Gap reduzido de 10→8px e padding ajustado já que o checkbox saiu da linha. */
.shell-redesign .legend .legend-item input[type="checkbox"],
.shell-redesign .legend .section-leaf input[type="checkbox"]{display:none}
.shell-redesign .legend .item,
.shell-redesign .legend .legend-item{gap:8px;padding:5px 7px}
.shell-redesign .legend .section-leaf > label{gap:8px}

/* [23/08/2026] C1c — Remover card visual dos items de categoria
   O deployed legend-content.js injeta classes Tailwind nos items:
   border border-[var(--grid)] rounded-lg bg-[var(--surface-alt)] shadow-sm
   que criam o visual de "card" em cada linha. Sobrescrevemos via CSS de alta
   especificidade já que não é possível remover classes Tailwind via CSS puro. */
.shell-redesign .legend .legend-item{
  border:none!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* #3 Filtro de SECOES no mesmo padrao do de categorias (dot + nome + hover),
   sem a "cara de pilula". */
.shell-redesign .legend .section-leaf{
  display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:9px;transition:background .12s ease;
  min-width:0;
}
.shell-redesign .legend .section-tree,
.shell-redesign .legend .section-node{min-width:0}
.shell-redesign .legend .section-leaf:hover{background:var(--surface-alt)}
.shell-redesign .legend .section-leaf > label{
  display:flex;align-items:center;gap:9px;width:100%;min-width:0;cursor:pointer;font-size:12.5px;padding:0;
}
.shell-redesign .legend .section-leaf input[type="checkbox"]{
  width:16px;height:16px;accent-color:var(--accent);border-radius:4px;flex:0 0 auto;margin:0;cursor:pointer;
}
/* tira borda/fundo/padding da "pilula" -> vira dot + nome */
.shell-redesign .legend .section-pill{
  border:0;background:transparent;padding:0;border-radius:0;gap:9px;color:var(--ink);box-shadow:none;
  min-width:0;
}
.shell-redesign .legend .section-pill .dot{
  width:14px;height:14px;border-radius:5px;background:var(--section-color,var(--accent));
  box-shadow:0 0 0 1px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.25);
}
/* [17/08/2026] Antes truncava numa linha so (overflow:hidden + ellipsis) --
   numa coluna estreita (sidebar ~220-300px) isso, somado ao recuo por
   profundidade, estourava a largura do container (scrollWidth > clientWidth,
   confirmado ao vivo). Agora quebra em ate 2 linhas em vez de truncar/rolar.
   Ver Roadmap "Redesenhar o filtro de seções". */
.shell-redesign .legend .section-pill .name{
  font-size:12.5px;color:var(--ink);white-space:normal;overflow-wrap:anywhere;
  line-height:1.3;min-width:0;
}
.shell-redesign .legend .section-pill.active .name{font-weight:600}
/* cabecalhos de esfera na arvore + indentacao por nivel */
.shell-redesign .legend .section-label{
  color:var(--muted);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;padding:8px 8px 3px;
}
/* [17/08/2026] margin-left "por nivel" aqui e' relativo ao .section-node PAI
   (a marcacao recursiva aninha um .section-node dentro do outro -- ver
   legend-content.js renderNode), entao os valores COMPOEM: um recuo
   crescente tipo 10/20/30 vira 10, depois 10+20=30, depois 10+20+30=60px na
   pratica (confirmado medindo offsetLeft ao vivo). Numa coluna de ~220px, um
   recuo de 60px so' pra chegar na folha deixava pouquissimo espaco pro nome
   (linhas de 1 palavra so). Trocado por um passo FIXO e pequeno por nivel
   (nao mais crescente) -- soma 6/12/18px total nos 3 niveis, bem mais
   respiro pro texto. Ver Roadmap "Redesenhar o filtro de seções". */
.shell-redesign .legend .section-node.depth-1{margin-left:6px}
.shell-redesign .legend .section-node.depth-2{margin-left:6px}
.shell-redesign .legend .section-node.depth-3{margin-left:6px}

/* Recuo ainda mais justo no bottom-sheet mobile (coluna mais estreita que a
   sidebar/gaveta desktop). */
@media (max-width:767px){
  .shell-redesign .legend .section-node.depth-1{margin-left:4px}
  .shell-redesign .legend .section-node.depth-2{margin-left:4px}
  .shell-redesign .legend .section-node.depth-3{margin-left:4px}
}

/* #4 Separacao sutil entre meses na grade (escaneabilidade) */
.shell-redesign .week-row.month-start:not(:first-of-type){
  border-top:2px solid color-mix(in srgb,var(--accent) 24%, var(--grid));
}

/* Cabecalho de dias fixo ao rolar (fica logo abaixo da topbar) */
.shell-redesign .cal-header{
  position:sticky;top:var(--topbar-h,110px);z-index:8;background:var(--surface-soft);
}
/* Fix do sticky: html/body tinham altura fixa (100% = viewport), o que fazia a
   topbar descolar depois de ~1 tela de rolagem. Altura automatica (crescendo com
   o conteudo) mantem a topbar E o cabeçalho grudados o tempo todo. */
html{height:auto;min-height:100vh}
.shell-redesign{height:auto;min-height:100vh}

/* ---- Visao Ano em mini-meses (cards) ---- */
.shell-redesign .year-cards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:16px;padding:2px 2px 24px;
}
.shell-redesign .ym-card{
  background:var(--panel);border:1px solid var(--grid);border-radius:14px;padding:14px 14px 10px;
  box-shadow:0 1px 2px rgba(16,20,30,.04),0 8px 22px rgba(16,20,30,.05);
}
.shell-redesign .ym-head{
  display:block;width:100%;text-align:left;font:inherit;font-size:14px;font-weight:800;
  color:var(--accent);margin:0 0 8px;letter-spacing:.01em;background:transparent;border:0;
  padding:3px 6px;border-radius:8px;cursor:pointer;
}
.shell-redesign .ym-head:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.shell-redesign .ym-cell.weekend{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.shell-redesign .ym-cell.weekend:hover{background:var(--surface-alt)}
.shell-redesign .ym-more{position:absolute;top:2px;right:3px;font-size:8px;font-weight:800;color:var(--muted);line-height:1}
.shell-redesign .ym-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.shell-redesign .ym-dow span{font-size:10px;font-weight:700;color:var(--muted);text-align:center}
.shell-redesign .ym-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.shell-redesign .ym-cell{
  position:relative;aspect-ratio:1/1;display:flex;align-items:flex-start;justify-content:center;
  padding-top:4px;border-radius:8px;text-decoration:none;color:var(--ink);
  font-size:11.5px;font-variant-numeric:tabular-nums;transition:background .1s ease;
}
.shell-redesign .ym-cell.empty{visibility:hidden;pointer-events:none}
.shell-redesign .ym-cell:not(.empty):hover{background:var(--surface-alt)}
.shell-redesign .ym-cell.has-events{font-weight:700}
.shell-redesign .ym-cell.today .ym-num{
  background:var(--accent);color:#fff;border-radius:50%;width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;
}
.shell-redesign .ym-num{line-height:1.1}
.shell-redesign .ym-dots{position:absolute;bottom:5px;left:0;right:0;display:flex;gap:2px;justify-content:center}
.shell-redesign .ym-dots i{width:5px;height:5px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.06)}

/* Densidade da visao Ano: camada de eventos comeca mais acima (casa com
   eventLayerTop=28 no calendar-grid.js), deixando as linhas ~68px em vez de 76px. */
.shell-redesign .events{top:28px}
.shell-redesign .week-grid .day{min-height:46px}

/* Eventos: mesmo estilo (faixa de secao + cor), porem mais estetico —
   cantos suaves, brilho sutil no topo (efeito de relevo) e hover claro. */
.shell-redesign .event{
  border-radius:9px;font-weight:600;padding:4px 10px 4px 12px;border:0;
  box-shadow:inset 3px 0 0 var(--section-color, transparent), inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.16);
}
.shell-redesign .event .title{font-weight:700;letter-spacing:.005em;line-height:1.15}
.shell-redesign .event .meta{opacity:.9;font-weight:500;font-size:10.5px}
.shell-redesign .event:hover{
  filter:brightness(1.06);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 6px 16px rgba(0,0,0,.26);z-index:6;
}
.shell-redesign .event.holiday-event{box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.12)}
.shell-redesign .private-tag{border-radius:999px}
.shell-redesign .event .event-group-count{background:rgba(0,0,0,.28);font-weight:700}

/* Tooltip de evento e popover de grupo */
.shell-redesign .event-expanded{border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.4)}
.shell-redesign .event-group-popover{border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.3)}
.shell-redesign .event-group-item{border-radius:10px;background:var(--surface-alt);border-color:var(--grid)}
.shell-redesign .event-group-item-title{font-weight:700}

/* Badges de secao mais limpos */
.shell-redesign .section-badge{
  background:var(--surface-alt);border:1px solid var(--grid);box-shadow:none;
  font-weight:600;padding:3px 10px 3px 8px;
}
.shell-redesign .section-badge::before{box-shadow:none;width:8px;height:8px}

/* ---- Lista mensal: cartoes limpos e escaneaveis ---- */
.shell-redesign .event-row{
  background:var(--panel);border:1px solid var(--grid);border-radius:12px;padding:12px 14px;
  gap:12px;box-shadow:0 1px 2px rgba(16,20,30,.04);transition:border-color .12s,box-shadow .12s;
}
.shell-redesign .event-row:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--grid));box-shadow:0 6px 16px rgba(16,20,30,.08)}
.shell-redesign .event-row.holiday-event{border-left:3px solid var(--accent)}
.shell-redesign .event-title{font-size:14.5px;font-weight:700;color:var(--ink)}
.shell-redesign .event-schedule,
.shell-redesign .event-location{font-size:12.5px;color:var(--muted)}
.shell-redesign .event-row-actions .btn{border-radius:8px}

/* ---------- Paineis / formularios ---------- */
.shell-redesign .pane{
  background:var(--panel);border:1px solid var(--grid);border-radius:14px;
  box-shadow:0 1px 2px rgba(16,20,30,.05),0 10px 26px rgba(16,20,30,.06);
}
.shell-redesign .form input:not([type="checkbox"]):not([type="radio"]),
.shell-redesign .form select,
.shell-redesign .form textarea{
  background:var(--surface-alt);border:1px solid var(--grid);border-radius:9px;
  color:var(--ink);padding:8px 11px;font-size:13px;
}
.shell-redesign .form input:focus,
.shell-redesign .form select:focus,
.shell-redesign .form textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);
}
.shell-redesign .form label{font-size:12.5px;color:var(--muted)}

/* ---------- Toasts / rodape ---------- */
.shell-redesign .toast-container{display:flex;flex-direction:column;gap:8px}
.shell-redesign .foot{
  color:var(--muted);font-size:12px;border-top:1px solid var(--grid);
  display:flex;gap:14px;justify-content:center;padding:14px;margin-top:8px;
}

/* Foco visivel (acessibilidade) para itens de navegacao/pilulas */
.shell-redesign .app-nav .nav-btn:focus-visible,
.shell-redesign .view-pill:focus-visible,
.shell-redesign .rail-toggle:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

/* ============================================================
   Grade continua (Mes / Trimestre / Semestre) — "calendario de
   verdade": meses empilhados, cada mes uma grade completa (7 col,
   celulas fechadas e uniformes), eventos DENTRO das celulas como
   chips, barras multi-dia e "+N mais". Direcao escolhida pelo Felipe.
   ============================================================ */

/* Botões ‹ › de navegação dentro do mcal-head (vista Mês) */
.shell-redesign .mcal-nav-btn{
  background:transparent;border:1px solid var(--grid);border-radius:8px;
  color:var(--ink);cursor:pointer;font-size:17px;line-height:1;padding:2px 10px 3px;
  transition:background .15s;align-self:center;
}
.shell-redesign .mcal-nav-btn:hover{background:var(--surface-alt)}

/* Cartao de cada mes */
.shell-redesign .mcal{
  background:var(--panel);border:1px solid var(--grid);border-radius:16px;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,20,30,.04),0 10px 30px rgba(16,20,30,.06);
  margin-bottom:18px;
}
.shell-redesign .mcal:last-child{margin-bottom:0}

/* Cabecalho do mes */
.shell-redesign .mcal-head{display:flex;align-items:center;gap:10px;padding:14px 18px 12px}
.shell-redesign .mcal-head .mname{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:.01em}
.shell-redesign .mcal-head .myear{font-size:13px;font-weight:600;color:var(--muted)}
.shell-redesign .mcal-head .mcount{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--muted)}

/* Faixa dos dias da semana */
.shell-redesign .mcal-dow{
  display:grid;grid-template-columns:repeat(7,1fr);
  background:var(--surface-soft);border-top:1px solid var(--grid);border-bottom:1px solid var(--grid);
}
.shell-redesign .mcal-dow span{
  padding:8px 6px;text-align:center;font-size:10.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.shell-redesign .mcal-dow span.we{color:var(--accent)}

/* Semana (linha) + celulas de dia uniformes e fechadas */
.shell-redesign .mweek{position:relative;display:grid;grid-template-columns:repeat(7,1fr)}
.shell-redesign .mcell{
  min-height:118px;padding:6px 6px 4px;
  border-left:1px solid color-mix(in srgb,var(--grid) 60%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--grid) 60%,transparent);
}
.shell-redesign .mcell:first-child{border-left:0}
.shell-redesign .mweek:last-child .mcell{border-bottom:0}
.shell-redesign .mcell.we{background:color-mix(in srgb,var(--accent) 3.5%,transparent)}
.shell-redesign .mcell.other{background:color-mix(in srgb,var(--grid) 14%,transparent)}

/* Numero do dia */
.shell-redesign .mnum{
  display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;
  border-radius:999px;font-size:12.5px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;text-decoration:none;
}
.shell-redesign .mnum:hover{background:var(--surface-alt)}
.shell-redesign .mcell.other .mnum{color:var(--muted);opacity:.55;font-weight:500}
.shell-redesign .mcell.today .mnum{background:var(--accent);color:#fff;font-weight:800}
.shell-redesign .mcell.today .mnum:hover{background:var(--accent)}
/* Foco no numero do dia: sem outline nativo ao clicar, mas manter focus-visible acessivel */
.shell-redesign .mnum:focus{outline:none}
.shell-redesign .mnum:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Camada de eventos (barras multi-dia + chips) sobre as celulas */
.shell-redesign .mevents{
  position:absolute;left:0;right:0;top:30px;bottom:4px;padding:0 5px;
  display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:22px;gap:2px 3px;
  pointer-events:none;
}
/* Chip base = estilo A (solido). Sem prefixo .shell-redesign para que os
   previews da galeria de Preferencias (fora do calendario) tambem herdem.
   A aparencia usa variaveis setadas no JS (--category-color/--section-color/
   --chip-on), permitindo trocar o estilo (A-H) so mudando a classe do body. */
.mchip{
  pointer-events:auto;display:flex;align-items:center;gap:6px;overflow:hidden;
  border:0;border-radius:7px;padding:2px 8px 2px 9px;height:20px;cursor:pointer;
  font-size:11.5px;font-weight:600;line-height:1.2;white-space:nowrap;text-overflow:ellipsis;
  color:var(--chip-on,#fff);background:var(--category-color);
  box-shadow:inset 3px 0 0 var(--section-color,transparent),0 1px 1.5px rgba(0,0,0,.14);
  transition:filter .12s ease;
}
.mchip:hover{filter:brightness(1.07)}
.mchip-dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.15);background:var(--section-color)}
.mchip-time{font-weight:700;opacity:.92;flex:0 0 auto;font-variant-numeric:tabular-nums}
.mchip-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.mchip-count{flex:0 0 auto;margin-left:auto;font-size:9.5px;font-weight:800;line-height:1;background:rgba(0,0,0,.24);color:#fff;border-radius:999px;padding:2px 6px}
.mchip.private-event{border:1px dashed rgba(255,255,255,.75)}
.mmore{pointer-events:auto;align-self:start;font-size:10.5px;font-weight:700;color:var(--muted);text-decoration:none;padding:1px 6px;border-radius:6px;white-space:nowrap}
.mmore:hover{background:var(--surface-alt);color:var(--ink)}

/* ---- Estilos de chip A-H (classe no body: chip-style-x). A = base acima. ---- */
/* B · Claro (Google) */
.chip-style-b .mchip{background:color-mix(in srgb,var(--category-color) 18%,#fff);color:color-mix(in srgb,var(--category-color) 62%,#000);box-shadow:none}
.chip-style-b .mchip-dot{background:var(--category-color)}
.chip-style-b .mchip-time{opacity:.75}
/* C · Barra lateral */
.chip-style-c .mchip{background:color-mix(in srgb,var(--section-color) 22%,#fff);color:var(--ink);border:1px solid color-mix(in srgb,var(--section-color) 45%,var(--grid));border-left:5px solid var(--section-color);border-radius:5px;box-shadow:none}
.chip-style-c .mchip-dot{display:none}
.chip-style-c .mchip-time{color:color-mix(in srgb,var(--section-color) 55%,#000)}
/* D · Pilula solida */
.chip-style-d .mchip{border-radius:999px;padding-left:11px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.16)}
.chip-style-d .mchip-dot{background:rgba(255,255,255,.9)}
/* E · Contorno */
.chip-style-e .mchip{background:var(--panel);color:color-mix(in srgb,var(--category-color) 70%,var(--ink));border:1.5px solid var(--category-color);border-radius:7px;box-shadow:none}
.chip-style-e .mchip-dot{background:var(--section-color)}
.chip-style-e .mchip-time{color:var(--muted)}
/* F · Solido suave */
.chip-style-f .mchip{background:color-mix(in srgb,var(--category-color) 82%,#fff);color:var(--chip-on,#fff);border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.chip-style-f .mchip-dot{background:rgba(255,255,255,.85)}
/* G · Tint + barra */
.chip-style-g .mchip{background:color-mix(in srgb,var(--category-color) 17%,#fff);color:color-mix(in srgb,var(--category-color) 62%,#000);border-left:4px solid var(--section-color);border-radius:0 6px 6px 0;box-shadow:none}
.chip-style-g .mchip-dot{display:none}
.chip-style-g .mchip-time{opacity:.8}
/* H · Minimal */
.chip-style-h .mchip{background:transparent;color:var(--ink);border-radius:6px;padding-left:4px;box-shadow:none}
.chip-style-h .mchip-dot{width:9px;height:9px;background:var(--category-color)}
.chip-style-h .mchip-time{color:var(--muted);font-weight:700}
.chip-style-h .mchip:hover{background:var(--surface-alt);filter:none}

/* Responsivo: em telas menores as celulas encolhem um pouco */
@media (max-width:900px){
  .shell-redesign .mcell{min-height:96px}
  .shell-redesign .mchip-time{display:none}
}

/* Celular (<=767px, colunas de ~50px): o modo Grade reusa o mesmo .mchip do
   desktop (11.5px) -- nessa largura de coluna sobra espaco so pra 1-2
   letras do titulo antes do ellipsis. Encolhe fonte/preenchimento/pontinho
   pra caber mais texto legivel, sem mudar a logica de layout (lanes,
   +N mais) nem o desktop/tablet. */
@media (max-width:767px){
  .shell-redesign .mchip{
    font-size:9px;padding:1px 5px 1px 6px;height:17px;gap:4px;border-radius:5px;
  }
  .shell-redesign .mchip-dot{width:5px;height:5px}
  .shell-redesign .mchip-count{font-size:8px;padding:1px 5px}
  .shell-redesign .mevents{grid-auto-rows:19px}
  .shell-redesign .mmore{font-size:9px;padding:1px 4px}
}

/* ============================================================
   Preferencias — estilo dos eventos (chip) escolhido pelo usuario.
   Launcher na lateral (grupo "Preferencias") + modal com galeria.
   ============================================================ */
/* [16/08/2026] Alinhado ao mesmo tamanho/estilo de .nav-btn e .theme-control
   (ver comentario acima) -- antes tinha padding/raio/fundo/icone proprios,
   destoando dos vizinhos no mesmo grupo "Preferencias". */
.shell-redesign .prefs-chip-btn{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:9px;
  padding:8px 10px;font:inherit;font-size:13px;font-weight:600;color:var(--ink);
}
.shell-redesign .prefs-chip-btn:hover{background:var(--surface-alt);border-color:transparent}
.shell-redesign .prefs-chip-btn .ni{width:18px;text-align:center;flex:0 0 auto}
.shell-redesign .prefs-chip-btn .ni .icon{width:18px;height:18px}
.shell-redesign .prefs-chip-btn .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell-redesign .prefs-chip-btn .cur{
  flex:0 0 auto;margin-left:auto;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12.5px;font-weight:700;color:var(--accent);
}

.chip-modal-backdrop{
  position:fixed;inset:0;z-index:120;background:rgba(16,20,30,.42);
  display:flex;align-items:center;justify-content:center;padding:18px;
}
.chip-modal-backdrop[hidden]{display:none}
.chip-modal{
  background:var(--panel);border:1px solid var(--grid);border-radius:16px;
  width:min(680px,100%);max-height:min(86vh,720px);overflow:auto;
  box-shadow:0 24px 60px rgba(16,20,30,.35);
}
.chip-modal-head{
  display:flex;align-items:flex-start;gap:12px;padding:18px 20px 6px;position:sticky;top:0;background:var(--panel);
}
.chip-modal-head h2{margin:0;font-size:17px;font-weight:800;color:var(--ink)}
.chip-modal-head p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.chip-modal-close{
  margin-left:auto;flex:0 0 auto;border:1px solid var(--grid);background:var(--surface-alt);
  border-radius:9px;width:32px;height:32px;font-size:16px;cursor:pointer;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
}
.chip-modal-close .icon{width:16px;height:16px}
.chip-modal-close:hover{border-color:var(--accent)}
.chip-colormode-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:8px 20px 4px;padding:10px 12px;background:var(--surface-alt);
  border:1px solid var(--grid);border-radius:10px;
}
.chip-colormode-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.chip-colormode-label{font-size:12.5px;font-weight:800;color:var(--ink)}
.chip-colormode-desc{font-size:11px;color:var(--muted)}
.chip-colormode-seg{flex:0 0 auto;min-width:170px}
@media (max-width:560px){
  .chip-colormode-row{flex-direction:column;align-items:stretch}
  .chip-colormode-seg{width:100%}
}
.chip-gallery{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:12px 20px 8px;
}
.chip-card{
  text-align:left;cursor:pointer;background:var(--panel);border:1.5px solid var(--grid);
  border-radius:12px;padding:11px 12px 12px;transition:border-color .12s,box-shadow .12s;
}
.chip-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--grid));box-shadow:0 4px 14px rgba(16,20,30,.08)}
.chip-card.active{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.chip-card-head{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.chip-card-name{font-size:13px;font-weight:800;color:var(--ink)}
.chip-card-badge{margin-left:auto;font-size:10px;font-weight:800;color:#fff;background:var(--accent);border-radius:999px;padding:2px 8px}
.chip-card-preview{display:flex;flex-direction:column;gap:4px;background:var(--surface-alt);border:1px solid var(--grid);border-radius:8px;padding:8px}
.chip-modal-foot{
  display:flex;align-items:center;gap:10px;padding:10px 20px 18px;position:sticky;bottom:0;background:var(--panel);
}
.chip-modal-foot .hint{font-size:11.5px;color:var(--muted)}
.chip-modal-foot .btn-default{
  margin-left:auto;border:1px solid var(--grid);background:var(--surface-alt);color:var(--ink);
  border-radius:9px;padding:7px 13px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
}
.chip-modal-foot .btn-default:hover{border-color:var(--accent)}
@media (max-width:560px){ .chip-gallery{grid-template-columns:1fr} }

/* ============================================================
   Onboarding leve (src/ui/onboarding.js) — tour de boas-vindas na
   primeira visita, reaberto manualmente pelo menu do usuario.
   Mesmo padrao visual do chip-modal-* acima (overlay + card
   centralizado), sem escopo .shell-redesign (appendChild direto
   em document.body, igual ao chip-modal).
   ============================================================ */
.onboarding-modal-backdrop{
  position:fixed;inset:0;z-index:130;background:rgba(16,20,30,.5);
  display:flex;align-items:center;justify-content:center;padding:18px;
}
.onboarding-modal-backdrop[hidden]{display:none}
.onboarding-modal{
  position:relative;background:var(--panel);border:1px solid var(--grid);border-radius:16px;
  width:min(420px,100%);padding:28px 24px 20px;box-shadow:0 24px 60px rgba(16,20,30,.35);
  text-align:center;
}
.onboarding-close{
  position:absolute;top:12px;right:12px;border:1px solid var(--grid);background:var(--surface-alt);
  border-radius:9px;width:30px;height:30px;cursor:pointer;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
}
.onboarding-close .icon{width:14px;height:14px}
.onboarding-close:hover{border-color:var(--accent)}
.onboarding-eyebrow{
  display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);font-weight:800;margin-bottom:10px;
}
.onboarding-title{margin:0 0 8px;font-size:19px;font-weight:800;color:var(--ink);text-wrap:balance}
.onboarding-desc{margin:0 0 18px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.onboarding-dots{display:flex;justify-content:center;gap:6px;margin-bottom:18px}
.onboarding-dot{width:7px;height:7px;border-radius:50%;background:var(--grid);cursor:pointer;transition:background .15s ease}
.onboarding-dot.active{background:var(--accent);width:18px;border-radius:4px}
.onboarding-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}
.onboarding-skip{
  border:0;background:transparent;color:var(--muted);font:inherit;font-size:12.5px;font-weight:700;
  cursor:pointer;padding:6px 4px;
}
.onboarding-skip:hover{color:var(--ink)}
.onboarding-actions-right{display:flex;gap:8px}
.onboarding-back[hidden]{display:none}

/* ============================================================
   "Meus Dados" (src/ui/profile-modal.js) — editar nome/login/senha
   da propria conta, a partir do menu do usuario. Mesmo padrao visual
   de overlay + card dos modais acima (chip-modal/onboarding-modal).
   ============================================================ */
.profile-modal-backdrop{
  position:fixed;inset:0;z-index:130;background:rgba(16,20,30,.5);
  display:flex;align-items:center;justify-content:center;padding:18px;
}
.profile-modal-backdrop[hidden]{display:none}
.profile-modal{
  position:relative;background:var(--panel);border:1px solid var(--grid);border-radius:16px;
  width:min(380px,100%);max-height:min(88vh,640px);overflow:auto;
  padding:20px 22px 22px;box-shadow:0 24px 60px rgba(16,20,30,.35);
}
.profile-modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.profile-modal-head h2{margin:0;font-size:17px;font-weight:800;color:var(--ink)}
.profile-modal-close{
  border:1px solid var(--grid);background:var(--surface-alt);border-radius:9px;
  width:30px;height:30px;cursor:pointer;color:var(--ink);flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
}
.profile-modal-close .icon{width:14px;height:14px}
.profile-modal-close:hover{border-color:var(--accent)}
.profile-form{display:flex;flex-direction:column;gap:12px}
.profile-form .field span{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:4px;display:block}
.profile-form-sep{
  display:flex;align-items:center;gap:8px;margin:2px 0;
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;
}
.profile-form-sep::before,.profile-form-sep::after{content:'';flex:1;height:1px;background:var(--grid)}
.profile-form-error{
  margin:0;font-size:12.5px;color:var(--danger,#c0392b);
  background:color-mix(in srgb,var(--danger,#c0392b) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--danger,#c0392b) 35%,transparent);
  border-radius:8px;padding:8px 10px;
}
.profile-form-error[hidden]{display:none}
.profile-form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:2px}

/* Card do painel de admin: escolher o estilo padrao global */
.shell-redesign .chip-style-options{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.shell-redesign .chip-style-option{
  border:1px solid var(--grid);background:var(--surface-alt);color:var(--ink);
  border-radius:10px;padding:7px 12px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
}
.shell-redesign .chip-style-option b{color:var(--accent);margin-right:4px;font-weight:800}
.shell-redesign .chip-style-option:hover{border-color:var(--accent)}
.shell-redesign .chip-style-option.active{
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  border-color:var(--accent);color:var(--accent);
}
.shell-redesign .chip-style-option:disabled{opacity:.6;cursor:default}

/* ============================================================
   Mobile agenda-first (<=767px): Agenda (lista por dia) como
   padrao + mini-mes navegador + alternar Agenda/Grade.
   ============================================================ */
.shell-redesign .mob-cal{display:flex;flex-direction:column;gap:10px}
.shell-redesign .mob-toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--grid);border-radius:14px;padding:8px 10px;
}
.shell-redesign .mob-monthnav{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.shell-redesign .mob-nav{
  width:32px;height:32px;flex:0 0 auto;border-radius:9px;border:1px solid var(--grid);
  background:var(--surface-alt);color:var(--ink);font-size:16px;cursor:pointer;line-height:1;
}
.shell-redesign .mob-nav:hover{border-color:var(--accent)}
.shell-redesign .mob-mtitle{font-size:16px;font-weight:800;color:var(--ink)}
.shell-redesign .mob-mtitle small{font-weight:600;color:var(--muted);font-size:12px;margin-left:4px}
.shell-redesign .mob-seg{display:inline-flex;background:var(--surface-alt);border:1px solid var(--grid);border-radius:999px;padding:2px;flex:0 0 auto}
.shell-redesign .mob-seg button{
  border:0;background:transparent;font:inherit;font-size:12px;font-weight:700;color:var(--muted);
  padding:5px 12px;border-radius:999px;cursor:pointer;
}
.shell-redesign .mob-seg button.on{background:var(--accent);color:#fff}

/* Mini-mes navegador */
.shell-redesign .mini-cal{background:var(--panel);border:1px solid var(--grid);border-radius:14px;padding:8px 8px 6px}
.shell-redesign .mini-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:2px}
.shell-redesign .mini-cal-dow span{text-align:center;font-size:9.5px;font-weight:700;color:var(--muted)}
.shell-redesign .mini-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.shell-redesign .mini-cal-cell{
  position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  font-size:12px;border-radius:8px;border:0;background:transparent;color:var(--ink);
  font-variant-numeric:tabular-nums;cursor:pointer;
}
.shell-redesign .mini-cal-cell.mut{color:var(--muted);opacity:.5;cursor:default}
.shell-redesign .mini-cal-cell.today{background:var(--accent);color:#fff;font-weight:800}
.shell-redesign .mini-cal-cell:not(.mut):not(.today):hover{background:var(--surface-alt)}
.shell-redesign .mini-cal-cell .dt{position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--accent)}
.shell-redesign .mini-cal-cell.today .dt{background:#fff}

/* Agenda (lista por dia) */
.shell-redesign .agenda-list{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--grid);border-radius:14px;padding:2px 12px}
.shell-redesign .agenda-day{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--grid)}
.shell-redesign .agenda-day:first-child{border-top:0}
.shell-redesign .agenda-daycol{flex:0 0 44px;text-align:center}
.shell-redesign .agenda-daycol .dw{display:block;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase}
.shell-redesign .agenda-daycol .dn{display:block;font-size:20px;font-weight:800;line-height:1.15}
.shell-redesign .agenda-daycol.today .dn{background:var(--accent);color:#fff;border-radius:11px;padding:1px 0}
.shell-redesign .agenda-evs{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.shell-redesign .agenda-ev{
  display:flex;align-items:stretch;gap:9px;text-decoration:none;color:var(--ink);
  background:var(--panel);border:1px solid var(--grid);border-radius:12px;padding:9px 11px;
  box-shadow:0 1px 2px rgba(16,20,30,.05);
}
.shell-redesign .agenda-ev:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--grid))}
.shell-redesign .agenda-ev.holiday{background:color-mix(in srgb,#26c6da 8%,var(--panel))}
.shell-redesign .agenda-ev-bar{flex:0 0 4px;border-radius:3px;background:var(--c,var(--accent))}
.shell-redesign .agenda-ev-body{min-width:0;flex:1}
.shell-redesign .agenda-ev-tt{font-size:13.5px;font-weight:700;line-height:1.25;color:var(--ink)}
.shell-redesign .agenda-ev-mt{font-size:11.5px;color:var(--muted);margin-top:3px;display:flex;flex-wrap:wrap;gap:2px 10px;align-items:center}
.shell-redesign .agenda-ev-mt .tag{display:inline-flex;align-items:center;gap:5px;min-width:0}
.shell-redesign .agenda-ev-mt .loc{max-width:100%;overflow:hidden}
.shell-redesign .agenda-ev-mt .loctext{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.shell-redesign .agenda-ev-mt .sdot{width:7px;height:7px;border-radius:50%;background:var(--s,var(--accent));flex:0 0 auto}
.shell-redesign .agenda-ev-mt .range{color:var(--accent);font-weight:700}
.shell-redesign .agenda-ev-mt .priv{color:var(--muted);font-weight:700}
.shell-redesign .agenda-empty{text-align:center;color:var(--muted);font-size:13px;padding:26px 8px}

/* No modo Grade dentro do mobile, tira a margem extra do unico mes */
.shell-redesign .mob-gridbox .mcal{margin-bottom:0}

/* ============================================================
   Vista Agenda — layout desktop (rota #/lista, largura >=768px)
   Nao afeta o mobile: renderDesktopAgendaView nunca e' chamada
   em isMobileView(). Classes .mob-* e .mini-cal continuam
   sendo exclusivas do mobile.
   ============================================================ */
.shell-redesign .desk-agenda{display:flex;flex-direction:column}
.shell-redesign .desk-agenda-nav{
  /* seletor de mês dentro da coluna esquerda, acima do mini-cal */
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:7px 0 8px;
}
.shell-redesign .desk-agenda-title{
  font-size:15px;font-weight:700;color:var(--ink);
  min-width:160px;text-align:center;
}
.shell-redesign .desk-agenda-title small{font-size:12px;font-weight:400;color:var(--muted)}
.shell-redesign .desk-nav{
  background:transparent;border:1px solid var(--grid);border-radius:8px;
  color:var(--ink);cursor:pointer;font-size:18px;line-height:1.4;padding:3px 12px;
  transition:background .15s;
}
.shell-redesign .desk-nav:hover{background:var(--surface-alt)}
.shell-redesign .desk-agenda-body{
  display:flex;gap:20px;align-items:flex-start;
  padding-left:8px;
}
.shell-redesign .desk-agenda-mini{
  /* Mini-cal maior e mais legível no desktop */
  flex:0 0 auto;width:280px;position:sticky;top:0;
}
/* Override de tamanho de célula para o contexto desktop */
.shell-redesign .desk-agenda-mini .mini-cal{width:100%}
.shell-redesign .desk-agenda-mini .mini-cal-cell{font-size:13.5px;border-radius:10px}
.shell-redesign .desk-agenda-mini .mini-cal-dow span{font-size:11px}
.shell-redesign .desk-agenda-list{
  flex:1;min-width:0;overflow-y:auto;
  /* scroll proprio: altura maxima baseada na viewport */
  max-height:calc(100vh - 200px);
  padding-right:2px;
}

/* ============================================================
   Navegacao mobile: tab bar fixa + bottom sheets (Filtros/Mais)
   Substitui o hamburguer+gaveta como navegacao PRINCIPAL em <=767px
   (o rail lateral continua existindo e funcionando normalmente em
   telas >=768px, sem nenhuma mudanca). Ver Notion: "Especificacao:
   Navegacao Mobile (Tab Bar)" (pagina filha de Arquitetura Tecnica).
   ============================================================ */
.shell-redesign{
  --tabbar-height:56px;
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --tabbar-active-bg:color-mix(in srgb, var(--accent) 15%, transparent);
  --sheet-radius:20px;
  --sheet-max-height:82vh;
  --z-tabbar:70;
  --z-feedback-mobile:80;
  --z-sheet-backdrop:90;
  --z-sheet:95;
}

.shell-redesign .tabbar{
  display:none;position:fixed;left:0;right:0;bottom:0;
  height:calc(var(--tabbar-height) + var(--safe-bottom));
  padding-bottom:var(--safe-bottom);
  background:var(--panel);border-top:1px solid var(--grid);
  box-shadow:0 -6px 20px -4px rgba(0,0,0,.12);
  z-index:var(--z-tabbar);
}
@media (max-width:767px){ .shell-redesign .tabbar{display:flex} }
.shell-redesign .tabbar-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:none;background:none;color:var(--muted);font:inherit;cursor:pointer;position:relative;
  min-height:48px;padding:0;
}
.shell-redesign .tabbar-item .icon{width:19px;height:19px;position:relative;z-index:1}
.shell-redesign .tabbar-item span:last-child{font-size:10px;font-weight:700;position:relative;z-index:1}
/* left:auto dependia da "posicao estatica" que o motor de renderizacao
   calcula pra um item abspos dentro de flex -- inconsistente entre
   navegadores (aqui no pane ficava centralizado, mas relatado torto num
   navegador real). Centraliza de forma explicita, sem depender disso. */
.shell-redesign .tabbar-chip{
  position:absolute;left:50%;top:7px;width:34px;height:24px;border-radius:10px;
  transform:translateX(-50%);transition:background .15s ease;
}
.shell-redesign .tabbar-item.active,
.shell-redesign .tabbar-item[aria-expanded="true"]{color:var(--accent)}
.shell-redesign .tabbar-item.active .tabbar-chip,
.shell-redesign .tabbar-item[aria-expanded="true"] .tabbar-chip{background:var(--tabbar-active-bg)}
/* [23/08/2026 C3] tabbar-new-spacer: flex:1 no fluxo, reserva o slot central
   sem renderizar nada. tabbar-new-wrap: position:absolute no centro exato da
   tela — + sempre em 50% independente do nº de itens visíveis. */
.shell-redesign .tabbar-new-spacer{flex:1;pointer-events:none}
.shell-redesign .tabbar-new-wrap{
  position:absolute;left:50%;transform:translateX(-50%);
  top:0;bottom:0;width:60px;
  display:flex;align-items:flex-start;justify-content:center;
  pointer-events:none;z-index:1;
}
.shell-redesign .tabbar-new{
  width:52px;height:52px;border-radius:50%;background:var(--accent);border:4px solid var(--panel);
  color:#fff;display:flex;align-items:center;justify-content:center;position:absolute;top:-16px;
  box-shadow:0 8px 18px -4px color-mix(in srgb,var(--accent) 55%,transparent);cursor:pointer;
  pointer-events:auto;
}
.shell-redesign .tabbar-new .icon{width:22px;height:22px}
.shell-redesign .tabbar-new.cart{background:#d97706;box-shadow:0 8px 18px -4px color-mix(in srgb,#d97706 55%,transparent)}

/* Bottom sheets (Filtros / Mais) */
.shell-redesign .sheet-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.42);
  z-index:var(--z-sheet-backdrop);opacity:0;pointer-events:none;transition:opacity .2s ease;
}
@media (max-width:767px){ .shell-redesign .sheet-overlay{display:block} }
.shell-redesign .sheet-overlay.show{opacity:1;pointer-events:auto}
.shell-redesign .bottom-sheet{
  display:none;position:fixed;left:0;right:0;bottom:0;background:var(--panel);
  border-radius:var(--sheet-radius) var(--sheet-radius) 0 0;
  box-shadow:0 -14px 32px -8px rgba(0,0,0,.22);
  padding:12px 18px calc(18px + var(--safe-bottom));
  transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);
  z-index:var(--z-sheet);max-height:var(--sheet-max-height);overflow-y:auto;
}
@media (max-width:767px){ .shell-redesign .bottom-sheet{display:block} }
.shell-redesign .bottom-sheet.show{transform:translateY(0)}
.shell-redesign .sheet-handle{width:36px;height:4px;border-radius:2px;background:var(--grid);margin:0 auto 12px}

/* Conteudo reparentado pro sheet de Filtros (#legend, movido pra fora de
   #appRail via JS): belt-and-suspenders para o caso de legend-hidden chegar
   aqui. A correção principal é em legend-visibility.js (28/08/2026):
   updateLegendVisibility() detecta BororosMobileSheets.isMobile() e limpa
   legend-hidden/legend-floating antes de retornar — portanto no fluxo normal
   este override nao e' mais necessario, mas nao tem custo em manter. */
#filterSheetBody .legend{
  display:block !important;position:static !important;inset:auto !important;
  max-height:none !important;box-shadow:none !important;padding:0 !important;
  margin:0 !important;width:100% !important;
}

/* Sheet de "Mais": reaproveita o #appRail existente como bottom sheet no
   mobile (em vez de reparentar .app-nav/.session-controls/.actions-group
   pra um elemento novo -- essas 3 tem lookups escopados em outros scripts
   que rodam em momentos diferentes: script inline "Move Tema",
   chip-style-runtime.js e topbar.js; reparentar quebrava esses scripts,
   ver Notion "Especificacao: Navegacao Mobile (Tab Bar)"). So o #legend
   e reparentado (seguro, nenhum outro script depende de onde ele fica).
   Em <=767px o rail vira sheet inferior; a gaveta lateral (<=1023px, ja
   definida acima) continua valendo em tablet. */
@media (max-width:767px){
  .shell-redesign .app-rail{
    left:0;right:0;top:auto;bottom:0;width:auto;height:auto;
    max-height:var(--sheet-max-height);
    transform:translateY(100%) !important;
    border-radius:var(--sheet-radius) var(--sheet-radius) 0 0;border-right:none;
    box-shadow:0 -14px 32px -8px rgba(0,0,0,.22);
    transition:transform .3s cubic-bezier(.32,.72,0,1);
    z-index:var(--z-sheet);
  }
  .shell-redesign.rail-open .app-rail{transform:translateY(0) !important}
  .shell-redesign .rail-backdrop{z-index:var(--z-sheet-backdrop)}
}
/* Desktop: botão "Enviar feedback" do rail é redundante com o widget flutuante */
@media (min-width:768px){ .app-nav-group--feedback{ display:none !important } }

/* [28/08/2026 v2.53] Feedback no mobile: botao flutuante "?" ocultado;
   acesso via botao "Enviar feedback" no sheet do menu "Mais" (rail).
   O panel continua no DOM (filho de .feedback-widget) — quando acionado
   via railFeedbackBtn o panel aparece full-width acima da tab bar. */
@media (max-width:767px){
  .feedback-button{display:none !important}
  .feedback-widget{
    right:0 !important; left:0 !important;
    bottom:calc(var(--tabbar-height) + var(--safe-bottom)) !important;
    z-index:var(--z-feedback-mobile) !important;
    align-items:stretch !important;
  }
  .feedback-panel{
    width:100% !important;
    border-radius:16px 16px 0 0 !important;
    box-shadow:0 -8px 24px rgba(0,0,0,.22) !important;
    border-bottom:none !important;
  }
  .shell-redesign.sheet-open .feedback-widget{opacity:0;pointer-events:none}
}

/* Cabecalho condensado no mobile: some o que virou redundante com a tab
   bar (hamburguer, Cadastrar/Entrar/Sair -- ja cobertos pelo 5o slot "Mais"
   e pelo sheet) ou nao se aplica a Agenda mobile (pilulas de periodo, ja
   confirmado em calendar-grid.js:isMobileView() que a Agenda ignora esse
   controle; Exportar imagem/.ics, que migraram pro sheet "Mais"). */
@media (max-width:767px){
  .shell-redesign .rail-toggle{display:none !important}
  /* [16/08/2026] #userMenu (avatar) continua visivel -- e' o unico jeito de
     abrir Preferencias/Sair no mobile agora que saíram do sheet "Mais".
     sessionLabel/loginBtn/registerBtn continuam escondidos (redundante com
     a aba "Entrar" da tab bar pro anonimo). */
  /* styles.css:640px tem .session-controls{width:100%;justify-content:flex-start}
     (legado) -- com width:100% o margin-left:auto nao tem "sobra" pra
     empurrar, e o avatar ficava colado na esquerda. Precisa neutralizar
     width/justify-content aqui tambem, nao so' adicionar margin-left. */
  .shell-redesign .topbar-primary .session-controls{
    display:flex;gap:0;margin-left:auto;width:auto;justify-content:flex-end;
  }
  .shell-redesign .topbar-primary .session-controls > *:not(.user-menu){display:none}
  .shell-redesign .view-pills{display:none}
  .shell-redesign .topbar-controls .actions-group{display:none}
}

/* Reserva espaco pra tab bar no rodape da tela (substitui o padding-bottom
   fixo de 78px que so cobria a barra parcial antiga). */
@media (max-width:767px){
  .shell-redesign .layout{padding-bottom:calc(var(--tabbar-height) + var(--safe-bottom) + 12px)}
}

/* [24/08/2026 v2.49] Topbar: esconde botão + redundante no mobile (FAB da tab bar já cobre) */
@media (max-width:767px){
  .shell-redesign #newEventLink{ display:none!important; }
}

/* [24/08/2026 v2.49] Filtros: padding lateral no sheet body + safe-area iOS */
@media (max-width:767px){
  #filterSheetBody{
    padding:0 12px calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

/* [24/08/2026 v2.49] Form de criação/edição — redesign mobile estilo Google Calendar
   Fixes: scroll horizontal + touch targets + estética + fallback sem :has() ---------- */
@media (max-width:767px){
  /* Pane sem caixa quando contém form (full-bleed no mobile).
     Duplo seletor: :has() para browsers modernos + .pane-event-form (classe
     adicionada via JS em events.js) como fallback para browsers mais antigos. */
  .shell-redesign .calendar .pane:has(form.form-split),
  .shell-redesign .calendar .pane-event-form{
    padding:0!important;border:none!important;box-shadow:none!important;
    background:transparent!important;border-radius:0!important;
    overflow-x:hidden;
  }
  /* h2 "Novo Evento" / "Editar Evento": fica como subtítulo discreto */
  .shell-redesign .calendar .pane:has(form.form-split) h2,
  .shell-redesign .calendar .pane-event-form h2{
    padding:4px 16px 2px;margin:0;font-size:11px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  }
  /* Form: coluna única, overflow contido */
  .shell-redesign form.form-split{
    display:flex!important;flex-direction:column;overflow-x:hidden;
  }
  /* Labels como flex column → empilha texto do label acima do input */
  .shell-redesign form.form-split label{
    display:flex;flex-direction:column;gap:3px;width:100%;
  }
  /* Todos os campos: largura 100%, box-sizing, 16px (evita zoom iOS) */
  .shell-redesign form.form-split input:not([type="checkbox"]):not([type="radio"]),
  .shell-redesign form.form-split select{
    width:100%;box-sizing:border-box;font-size:16px;
    min-height:44px;padding-top:8px;padding-bottom:8px;
  }
  .shell-redesign form.form-split textarea{
    width:100%;box-sizing:border-box;font-size:16px;min-height:80px;
  }
  /* form-main: padding lateral; campos separados por linhas finas */
  /* min-width:0 + width:100% evita flex item inflar para o min-content dos grid inputs */
  .shell-redesign form.form-split .form-main{ padding:0 16px;min-width:0;width:100%; }
  .shell-redesign form.form-split .form-main>.field{
    border-bottom:1px solid var(--grid);padding:10px 0;
  }
  .shell-redesign form.form-split .form-main>.field:last-child{ border-bottom:none; }
  /* Título: proeminente, 24px, sublinhado */
  .shell-redesign form.form-split .field-title{
    border-bottom:none!important;padding:6px 0 4px!important;
  }
  .shell-redesign form.form-split .field-title input{
    font-size:24px!important;font-weight:600;
    border:none!important;border-bottom:2px solid var(--grid)!important;
    border-radius:0!important;background:transparent!important;
    padding:4px 0 8px!important;min-height:52px!important;
  }
  .shell-redesign form.form-split .field-title input:focus{
    box-shadow:none!important;border-bottom-color:var(--accent)!important;
  }
  /* Datetime group: card com 2 colunas para pares data/hora */
  .shell-redesign form.form-split .form-datetime-group{
    border-radius:12px!important;overflow:hidden;
    padding:0!important;gap:0!important;
    border:1px solid var(--grid)!important;background:var(--surface-alt)!important;
    margin:4px 0;width:100%;min-width:0;
  }
  .shell-redesign form.form-split .form-datetime-group .field.field-row{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    border-bottom:1px solid var(--grid);padding:8px 12px!important;
    overflow:hidden;
  }
  .shell-redesign form.form-split .form-datetime-group .field.field-row:last-child{
    border-bottom:none;
  }
  .shell-redesign form.form-split .form-datetime-group input{
    background:transparent!important;border:none!important;
    border-radius:0!important;padding:2px 0!important;
    min-height:36px!important;width:100%;box-sizing:border-box;
    max-width:100%;overflow:hidden;
  }
  /* Side card: seção plana com separador superior */
  .shell-redesign form.form-split .form-side{ padding:0 16px;width:100%;box-sizing:border-box; }
  .shell-redesign form.form-split .form-side-card{
    box-shadow:none!important;border:none!important;
    border-top:1px solid var(--grid)!important;
    border-radius:0!important;background:transparent!important;padding:0!important;
  }
  /* Toggles: linhas 52px estilo GCal (separador inferior) */
  .shell-redesign form.form-split .toggle{
    min-height:52px;padding:0!important;
    border:none!important;border-bottom:1px solid var(--grid)!important;
    border-radius:0!important;background:transparent!important;
    font-size:15px!important;color:var(--ink);gap:12px;
  }
  .shell-redesign form.form-split .form-side-card>.field{
    border-bottom:1px solid var(--grid);padding:10px 0;
  }
  .shell-redesign form.form-split .form-side-card>.field:last-child{ border-bottom:none; }
  /* Footer: botões full-width com padding lateral */
  .shell-redesign form.form-split .form-footer{
    padding:12px 16px;border-top:1px solid var(--grid);gap:8px;margin-top:8px;
  }
  .shell-redesign form.form-split .form-footer .btn{
    min-height:48px!important;flex:1 1 auto;justify-content:center;
    font-size:15px;border-radius:12px!important;
  }
  /* [24/08/2026 v2.49.2] Footer fixo no mobile — sempre visível acima da tabbar.
     position:sticky não funciona (form.form-split cria BFC com overflow:hidden auto
     que impede o pane de ser detectado como scroll container). Fixed é mais confiável. */
  .shell-redesign form.form-split .form-footer{
    position:fixed;
    bottom:calc(56px + env(safe-area-inset-bottom,0px));
    left:0;right:0;
    background:var(--panel);
    border-top:1px solid var(--grid)!important;
    padding:12px 16px!important;
    z-index:50;
    margin:0!important;
  }
  /* Espaço no fundo do pane para o scroll alcançar conteúdo atrás do footer fixo */
  .shell-redesign .pane-event-form{ padding-bottom:90px!important; }
  /* FAB (+) oculto durante criação/edição de evento — já está na tela de form */
  body:has(.pane-event-form) #mobileNavNew,
  body:has(.pane-event-form) .tabbar-new-spacer,
  body:has(.pane-event-form) .tabbar-new-wrap{ display:none!important; }
  /* Seções: <details> colapsável — closed por padrão no mobile */
  .shell-redesign form.form-split .sections-details{ width:100%; }
  .shell-redesign form.form-split .sections-details>summary{
    display:flex;align-items:center;gap:6px;
    cursor:pointer;list-style:none;
    font-size:12px;color:var(--muted);font-weight:500;
    padding:6px 0;user-select:none;
  }
  .shell-redesign form.form-split .sections-details>summary::-webkit-details-marker{ display:none; }
  .shell-redesign form.form-split .sections-details>summary .hint{ flex:1; }
  .shell-redesign form.form-split .sections-details>summary::after{
    content:'›';margin-left:auto;
    font-size:20px;line-height:1;font-weight:300;
    display:inline-block;transition:transform .2s;
  }
  .shell-redesign form.form-split .sections-details[open]>summary::after{
    transform:rotate(90deg);
  }
}

/* ============================================================
   [26/08/2026 v2.49.3] Melhorias form de evento — 7 itens
   ============================================================ */

/* 1. Seções: fix tree — todos os wrappers de grupo ficam em coluna */
/* Grupos não-atribuíveis (têm .section-group dentro) ficam em coluna;
   folhas atribuíveis (têm label/input dentro) ficam em linha (padrão) */
.shell-redesign form.form-split .section-choice:has(.section-group){
  flex-direction:column;align-items:flex-start;
}
.shell-redesign form.form-split .section-choice-tree{
  max-height:180px;overflow-y:auto;overflow-x:hidden;
}
/* Section group headings: sem maiúsculas excessivas e com padding de indent */
.shell-redesign form.form-split .section-group{
  text-transform:none!important;font-size:11px;
  padding:6px 0 2px;
}
/* Oculta hint "Clique para substituir..." — instrução desktop-only */
.shell-redesign form.form-split .section-actions .hint{display:none}

/* 2. Label de grupo no form-side-card (Formato) */
.shell-redesign form.form-split .form-side-group-label{
  font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em;
  padding:12px 0 2px;
}

/* 3. toggle-hint: subtitle no toggle Privado — em linha própria */
.shell-redesign form.form-split .toggle-hint{
  display:block;
  font-size:11px;color:var(--muted);font-weight:400;
  margin-top:3px;
}

/* 4. form-toggle-privacy: sem borda inferior (Notas vem depois) */
.shell-redesign form.form-split .form-toggle-privacy{
  border-bottom:none!important;
}

/* 5. field-notes quando dentro do form-side-card (ao final) */
.shell-redesign form.form-split .form-side-card .field-notes{
  border-top:1px solid var(--grid);
  padding:12px 0 4px;border-bottom:none;
}
.shell-redesign form.form-split .form-side-card .field-notes label{
  display:flex;flex-direction:column;gap:4px;
  font-size:12px;font-weight:500;color:var(--muted);
}
.shell-redesign form.form-split .form-side-card .field-notes textarea{
  min-height:80px;resize:none; /* overridden to resize:vertical in desktop @media block */
}

/* 5b. Toggles (Online / Na sede / Privado) ficam em row —
   a regra genérica `.form-split label` no @media 767px forçava column */
.shell-redesign form.form-split .toggle{
  flex-direction:row!important;
  align-items:center;
  gap:8px;
}

/* 5c. form-side-card: padding real (p-4 Tailwind fica em @layer utilities,
   batido por regra não-layered com especificidade 0) */
.shell-redesign form.form-split .form-side-card{
  padding:14px!important;
}

/* 5d. Cancelar: centralizar texto no botão (<a class="btn">) */
.shell-redesign form.form-split .form-footer .btn:not(.primary){
  display:flex!important;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* 6. Ocultar botão "?" (feedback-widget) durante form de evento */
body:has(.pane-event-form) .feedback-widget,
body:has(.pane-event-form) .feedback-button{display:none!important;}

/* 7. Ocultar topbar de busca durante form de evento */
body:has(.pane-event-form) #searchWrap{display:none!important;}

/* ── v2.49.4: Seletor de seções — chips + bottom sheet ──────────────────── */

/* Ocultar tree checkbox original (submit continua lendo dali) */
.shell-redesign form.form-split [data-role="sections"]{display:none;}

/* Caixa visual do picker */
.shell-redesign form.form-split .sec-picker{
  border:1px solid var(--grid);
  border-radius:8px;
  background:var(--surface-alt,var(--surface));
  padding:8px 10px;
}
.shell-redesign form.form-split .sec-picker--hidden{display:none;}
.shell-redesign form.form-split .sec-picker-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:6px;
}
.shell-redesign form.form-split .sec-picker-eyebrow{
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);
}
.shell-redesign form.form-split .sec-edit-btn{
  font-size:12px;font-weight:600;
  color:var(--accent,#14b8a6);background:none;border:none;
  cursor:pointer;padding:2px 4px;
}

/* Fila de chips */
.shell-redesign form.form-split .sec-chips-row{
  display:flex;flex-wrap:wrap;gap:5px;
  align-items:center;min-height:28px;
}

/* Chip de seção selecionada */
.shell-redesign form.form-split .sec-chip{
  display:inline-flex;align-items:center;gap:3px;
  padding:4px 6px 4px 9px;
  background:rgba(20,184,166,.12);
  border:1px solid rgba(20,184,166,.25);
  border-radius:99px;color:var(--accent,#14b8a6);
  font-size:12px;font-weight:500;line-height:1;
  animation:secChipIn .15s ease;
}
@keyframes secChipIn{
  from{opacity:0;transform:scale(.85)}
  to{opacity:1;transform:scale(1)}
}
.shell-redesign form.form-split .sec-chip-rm{
  background:none;border:none;padding:0 2px;
  color:var(--accent,#14b8a6);font-size:14px;line-height:1;
  cursor:pointer;opacity:.65;
}
.shell-redesign form.form-split .sec-chip-rm:hover{opacity:1;}

/* Botão "Adicionar seção" */
.shell-redesign form.form-split .sec-add-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 10px;
  background:none;
  border:1px dashed var(--grid);
  border-radius:99px;color:var(--muted);
  font-size:12px;font-family:inherit;cursor:pointer;
  transition:border-color .15s,color .15s;
}
.shell-redesign form.form-split .sec-add-btn:hover{
  border-color:var(--accent,#14b8a6);color:var(--accent,#14b8a6);
}
.shell-redesign form.form-split .sec-add-btn.compact{
  padding:4px 8px;font-size:15px;line-height:1.2;
}

/* Overlay escurecido */
.sec-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.52);
  z-index:900;
  opacity:0;pointer-events:none;
  transition:opacity .22s;
}
.sec-overlay.open{opacity:1;pointer-events:all;}

/* Bottom sheet */
.sec-sheet{
  position:fixed;
  bottom:0;left:0;right:0;
  background:var(--surface);
  border-radius:20px 20px 0 0;
  z-index:901;
  max-height:72vh;
  display:flex;flex-direction:column;
  transform:translateY(100%);
  transition:transform .26s cubic-bezier(.32,.72,0,1);
  pointer-events:none;
}
.sec-sheet.open{transform:translateY(0);pointer-events:all;}

.sec-sh-handle{
  width:36px;height:4px;background:var(--grid);border-radius:2px;
  margin:10px auto 0;flex-shrink:0;
}
.sec-sh-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px 8px;
  border-bottom:1px solid var(--grid);flex-shrink:0;
}
.sec-sh-title{font-size:15px;font-weight:700;color:var(--ink);}
.sec-sh-clear{
  font-size:12px;color:var(--muted);
  background:none;border:none;cursor:pointer;padding:2px 6px;
}
.sec-sh-clear:hover{color:#e03e3e;}

.sec-sh-body{
  overflow-y:auto;flex:1;padding:4px 0;
  overscroll-behavior:contain;
}
.sec-sh-footer{
  padding:10px 16px 14px;
  border-top:1px solid var(--grid);flex-shrink:0;
}
@media (max-width:767px){
  .sec-sh-footer{padding-bottom:calc(56px + max(14px,env(safe-area-inset-bottom)));}
}
.sec-sh-done{width:100%;}

/* Itens do tree no sheet */
.sec-sh-group{
  padding:8px 16px 3px;
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);
}
.sec-sh-group.depth-1{padding-left:24px;}
.sec-sh-group.depth-2{padding-left:32px;}

.sec-sh-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;cursor:pointer;
  transition:background .1s;
}
.sec-sh-item:active{background:var(--grid);}
.sec-sh-item.depth-1{padding-left:24px;}
.sec-sh-item.depth-2{padding-left:32px;}
.sec-sh-item.disabled{cursor:default;opacity:.45;}

.sec-sh-box{
  width:20px;height:20px;border-radius:6px;
  border:1.5px solid var(--grid);background:transparent;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .12s,border-color .12s;
}
.sec-sh-item.on .sec-sh-box{
  background:var(--accent,#14b8a6);border-color:var(--accent,#14b8a6);
}
.sec-sh-chk{
  color:#fff;font-size:11px;font-weight:700;
  opacity:0;transition:opacity .1s;
}
.sec-sh-item.on .sec-sh-chk{opacity:1;}
.sec-sh-lbl{
  font-size:14px;color:var(--ink);flex:1;line-height:1.35;
}

/* ── v2.49.5: Segmented control Presencial/Online + pill Na sede ──────────── */

/* Ocultar o checkbox original (mantido para submit) */
.shell-redesign form.form-split .fmt-hidden-cb{
  position:absolute;opacity:0;pointer-events:none;width:0;height:0;
}

/* Segmented pill — estilo Apple com indicador deslizante */
.shell-redesign form.form-split .fmt-seg{
  display:flex;
  background:var(--grid);
  border-radius:99px;
  padding:3px;
  margin-bottom:10px;
  position:relative;
}
/* Indicador branco que desliza entre os botões */
.shell-redesign form.form-split .fmt-seg::before{
  content:'';
  position:absolute;
  top:3px;bottom:3px;left:3px;
  width:calc(50% - 3px);
  background:var(--surface);
  border-radius:99px;
  box-shadow:0 1px 4px rgba(0,0,0,.14);
  transition:transform .22s cubic-bezier(.4,0,.2,1);
  z-index:0;
}
.shell-redesign form.form-split .fmt-seg[data-active="1"]::before{
  transform:translateX(100%);
}
.shell-redesign form.form-split .fmt-seg-btn{
  flex:1;
  padding:8px 10px;
  border:none;
  background:transparent;
  border-radius:99px;
  font-size:13px;font-weight:500;
  color:var(--muted);
  cursor:pointer;
  transition:color .18s;
  line-height:1;
  position:relative;z-index:1;
}
.shell-redesign form.form-split .fmt-seg-btn.active{
  color:var(--ink);
  font-weight:600;
}

/* Row Na sede (label + pill switch) */
.shell-redesign form.form-split .fmt-site-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:4px 0 6px;
}
.shell-redesign form.form-split .fmt-site-lbl{
  font-size:14px;color:var(--ink);white-space:nowrap;
}

/* iOS-style pill toggle switch */
.shell-redesign form.form-split .pill-toggle{
  display:inline-flex;flex-direction:row;align-items:center;
  cursor:pointer;width:auto!important;gap:0;
}
.shell-redesign form.form-split .pill-toggle input{
  position:absolute;opacity:0;pointer-events:none;width:0;height:0;
}
.shell-redesign form.form-split .pill-track{
  position:relative;
  width:46px;height:28px;
  background:var(--grid);
  border-radius:14px;
  transition:background .2s;
  flex-shrink:0;
}
.shell-redesign form.form-split .pill-toggle input:checked ~ .pill-track{
  background:var(--accent,#14b8a6);
}
.shell-redesign form.form-split .pill-thumb{
  position:absolute;
  top:3px;left:3px;
  width:22px;height:22px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 1px 4px rgba(0,0,0,.22);
  transition:left .2s;
}
.shell-redesign form.form-split .pill-toggle input:checked ~ .pill-track .pill-thumb{
  left:calc(100% - 25px);
}

/* ── v2.50: Desktop form — adaptações pós-mobile ─────────────────────── */
@media (min-width:768px){
  /* h2 "Novo Evento" / "Editar Evento": compacto no desktop também */
  .shell-redesign .calendar .pane-event-form h2{
    font-size:12px;font-weight:700;letter-spacing:.07em;
    text-transform:uppercase;color:var(--muted);
    margin:0 0 12px;padding:0;
  }

  /* Restaura o grid de 2 colunas no desktop
     (a regra global .shell-redesign .form{display:flex} precisava ser sobrescrita) */
  .shell-redesign form.form-split{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:24px;
    align-items:flex-start;
  }
  /* Footer ocupa ambas as colunas */
  .shell-redesign form.form-split .form-footer{
    grid-column:1 / -1;
    display:flex;gap:10px;
    justify-content:flex-start;
  }

  /* ── Coluna direita (form-side): visual flat e alinhado com form-main ── */

  /* Remove o card (borda/fundo distintos) — fica plano como form-main */
  .shell-redesign form.form-split .form-side-card{
    background:transparent!important;
    border:none!important;
    box-shadow:none!important;
    border-radius:0!important;
    padding:0!important;
    gap:14px;
  }
  /* form-side: espaçamento entre seções */
  .shell-redesign form.form-split .form-side{
    display:flex;flex-direction:column;gap:14px;
  }
  /* Labels dentro do form-side-card: empilhar texto → input (igual ao form-main) */
  .shell-redesign form.form-split .form-side-card label{
    display:flex;flex-direction:column;gap:4px;
    font-size:12.5px;color:var(--muted);
  }
  /* Inputs/select/textarea: mesma cor e borda do form-main */
  .shell-redesign form.form-split .form-side-card input:not([type="checkbox"]):not([type="radio"]),
  .shell-redesign form.form-split .form-side-card select{
    background:var(--surface-alt);border:1px solid var(--grid);
    border-radius:9px;color:var(--ink);padding:8px 11px;
    font-size:14px;width:100%;box-sizing:border-box;
  }
  .shell-redesign form.form-split .form-side-card textarea{
    background:var(--surface-alt);border:1px solid var(--grid);
    border-radius:9px;color:var(--ink);padding:8px 11px;
    font-size:14px;width:100%;box-sizing:border-box;
    min-height:100px;resize:vertical;
  }
  .shell-redesign form.form-split .form-side-card input:focus,
  .shell-redesign form.form-split .form-side-card select:focus,
  .shell-redesign form.form-split .form-side-card textarea:focus{
    outline:none;border-color:var(--accent);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);
  }
  /* form-side-group-label "FORMATO": mesma tipografia dos outros labels */
  .shell-redesign form.form-split .form-side-group-label{
    font-size:12.5px;font-weight:400;color:var(--muted);
    text-transform:none;letter-spacing:0;padding:0 0 2px;
  }
  /* Segmented pill: não esticar a coluna inteira */
  .shell-redesign form.form-split .fmt-seg{
    max-width:260px;
  }
  /* Na sede + Privado: label e toggle juntos (sem space-between no desktop) */
  .shell-redesign form.form-split .fmt-site-row{
    justify-content:flex-start;gap:14px;
  }
  /* field-notes no desktop: sem borda superior; resize restaurado (global regra tem resize:none) */
  .shell-redesign form.form-split .form-side-card .field-notes{
    border-top:none!important;padding:0!important;
  }
  .shell-redesign form.form-split .form-side-card .field-notes textarea{
    resize:vertical;
  }

  /* Seletor de seções: popup centrado ao invés de bottom sheet */
  .sec-overlay{
    background:rgba(0,0,0,.12)!important;
  }
  .sec-sheet{
    /* Anulamos o slide-from-bottom e usamos popup centrado */
    bottom:auto!important;
    left:50%!important;
    right:auto!important;
    top:50%!important;
    transform:translateX(-50%) translateY(calc(-50% - 10px)) scale(.95)!important;
    opacity:0!important;
    transition:transform .2s ease, opacity .16s ease!important;
    border-radius:16px!important;
    max-width:420px!important;
    width:calc(100% - 48px)!important;
    max-height:min(72vh, 560px)!important;
    box-shadow:0 16px 56px rgba(0,0,0,.2), 0 2px 8px rgba(0,0,0,.12)!important;
  }
  .sec-sheet.open{
    transform:translateX(-50%) translateY(-50%) scale(1)!important;
    opacity:1!important;
    pointer-events:all!important;
  }
  /* Alça de drag: desnecessária no desktop */
  .sec-sheet .sec-sh-handle{display:none!important;}
  /* Footer do popup: padding confortável sem tab bar */
  .sec-sh-footer{padding:12px 16px 16px!important;}

  /* ── Coluna esquerda (form-main): campos full-width no desktop ──
     No mobile @media(max-width:767px) os labels viram flex-column e os inputs
     recebem width:100%. No desktop essas regras não se aplicam — precisamos repetir
     o essencial aqui. */

  /* ── Tipografia uniforme das duas colunas ──
     Labels: 12.5px muted  — igual nas duas colunas
     Tudo dentro de campos (inputs/selects/textarea): 14px var(--ink) — igual nas duas colunas
     Título não tem tamanho especial: mesmo 14px dos demais campos */

  /* Labels da coluna esquerda: mesma tipografia dos da coluna direita */
  .shell-redesign form.form-split .form-main > .field label{
    font-size:12.5px;color:var(--muted);
  }

  /* Título: label empilhado acima do input */
  .shell-redesign form.form-split .field-title label{
    display:flex;flex-direction:column;gap:3px;
  }
  .shell-redesign form.form-split .field-title input{
    width:100%!important;box-sizing:border-box!important;
    font-size:14px!important;color:var(--ink);
  }

  /* Categoria e demais campos form-main (filhos diretos): inputs/selects full-width + 14px.
     Usa > .field para não afetar os inputs de data/hora do form-datetime-group
     (que tem seu próprio layout e não é um .field direto do form-main). */
  .shell-redesign form.form-split .form-main > .field input:not([type="checkbox"]):not([type="radio"]),
  .shell-redesign form.form-split .form-main > .field select{
    width:100%;box-sizing:border-box;font-size:14px;color:var(--ink);
  }
}

/* =============================================================
   MÓDULO PRESENÇA — .att-*
   Redesenho v2.58+: abas Lançar / Jovens / Relatórios / Configurar
   Dois programas: Escoteiros (#1976d2) e Bandeirantes (#b03a7a)
   ============================================================= */

/* ── Variáveis do módulo ──────────────────────────────────────────── */
:root {
  --att-tab-h: 48px;
  --prog-e: #1976d2;
  --prog-e-dim: rgba(25, 118, 210, 0.15);
  --prog-b: #b03a7a;
  --prog-b-dim: rgba(176, 58, 122, 0.15);
  --warn: #e8a838;
  --warn-dim: color-mix(in srgb, #e8a838 15%, transparent);
}
@media (prefers-color-scheme: light) {
  body[data-theme='system'] {
    --prog-e-dim: rgba(25, 118, 210, 0.12);
    --prog-b-dim: rgba(176, 58, 122, 0.12);
  }
}
body[data-theme='light'] {
  --prog-e-dim: rgba(25, 118, 210, 0.12);
  --prog-b-dim: rgba(176, 58, 122, 0.12);
}

/* ── Shell ──────────────────────────────────────────────────────────── */
.att-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ── Tab bar — sticky logo abaixo da topbar do app ─────────────────── */
.att-tabbar {
  position: sticky;
  top: var(--topbar-h, 56px);
  z-index: 19;
  background: var(--panel);
  border-bottom: 1px solid var(--grid);
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 4px;
  height: var(--att-tab-h);
  flex-shrink: 0;
}
.att-tabbar::-webkit-scrollbar { display: none; }

.att-tab-btn {
  position: relative;
  padding: 0 14px;
  height: var(--att-tab-h);
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .15s;
}
.att-tab-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  opacity: 0;
  transition: opacity .15s;
}
.att-tab-btn.active { color: var(--accent); font-weight: 600; }
.att-tab-btn.active::after { opacity: 1; }
.att-tab-btn:hover:not(.active) { color: var(--ink); }

/* Tab panels — flex column para poderem preencher a altura */
.att-tab-panel { display: none; flex-direction: column; flex: 1; min-height: 0; }
.att-tab-panel.active { display: flex; }

/* Badge numérico na aba Jovens */
.att-tab-badge {
  display: none;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.att-tab-badge.on { display: inline-block; background: #e53935; color: #fff; }

/* ── Helpers de cor por programa ────────────────────────────────────── */
.att-prog-color-e { color: var(--prog-e); }
.att-prog-color-b { color: var(--prog-b); }
.att-prog-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  vertical-align: middle;
}
.att-prog-tag-e { background: var(--prog-e-dim); color: var(--prog-e); }
.att-prog-tag-b { background: var(--prog-b-dim); color: var(--prog-b); }

/* ══════════════════════════════════════════════════════════════════════
   TAB: LANÇAR
   ══════════════════════════════════════════════════════════════════════ */

/* Layout: coluna no mobile, linha no desktop */
.att-launch-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Painel de controles — sticky logo abaixo da topbar+tabbar no mobile */
.att-launch-controls {
  padding: 12px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--grid);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: calc(var(--topbar-h, 56px) + var(--att-tab-h, 48px));
  z-index: 10;
  flex-shrink: 0;
}

/* Área dos chips — no mobile acompanha o scroll da página; no desktop tem scroll interno */
.att-ygrid-wrap {
  flex: 1;
  min-height: 0;
  padding: 14px 16px 120px;
  -webkit-overflow-scrolling: touch;
}
.att-ygrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

/* Botão salvar — fixo na base da tela no mobile, acima do tabbar do app (56px) */
.att-save-wrap {
  position: fixed;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  padding: 12px 16px 8px;
  background: linear-gradient(to top, var(--bg) 70%, transparent);
  z-index: 15;
  pointer-events: none;
}
.att-save-btn {
  width: 100%;
  padding: 13px 16px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  transition: opacity .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.att-save-btn:hover { opacity: .88; }
.att-save-badge {
  display: inline-block;
  background: rgba(255,255,255,.25);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 600;
}

/* ── Mobile: módulo Presença full-bleed com scroll interno ──────────── */
/* Abordagem: .att-wrap vira scroll container independente da página.
   Isso elimina o gap causado pelo sticky top:var(--topbar-h) do tabbar
   quando a página estava rolada antes de o módulo abrir — o tabbar
   agora é sticky a top:0 dentro do próprio contêiner, sem depender
   do scroll global. */
@media (max-width: 767px) {
  /* Remove padding/gap do .layout — módulo encosta diretamente na topbar */
  .shell-redesign .layout:has(.calendar .att-wrap) {
    padding: 0;
    gap: 0;
  }
  /* att-wrap: altura exata entre topbar e nav inferior; scroll interno */
  .att-wrap {
    height: calc(100dvh - var(--topbar-h, 56px) - 56px);
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--panel);
    /* Sem position/transform que quebraria os filhos position:fixed */
  }
  /* Tabbar: sticky no topo do scroll container (não da página) */
  .att-tabbar {
    top: 0;
  }
  /* Barra de ações da aba Jovens: sticky logo abaixo da tabbar */
  .att-youth-bar {
    position: sticky;
    top: var(--att-tab-h, 48px);
    z-index: 10;
    background: var(--panel);
  }
  /* Controles do Lançar e filtros do Relatórios: no mobile o scroll
     container (.att-wrap) é pequeno — sticky não é necessário e causa
     gap porque o top base (calc(--topbar-h + --att-tab-h) = 191px) fica
     acima da posição natural (48px), empurrando o elemento para baixo.
     Solução: cancelar o sticky nesses dois elementos no mobile. */
  .att-launch-controls,
  .att-rep-controls {
    position: relative;
    top: 0;
  }
  /* Painel ativo: não restringe a altura para que o att-wrap (scroll
     container externo) consiga rolar quando o conteúdo cresce. */
  .att-tab-panel {
    flex: none;
    min-height: unset;
  }
  /* Lista de jovens: cresce naturalmente — scroll interno seria um
     container aninhado invisível dentro do att-wrap já scrollável. */
  .att-youth-list-wrap {
    flex: none;
    overflow-y: visible;
  }
}

/* Desktop: sidebar + grid lado a lado */
@media (min-width: 768px) {
  .att-launch-body {
    flex-direction: row;
    align-items: stretch;
    min-height: calc(100dvh - var(--topbar-h, 56px) - var(--att-tab-h, 48px));
  }
  .att-launch-controls {
    width: 280px;
    flex-shrink: 0;
    height: calc(100dvh - var(--topbar-h, 56px) - var(--att-tab-h, 48px));
    overflow-y: auto;
    border-bottom: none;
    border-right: 1px solid var(--grid);
    padding: 18px 16px 16px;
    gap: 12px;
    position: sticky;
    top: calc(var(--topbar-h, 56px) + var(--att-tab-h, 48px));
  }
  .att-save-wrap {
    position: static;
    transform: none;
    max-width: none;
    padding: 0;
    background: none;
    margin-top: auto;
    pointer-events: auto;
  }
  .att-save-btn {
    box-shadow: none;
    padding: 12px;
    font-size: 14px;
  }
  .att-ygrid-wrap {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(100dvh - var(--topbar-h, 56px) - var(--att-tab-h, 48px));
  }
  .att-ygrid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }
  /* No sidebar (desktop), pills ficam em wrap vertical e sem truncamento */
  .att-sec-pills {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .att-sec-pill {
    max-width: 240px; /* sidebar é 280px; nomes longos são truncados só se necessário */
  }
}

/* Botões de programa — estilo idêntico ao view-pills do calendário */
.att-prog-row {
  display: flex;
  position: relative;           /* ancora o slider absoluto */
  background: var(--surface-alt);
  border: 1px solid var(--grid);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
/* Pill deslizante — fica atrás dos botões e anima entre os dois lados */
.att-prog-slider {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 8px) / 2); /* metade do espaço interno (- 2×padding - gap) */
  border-radius: 999px;
  background: var(--prog-e);
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  pointer-events: none;
  z-index: 0;
  transition: transform .24s cubic-bezier(.4,0,.2,1),
              background .24s ease;
}
.att-prog-slider.to-b {
  transform: translateX(calc(100% + 2px)); /* desliza para o segundo botão */
  background: var(--prog-b);
}
.att-prog-btn {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  position: relative; /* fica sobre o slider */
  z-index: 1;
  transition: color .15s;
}
.att-prog-btn:hover { color: var(--ink); }
/* Ativo: texto branco; o fundo já é o slider */
.att-prog-btn.active-e,
.att-prog-btn.active-b { background: transparent; color: #fff; }

/* Navegação de data */
.att-date-row {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--grid);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.att-date-nav {
  padding: 8px 12px;
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color .15s;
}
.att-date-nav:hover { color: var(--ink); }
.att-date-disp {
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  padding: 8px 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pills de seção — horizontal scroll no mobile, wrap no desktop (sidebar) */
.att-sec-pills {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.att-sec-pills::-webkit-scrollbar { display: none; }
.att-sec-pill {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--grid);
  background: var(--surface);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.att-sec-pill.active-e { background: var(--prog-e-dim); border-color: var(--prog-e); color: var(--prog-e); }
.att-sec-pill.active-b { background: var(--prog-b-dim); border-color: var(--prog-b); color: var(--prog-b); }

/* Barra de resumo */
.att-summary-row { display: flex; align-items: center; gap: 10px; }
.att-sum-count { font-size: 14px; min-width: 52px; }
.att-sum-bar-wrap {
  flex: 1;
  height: 5px;
  background: var(--grid);
  border-radius: 3px;
  overflow: hidden;
}
.att-sum-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width .3s;
}
.att-sum-pct { font-size: 13px; font-weight: 700; color: var(--muted); min-width: 36px; text-align: right; }

/* Ações em massa */
.att-bulk-row { display: flex; gap: 8px; flex-wrap: wrap; }
.att-bulk-btn {
  padding: 6px 12px;
  border: 1.5px solid var(--grid);
  border-radius: 6px;
  background: var(--surface);
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.att-bulk-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Chips de jovem */
.att-chip {
  border-radius: 12px;
  border: 1.5px solid var(--grid);
  background: var(--surface);
  padding: 14px 12px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 88px;
  user-select: none;
  transition: border-color .15s, background .15s;
}
.att-chip:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.att-chip.present-e { border-color: var(--prog-e); background: var(--prog-e-dim); }
.att-chip.present-b { border-color: var(--prog-b); background: var(--prog-b-dim); }

/* Círculo de check */
.att-ycheck {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--grid);
  background: var(--surface-alt);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: transparent;
  transition: background .15s, border-color .15s, color .15s;
  flex-shrink: 0;
}
.att-chip.present-e .att-ycheck { background: var(--prog-e); border-color: var(--prog-e); color: #fff; }
.att-chip.present-b .att-ycheck { background: var(--prog-b); border-color: var(--prog-b); color: #fff; }

/* Nome e nota do jovem no chip */
.att-yname { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.att-ynote { font-size: 11.5px; color: var(--muted); display: none; }
.att-chip.present-e .att-ynote { display: block; color: var(--prog-e); }
.att-chip.present-b .att-ynote { display: block; color: var(--prog-b); }

/* Estado vazio */
.att-empty { padding: 40px 16px; text-align: center; color: var(--muted); }
.att-empty-note { font-size: 13px; color: var(--muted); margin: 0; }

/* ══════════════════════════════════════════════════════════════════════
   TAB: JOVENS
   ══════════════════════════════════════════════════════════════════════ */
.att-youth-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 0;
  flex-shrink: 0;
}
.att-add-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.att-add-input {
  flex: 1;
  min-width: 140px;
  padding: 8px 10px;
  border: 1.5px solid var(--grid);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
}
.att-add-bday { flex: 0 0 auto; min-width: 0; width: 92px; }
.att-add-select {
  padding: 8px 10px;
  border: 1.5px solid var(--grid);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
}
.att-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.att-add-btn .icon { width: 13px; height: 13px; }

/* Filtro de programa */
.att-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--grid);
}
.att-filter-seg { display: flex; border: 1.5px solid var(--grid); border-radius: 8px; overflow: hidden; }
.att-filter-btn {
  padding: 6px 14px;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.att-filter-btn + .att-filter-btn { border-left: 1px solid var(--grid); }
.att-filter-btn.on-all { background: var(--accent); color: #fff; }
.att-filter-btn.on-e   { background: var(--prog-e);  color: #fff; }
.att-filter-btn.on-b   { background: var(--prog-b);  color: #fff; }

/* Alerta de transições — âmbar (usa --warn) */
.att-trans-wrap { padding: 0 16px; flex-shrink: 0; }
.att-trans-alert {
  border-radius: 12px;
  border: 1.5px solid var(--warn);
  background: var(--warn-dim);
  overflow: hidden;
  margin-top: 14px;
}
.att-trans-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
}
.att-trans-title { font-size: 13px; font-weight: 700; color: var(--warn); flex: 1; }
.att-trans-count { font-size: 11px; font-weight: 700; background: var(--warn); color: #fff; border-radius: 10px; padding: 1px 7px; }
.att-trans-chev { width: 16px; height: 16px; color: var(--muted); transition: transform .2s; }
.att-trans-list { padding: 0 14px 10px; }
.att-trans-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--grid);
}
.att-trans-row:last-child { border-bottom: none; }
.att-trans-info { flex: 1; min-width: 0; }
.att-trans-name { font-size: 13px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.att-trans-path { font-size: 12px; color: var(--muted); margin-top: 2px; }
.att-trans-from { font-weight: 600; color: var(--ink); }
.att-trans-to   { font-weight: 700; color: var(--warn); }
.att-trans-age  { font-size: 12px; color: var(--muted); white-space: nowrap; }
.att-trans-btn {
  padding: 5px 12px;
  border-radius: 6px;
  border: 1.5px solid var(--warn);
  background: none;
  color: var(--warn);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.att-trans-btn:hover { background: var(--warn); color: #fff; }

/* Lista de jovens */
.att-youth-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px 40px;
  overflow-y: auto;
  flex: 1;
}
@media (min-width: 768px) {
  .att-youth-list-wrap { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
}
.att-youth-group { border: 1px solid var(--grid); border-radius: 10px; overflow: hidden; }
.att-youth-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 700;
  background: var(--surface);
  border-bottom: 1px solid var(--grid);
}
.att-group-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--grid);
  border-radius: 10px;
  padding: 1px 7px;
}
.att-youth-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--grid);
}
.att-youth-row:last-child { border-bottom: none; }
.att-youth-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  color: #fff;
}
.att-prog-av-e { background: var(--prog-e); }
.att-prog-av-b { background: var(--prog-b); }
.att-youth-rinfo { flex: 1; min-width: 0; }
.att-youth-rname { font-size: 13px; font-weight: 600; color: var(--ink); }
.att-youth-rmeta { font-size: 12px; color: var(--muted); margin-top: 1px; }
.att-over-age {
  font-size: 10px;
  font-weight: 700;
  color: var(--warn);
  background: var(--warn-dim);
  border-radius: 4px;
  padding: 1px 5px;
  vertical-align: middle;
  margin-left: 4px;
}
.att-ypill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--grid);
  color: var(--muted);
  white-space: nowrap;
}
.att-ypill.on { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.att-row-act {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.att-row-act:hover { background: var(--surface-alt); color: var(--ink); }
.att-row-act .icon { width: 16px; height: 16px; }

/* ══════════════════════════════════════════════════════════════════════
   TAB: RELATÓRIOS
   ══════════════════════════════════════════════════════════════════════ */
.att-rep-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--grid);
  background: var(--panel);
  position: sticky;
  top: calc(var(--topbar-h, 56px) + var(--att-tab-h, 48px));
  z-index: 10;
  flex-shrink: 0;
}
/* Mobile: cancela o sticky acima — dentro do scroll container (.att-wrap)
   o top:191px empurraria o elemento para baixo com gap. */
@media (max-width: 767px) {
  .att-rep-controls {
    position: relative;
    top: 0;
  }
}
.att-date-input {
  padding: 7px 10px;
  border: 1.5px solid var(--grid);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
}
.att-exp-group { display: flex; gap: 6px; margin-left: auto; }
.att-exp-btn {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--grid);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.att-exp-btn:hover { border-color: var(--accent); color: var(--accent); }
.att-exp-pdf { border-color: #e53935; color: #e53935; }
.att-exp-pdf:hover { background: #e53935; color: #fff; border-color: #e53935; }

.att-rep-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 14px 16px 40px;
  overflow-y: auto;
  flex: 1;
}
@media (min-width: 768px) {
  .att-rep-body { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
}
.att-rep-sec { display: flex; flex-direction: column; gap: 8px; }
.att-rep-sec-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.att-rep-table-wrap { overflow-x: auto; }
.att-rep-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.att-rep-table th {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 2px solid var(--grid);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  white-space: nowrap;
}
.att-rep-table td { padding: 8px 10px; border-bottom: 1px solid var(--grid); }
.att-rep-table tr:last-child td { border-bottom: none; }

.att-rate-cell { display: flex; align-items: center; gap: 6px; }
.att-rate-mini {
  width: 50px;
  height: 5px;
  background: var(--grid);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.att-rate-fill { height: 100%; border-radius: 3px; transition: width .3s; }
.att-rate-fill.rh { background: #43a047; }
.att-rate-fill.rm { background: var(--warn); }
.att-rate-fill.rl { background: #e53935; }
.att-rate-txt { font-size: 12px; font-weight: 700; }
.att-rate-txt.rh { color: #43a047; }
.att-rate-txt.rm { color: var(--warn); }
.att-rate-txt.rl { color: #e53935; }

/* ══════════════════════════════════════════════════════════════════════
   TAB: CONFIGURAR (admin)
   ══════════════════════════════════════════════════════════════════════ */
.att-config-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}
@media (min-width: 768px) {
  .att-config-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .att-config-full { grid-column: 1 / -1; }
}

.att-config-sec {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--grid);
  border-radius: 12px;
  padding: 16px;
}
.att-config-sec-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin-bottom: 2px;
}
.att-config-sec-hint  { font-size: 12px; color: var(--muted); }

/* Diagrama de jornada */
.att-journey-wrap { display: flex; flex-direction: column; gap: 12px; }
.att-journey-track {
  display: flex;
  align-items: center;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.att-journey-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  min-width: 60px;
  flex-shrink: 0;
  padding-right: 8px;
}
.att-jnode { display: flex; align-items: center; flex-shrink: 0; }
.att-jbox {
  border-radius: 8px;
  padding: 7px 10px;
  border: 1.5px solid var(--grid);
  background: var(--surface);
  text-align: center;
  min-width: 70px;
}
.att-jbox.e { border-color: var(--prog-e); background: var(--prog-e-dim); }
.att-jbox.b { border-color: var(--prog-b); background: var(--prog-b-dim); }
.att-jbox.shared { border-color: var(--muted); background: var(--surface-alt); }
.att-jbox-name { font-size: 12px; font-weight: 700; color: var(--ink); }
.att-jbox-age  { font-size: 10px; color: var(--muted); margin-top: 2px; }
.att-jage-marker { font-size: 10px; color: var(--muted); padding: 0 3px; white-space: nowrap; }
.att-jarrow { display: flex; align-items: center; padding: 0 2px; flex-shrink: 0; }
.att-overlap-note { font-size: 11.5px; color: var(--muted); padding: 8px 0 2px; line-height: 1.5; }

/* Linhas de toggle de seção */
.att-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--grid);
}
.att-toggle-row:last-of-type { border-bottom: none; }
.att-toggle-label { flex: 1; font-size: 13px; color: var(--ink); }
/* Botões de reordenação ↑↓ das seções no Configurar */
.att-order-btns {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
}
.att-order-btn {
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 1px 5px;
  border-radius: 4px;
  transition: color .12s, background .12s;
}
.att-order-btn:hover:not(:disabled) { color: var(--ink); background: var(--surface-alt); }
.att-order-btn:disabled { opacity: 0.2; cursor: default; }
/* Cabeçalho de programa dentro da lista de seções do Configurar */
.att-config-prog-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 2px;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* Toggle pill — .att-pill-thumb é um elemento irmão (+ seletor CSS) */
.att-pill-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}
.att-pill-track {
  width: 44px;
  height: 26px;
  border-radius: 13px;
  background: var(--grid);
  cursor: pointer;
  transition: background .2s;
  display: block;
}
.att-pill-track.on { background: var(--accent); }
.att-pill-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.att-pill-track.on + .att-pill-thumb { transform: translateX(18px); }

/* Tabela de idades */
.att-age-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.att-age-tbl th {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 2px solid var(--grid);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
}
.att-age-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--grid); }
.att-prog-head { font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 8px 8px 4px; color: var(--muted); }
.att-prog-head-e { color: var(--prog-e); }
.att-prog-head-b { color: var(--prog-b); }
.att-age-in {
  width: 60px;
  padding: 5px 7px;
  border: 1.5px solid var(--grid);
  border-radius: 5px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
}

/* ── Print ───────────────────────────────────────────────────────────── */
@media print {
  .att-tabbar, .att-launch-controls, .att-rep-controls, .att-save-wrap,
  .att-youth-bar, .att-bulk-row, .att-add-form, .att-filter-row { display: none !important; }
  .att-tab-panel { display: block !important; page-break-inside: avoid; }
  .att-rep-body { display: block; }
  .att-rep-sec { margin-bottom: 24px; }
}


/* ── Locais de Atividade (v2.64) ──────────────────────────────────────── */

/* Tokens semânticos — color-mix sobre transparente (não poluem o :root global) */
.locais-topbar,.locais-tabbar,.locais-filtros,.locais-grid,.local-dashboard,
.local-config-wrap,.local-picker-overlay{
  --local-disp-bg:  color-mix(in srgb,var(--cat-nacional) 15%,transparent);
  --local-disp-fg:  var(--cat-nacional);
  --local-disp-brd: color-mix(in srgb,var(--cat-nacional) 30%,transparent);
  --local-no-bg:    color-mix(in srgb,#c62828 14%,transparent);
  --local-no-fg:    #c62828;
  --local-no-brd:   color-mix(in srgb,#c62828 28%,transparent);
  --local-warn-bg:  color-mix(in srgb,var(--cat-formacao) 15%,transparent);
  --local-warn-fg:  var(--cat-formacao);
  --local-warn-brd: color-mix(in srgb,var(--cat-formacao) 30%,transparent);
  --local-verif-bg: color-mix(in srgb,var(--accent) 16%,transparent);
  --local-verif-fg: var(--accent);
  --local-verif-brd:color-mix(in srgb,var(--accent) 32%,transparent);
}
body[data-theme='light'] .locais-topbar,body[data-theme='light'] .locais-tabbar,
body[data-theme='light'] .locais-filtros,body[data-theme='light'] .locais-grid,
body[data-theme='light'] .local-dashboard,body[data-theme='light'] .local-config-wrap,
body[data-theme='light'] .local-picker-overlay{
  --local-disp-bg:  color-mix(in srgb,var(--cat-nacional) 13%,transparent);
  --local-no-bg:    color-mix(in srgb,#c62828 11%,transparent);
  --local-warn-bg:  color-mix(in srgb,var(--cat-formacao) 13%,transparent);
  --local-verif-bg: color-mix(in srgb,var(--accent) 12%,transparent);
}

/* Topbar */
.locais-topbar{display:flex;align-items:center;gap:10px;background:var(--panel);border-bottom:1px solid var(--grid);padding:8px 12px;flex-wrap:wrap}
.locais-title{flex:1;min-width:140px;font-size:16px;font-weight:600;letter-spacing:.2px;color:var(--ink);margin:0}
.locais-topbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
/* Botão Voltar gerado pelo JS antes de renderDashboard / renderConfigSchema */
.local-back-btn{color:var(--accent);border-color:var(--accent)}
.local-back-btn:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
/* Chevron aponta para baixo por default — rotaciona para esquerda no botão Voltar */
.local-back-btn .icon{transform:rotate(-90deg)}

/* Tab bar — sub-navegação do módulo (Lista / Dashboard / Configurar) */
.locais-tabbar{display:flex;align-items:center;background:var(--panel);border-bottom:1px solid var(--grid);padding:0 10px;gap:2px;overflow-x:auto}
.locais-tabbar::-webkit-scrollbar{display:none}
.locais-tab{background:transparent;border:none;color:var(--muted);font:600 13px/1 inherit;padding:9px 12px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;display:flex;align-items:center;gap:6px;transition:color .12s,border-color .12s;white-space:nowrap;flex-shrink:0}
.locais-tab:hover{color:var(--ink)}
.locais-tab[aria-pressed=true]{color:var(--accent);border-bottom-color:var(--accent)}
.locais-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);font-size:10px;font-weight:700}

/* Filtros */
.locais-filtros{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--surface-alt);border-bottom:1px solid var(--grid);flex-wrap:wrap}
.locais-input{background:var(--surface-soft);color:var(--ink);border:1px solid var(--grid);border-radius:8px;padding:0 10px;font-size:13px;height:34px;outline:none;transition:border-color .15s;font-family:inherit}
.locais-input:focus{border-color:var(--accent)}
.locais-input::placeholder{color:var(--muted)}
.locais-search{flex:1;min-width:120px}
.locais-filt-sel{-webkit-appearance:none;appearance:none;background:var(--surface-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23aab3bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;padding:0 28px 0 10px;cursor:pointer;border:1px solid var(--grid);border-radius:8px;color:var(--ink);font-size:13px;height:34px;outline:none;transition:border-color .15s;font-family:inherit}
.locais-filt-sel:focus{border-color:var(--accent)}

/* Contador de resultados */
.locais-result-count{padding:6px 12px 0;font-size:12px;color:var(--muted)}
.locais-result-count strong{color:var(--ink);font-weight:600}

/* Grid de cards */
.locais-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;padding:14px}

/* Estados vazios — dois sabores distintos */
.local-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 24px;color:var(--muted)}
.local-empty--first .local-empty-icon{font-size:32px;margin-bottom:12px;opacity:.5}
.local-empty--first .local-empty-title{font-size:15px;font-weight:600;color:var(--ink);margin:0 0 6px}
.local-empty--first .local-empty-desc{font-size:13px;margin:0 0 20px}
.local-empty--filter{padding:32px 24px}
.local-empty--filter p{font-size:13px;margin:0 0 12px}
.local-loading{grid-column:1/-1;text-align:center;color:var(--muted);padding:48px 20px;font-style:italic}
.local-error{grid-column:1/-1;text-align:center;color:var(--local-no-fg,#c62828);padding:40px 20px}

/* Card */
.local-card{background:var(--panel);border:1px solid var(--grid);border-radius:10px;padding:14px;cursor:pointer;display:flex;flex-direction:column;gap:8px;transition:border-color .15s;min-width:0}
.local-card:hover{border-color:var(--accent)}
.local-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* top contém nome E meta em coluna — meta (pills) fica abaixo do nome */
.local-card-top{display:flex;flex-direction:column;gap:6px}
.local-card-nome{font-size:14px;font-weight:600;color:var(--ink);margin:0;line-height:1.35}
/* No JS: local-card-top contém nome + meta em coluna (meta não é irmã de top) */
.local-card-meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.local-card-endereco,.local-card-cap{margin:0;font-size:12px;color:var(--muted);line-height:1.4}

/* Pills — pattern color-mix (sem cores fixas hardcoded) */
.local-pill{display:inline-flex;align-items:center;border-radius:999px;font-size:11px;font-weight:500;padding:2px 8px;border:1px solid;white-space:nowrap;line-height:1.5}
.local-pill--tipo{background:var(--surface-alt);color:var(--muted);border-color:var(--grid)}
.local-pill--ok{background:var(--local-disp-bg);color:var(--local-disp-fg);border-color:var(--local-disp-brd)}
.local-pill--no{background:var(--local-no-bg);color:var(--local-no-fg);border-color:var(--local-no-brd)}
.local-pill--warn{background:var(--local-warn-bg);color:var(--local-warn-fg);border-color:var(--local-warn-brd)}
.local-pill--verified{background:var(--local-verif-bg);color:var(--local-verif-fg);border-color:var(--local-verif-brd)}
.local-pill--status{background:var(--surface-alt);color:var(--muted);border-color:var(--grid)}

/* Detalhe */
.local-detail{display:flex;flex-direction:column;gap:0;min-height:0;overflow-y:auto}
.local-detail-topbar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--grid);flex-wrap:wrap}
.local-detail-topbar-actions{display:flex;gap:6px;margin-left:auto}
.local-detail-hero{padding:16px;border-bottom:1px solid var(--grid)}
.local-detail-nome{font-size:20px;font-weight:700;margin:0 0 8px}
.local-detail-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.local-detail-endereco{font-size:13px;color:var(--muted)}
.local-map-wrap{padding:16px;border-bottom:1px solid var(--grid)}
.local-map-iframe{width:100%;height:200px;border:1px solid var(--grid);border-radius:10px;display:block}
.local-map-links{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.local-info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;padding:16px;border-bottom:1px solid var(--grid)}
.local-info-item{display:flex;flex-direction:column;gap:3px}
.local-info-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.local-info-value{font-size:13px;color:var(--ink)}
.local-emergencia-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.local-emergencia-item{font-size:13px}
.local-emergencia-tipo{font-weight:500}

/* Infra (leitura) */
.local-infra-section{padding:16px;border-bottom:1px solid var(--grid)}
.local-infra-section h3{font-size:14px;font-weight:600;margin:0 0 12px}
.local-infra-cat{margin-bottom:12px}
.local-infra-cat-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:4px}
.local-infra-boolean-row{display:flex;align-items:center;gap:6px;font-size:13px}
.local-infra-sub-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:4px}
.local-infra-sub-table th{text-align:left;padding:4px 6px;border-bottom:1px solid var(--grid);font-weight:600;color:var(--muted)}
.local-infra-sub-table td{padding:4px 6px;border-bottom:1px solid var(--grid)}
.local-infra-sub-table tr:last-child td{border-bottom:none}
.local-infra-chips{display:flex;gap:4px;flex-wrap:wrap}
.local-infra-chip{display:inline-flex;height:22px;padding:0 8px;border-radius:999px;background:var(--surface-soft);color:var(--ink);font-size:12px;align-items:center}
.local-infra-text{font-size:13px;color:var(--ink)}
.local-infra-nota{font-size:12px;color:var(--muted);margin-top:2px}

/* Observacoes */
.local-obs-section{padding:16px;border-bottom:1px solid var(--grid)}
.local-obs-section h3{font-size:14px;font-weight:600;margin:0 0 12px}
.local-obs-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.local-obs-item{background:var(--surface-soft);border-radius:8px;padding:10px 12px;position:relative}
.local-obs-meta{font-size:11px;color:var(--muted);margin-bottom:4px}
.local-obs-text{font-size:13px}
.local-obs-del{position:absolute;top:8px;right:8px;background:none;border:none;cursor:pointer;color:var(--muted);padding:2px;line-height:1}
.local-obs-del:hover{color:#c62828}
.local-obs-form{display:flex;flex-direction:column;gap:8px}
.local-obs-form textarea{width:100%;min-height:60px;border:1px solid var(--grid);border-radius:8px;padding:8px 10px;background:var(--surface);color:var(--ink);font-size:13px;resize:vertical;box-sizing:border-box}

/* Usos futuros */
.local-usos-section{padding:16px;border-bottom:1px solid var(--grid)}
.local-usos-section h3{font-size:14px;font-weight:600;margin:0 0 10px}
.local-usos-list{display:flex;flex-direction:column;gap:6px}
.local-uso-row{display:flex;gap:8px;align-items:center;font-size:13px}
.local-uso-data{color:var(--muted);min-width:90px}

/* Dashboard — borda única + divisores internos (padrão shell-redesign) */
.local-dashboard{padding:14px;display:flex;flex-direction:column;gap:20px}
.local-dashboard-title{font-size:16px;font-weight:700;color:var(--ink);margin:0 0 4px}
.local-dash-section{display:flex;flex-direction:column;gap:8px}
.local-dash-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0}
.local-dash-list{background:var(--panel);border:1px solid var(--grid);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.local-dash-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--grid);cursor:pointer;transition:background .12s}
.local-dash-item:last-child{border-bottom:none}
.local-dash-item:hover{background:var(--surface-alt)}
.local-dash-item--warn{border-left:3px solid var(--local-warn-fg,var(--cat-formacao));padding-left:11px}
.local-dash-item-nome{flex:1;font-size:13px;font-weight:500;color:var(--ink)}
.local-dash-item-dias{font-size:12px;color:var(--muted);white-space:nowrap}
.local-dash-since{font-size:11px;color:var(--muted);opacity:.75}
.local-dash-empty{text-align:center;color:var(--muted);font-size:13px;padding:22px;background:var(--panel);border:1px solid var(--grid);border-radius:12px}
/* dash items têm span sem classe — flex:1 aplicado ao primeiro filho */
.local-dash-item>span:first-child{flex:1;font-size:13px;font-weight:500;color:var(--ink)}

/* Config de schema */
.local-config-wrap{display:flex;flex-direction:column;gap:0;max-width:760px}
/* Cabeçalho visual (title + hint) */
.local-config-wrap>h2.local-config-title{font-size:17px;font-weight:700;color:var(--ink);margin:0;padding:14px 16px 0}
.local-config-wrap>p.local-config-hint{font-size:13px;color:var(--muted);margin:0;line-height:1.5;padding:4px 16px 14px;border-bottom:1px solid var(--grid)}
/* Lista de categorias */
.local-config-list{display:flex;flex-direction:column;gap:6px;padding:14px 16px}
.local-config-row{display:flex;align-items:center;gap:8px;background:var(--surface-alt);border:1px solid var(--grid);border-radius:10px;padding:8px 12px;transition:border-color .15s}
.local-config-row:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--grid))}
.local-config-handle{cursor:grab;color:var(--muted);font-size:16px;line-height:1;user-select:none;flex-shrink:0;opacity:.5}
.local-config-handle:hover{opacity:1}
.local-config-name{flex:1;font-size:13px;font-weight:500;color:var(--ink)}
.local-config-tipo{font-size:11px;color:var(--muted);font-family:monospace;background:var(--panel);border:1px solid var(--grid);border-radius:999px;padding:2px 8px;white-space:nowrap}
/* Botões de ordem (↑ ↓) e salvar/cancelar */
.local-config-ord-btn{display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--grid);border-radius:6px;color:var(--muted);width:28px;height:28px;padding:0;cursor:pointer;font-size:12px;line-height:1;transition:border-color .15s,color .15s;font-family:inherit;flex-shrink:0}
.local-config-ord-btn:hover{border-color:var(--accent);color:var(--accent)}
/* Remover */
.local-config-rem-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--muted);width:28px;height:28px;padding:0;border-radius:6px;cursor:pointer;line-height:1;transition:background .12s,color .12s;flex-shrink:0}
.local-config-rem-btn:hover{color:#c62828;background:color-mix(in srgb,#c62828 12%,transparent)}
/* Botão de editar categoria (ícone SVG) */
.local-config-edit-btn{display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--grid);border-radius:6px;color:var(--muted);width:28px;height:28px;padding:0;cursor:pointer;transition:border-color .15s,color .15s;flex-shrink:0}
.local-config-edit-btn:hover{border-color:var(--accent);color:var(--accent)}
/* Inputs inline de edição dentro de local-config-row */
.locais-input.local-config-edit-input{flex:1;height:28px;font-size:12px;padding:0 8px}
.locais-input.local-config-edit-tipo{height:28px;font-size:12px}
/* Seção "Adicionar categoria" */
.local-config-add{margin:0 16px 14px;background:var(--surface-alt);border:1px solid var(--grid);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:10px}
.local-config-add-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0}
/* add-grid tem 4 filhos no JS: nome, tipo, id, botão */
.local-config-add-grid{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:8px;align-items:end}
.local-config-save{align-self:flex-end;margin:0 16px 16px}

/* ---- Formulário de local (locais-form.js) ---- */
form.locais-form{display:flex;flex-direction:column;min-height:0}
.locais-form-header{padding:12px 16px;border-bottom:1px solid var(--grid);background:var(--panel);flex-shrink:0}
.locais-form-title{font-size:17px;font-weight:700;color:var(--ink);margin:0}
/* Grid de 2 colunas: dados básicos | contato/autorização */
.locais-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:1px solid var(--grid)}
.locais-form-col{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.locais-form-col+.locais-form-col{border-left:1px solid var(--grid)}
.locais-form-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:4px 0 -2px;padding-bottom:6px;border-bottom:1px solid var(--grid)}
/* Campo individual */
.locais-field{display:flex;flex-direction:column}
.locais-field-label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--muted)}
/* Inputs dentro do label herdam locais-input mas precisam de width:100% */
.locais-field-label .locais-input,.locais-field-label>input,.locais-field-label>select,.locais-field-label>textarea{width:100%;font-size:13px;color:var(--ink);font-weight:400}
.locais-textarea{min-height:58px;resize:vertical;padding:7px 10px;line-height:1.4;height:auto}
/* Linha lat/lng lado a lado */
.locais-lat-lng-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* Toggle customizado */
.locais-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.locais-toggle input[type=checkbox]{display:none}
.locais-toggle-track{display:flex;align-items:center;width:34px;height:18px;border-radius:999px;background:var(--grid);position:relative;transition:background .15s;flex-shrink:0}
.locais-toggle:has(input:checked) .locais-toggle-track{background:var(--accent)}
.locais-toggle-thumb{position:absolute;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.locais-toggle:has(input:checked) .locais-toggle-thumb{left:18px}

/* Contatos de emergência */
.locais-emergencia-list{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.locais-emergencia-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:6px;align-items:center}
.locais-emergencia-row .locais-input{height:30px;font-size:12px;padding:0 8px}

/* Seção de infraestrutura */
.locais-form-infra{padding:14px 16px;border-top:1px solid var(--grid)}
.locais-form-infra>.locais-form-section-title{font-size:13px;text-transform:none;letter-spacing:0;color:var(--ink);border:none;padding:0;margin:0 0 12px}
.locais-infra-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
/* se o número de cards for ímpar, o último ocupa linha inteira */
.infra-section:last-child:nth-child(odd){grid-column:1/-1;max-width:calc(50% - 5px)}
.infra-section{padding:12px;border:1px solid var(--grid);border-radius:10px;background:var(--surface-soft);display:flex;flex-direction:column;gap:8px}
.infra-boolean-row{display:flex;align-items:center;gap:8px}
.infra-boolean-label{flex:1;font-size:13px;font-weight:500;color:var(--ink)}
.infra-extra-fields{display:flex;flex-direction:column;gap:6px}
.infra-lista-header{display:flex;align-items:center;gap:8px}
.infra-lista-label{flex:1;font-size:13px;font-weight:500;color:var(--ink)}
.infra-lista-items{display:flex;flex-direction:column;gap:6px}
.infra-lista-row{display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap}
.infra-lista-row .locais-field{flex:1;min-width:80px}
.infra-section-title{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:4px}
.infra-multi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:5px}
.infra-multi-item{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer}
.infra-multi-item input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px;cursor:pointer;flex-shrink:0}
.infra-add-btn{align-self:flex-end;font-size:12px;padding:4px 8px}
.infra-remove-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border-radius:6px;flex-shrink:0;color:var(--muted)}
.infra-remove-btn:hover{color:#c62828;background:color-mix(in srgb,#c62828 12%,transparent);border-color:transparent}

/* Footer do form */
.locais-form-footer{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--grid);background:var(--panel);flex-shrink:0}

/* Picker de local no form de evento */
.local-banco-row{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}
.btn-banco-local{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border:1px solid var(--grid);border-radius:999px;background:var(--surface-soft);color:var(--ink);font-size:12px;cursor:pointer;white-space:nowrap;font-family:inherit;transition:border-color .15s}
.btn-banco-local:hover{border-color:var(--accent);color:var(--accent)}
.local-banco-nome{font-size:12px;color:var(--accent);font-weight:500}

/* Modal picker */
.local-picker-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1100;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}
.local-picker-modal{background:var(--panel);border:1px solid var(--grid);border-radius:14px;box-shadow:0 8px 40px rgba(0,0,0,.45);width:min(480px,92vw);max-height:72vh;display:flex;flex-direction:column;overflow:hidden}
.local-picker-header{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--grid);flex-shrink:0}
.local-picker-title{flex:1;font-size:15px;font-weight:600;color:var(--ink)}
.local-picker-close{display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--muted);font-size:20px;padding:3px 7px;border-radius:6px;cursor:pointer;line-height:1;transition:background .12s,color .12s}
.local-picker-close:hover{color:var(--ink);background:var(--surface-alt)}
/* picker: input com classe "locais-input local-picker-search" fica direto no modal (sem wrapper div) */
input.local-picker-search{display:block;margin:10px 14px;width:calc(100% - 28px)}
.local-picker-list{overflow-y:auto;flex:1;padding:6px;display:flex;flex-direction:column;gap:2px}
.local-picker-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:background .12s}
.local-picker-item:hover{background:var(--surface-alt)}
.local-picker-nome{flex:1;font-size:13px;font-weight:500;color:var(--ink)}
.local-picker-tipo{font-size:11px;color:var(--muted);flex-shrink:0}
.local-picker-empty{text-align:center;color:var(--muted);font-size:13px;padding:28px 16px}
.local-picker-footer{flex-shrink:0;padding:8px 10px;border-top:1px solid var(--grid)}
.local-picker-clear-btn{display:block;width:100%;padding:8px 10px;background:none;border:1px dashed var(--grid);border-radius:8px;color:var(--muted);font-size:12px;text-align:center;cursor:pointer;transition:border-color .15s,color .15s;font-family:inherit}
.local-picker-clear-btn:hover{border-color:var(--accent);color:var(--accent)}

/* Responsive */
@media(max-width:640px){
  .locais-grid{grid-template-columns:1fr;padding:10px}
  .locais-filtros{padding:7px 10px}
  .locais-tabbar{padding:0 8px}
  .local-info-grid{grid-template-columns:1fr}
  .locais-form-grid{grid-template-columns:1fr}
  .locais-form-col+.locais-form-col{border-left:none;border-top:1px solid var(--grid)}
  .locais-lat-lng-row{grid-template-columns:1fr}
  .locais-emergencia-row{grid-template-columns:1fr 1fr;row-gap:4px}
  .locais-emergencia-row .locais-input:nth-child(3){grid-column:1/-1}
  .locais-infra-grid{grid-template-columns:1fr}
  .local-config-add-grid{grid-template-columns:1fr}
}

/* ============================================================
   Módulo: Gestão de Materiais (v2.66+)
   ============================================================ */
.mat-page{padding:16px;max-width:900px;margin:0 auto}
.mat-page-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.mat-page-head h2{margin:0;flex:1;font-size:1.15rem;color:var(--ink)}
.mat-tabbar{display:flex;gap:0;border-bottom:2px solid var(--grid);margin-bottom:16px;overflow-x:auto;scrollbar-width:none}
.mat-tabbar::-webkit-scrollbar{display:none}
.mat-tab{background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;padding:10px 16px;font:600 13px/1 inherit;color:var(--muted);cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s;display:inline-flex;align-items:center;gap:6px}
.mat-tab:hover{color:var(--ink)}
.mat-tab[aria-pressed=true]{color:var(--accent);border-bottom-color:var(--accent)}
.mat-tab-badge{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);border-radius:999px;padding:0 6px;font-size:11px;min-width:18px;text-align:center}
.mat-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.mat-search{flex:1;min-width:160px}
.mat-cat-select{flex-shrink:0}
.mat-input{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--grid);border-radius:8px;font-size:.88rem;background:var(--surface-soft);color:var(--ink);font-family:inherit;transition:border-color .15s}
.mat-input:focus{outline:none;border-color:var(--accent)}
.mat-toolbar .mat-input{width:auto}
/* Cards de tipo */
.mat-card{border:1px solid var(--grid);border-radius:10px;margin-bottom:10px;overflow:hidden;background:var(--surface)}
.mat-card-head{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;transition:background .12s;user-select:none}
.mat-card-head:hover{background:var(--surface-alt)}
.mat-card-head.expanded{background:var(--surface-alt)}
.mat-chevron{flex-shrink:0;transition:transform .2s;color:var(--ink);width:18px;height:18px}
.mat-card-head.expanded .mat-chevron{transform:rotate(90deg)}
.mat-card-info{flex:1;min-width:0}
.mat-card-nome{font-weight:600;font-size:.93rem;color:var(--ink)}
.mat-card-meta{font-size:.78rem;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;margin-top:3px}
.mat-card-meta-ok{color:var(--accent)}
.mat-card-meta-no{color:#ef4444}
.mat-card-meta-warn{color:#f59e0b}
.mat-card-actions{display:flex;gap:4px;flex-shrink:0}
/* Unidades dentro de um card */
.mat-units-wrap{border-top:1px solid var(--grid)}
.mat-unit-row{display:flex;align-items:center;gap:10px;padding:9px 16px;border-top:1px solid var(--grid);flex-wrap:wrap}
.mat-unit-row:first-child{border-top:none}
.mat-unit-info{flex:1;min-width:120px;font-size:.85rem;color:var(--ink)}
.mat-unit-code{font-weight:600;font-family:monospace;font-size:.82rem}
.mat-unit-loc{color:var(--muted)}
.mat-unit-qty{color:var(--muted);font-size:.8rem}
.mat-unit-warn{font-size:.8rem;color:#f59e0b}
.mat-unit-actions{display:flex;gap:4px;flex-shrink:0}
/* Badges de estado */
.mat-estado{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;width:max-content;line-height:1.5}
.mat-estado-novo{background:#d8ebff;color:#0d3d8b;border:1px solid #bfdbfe}
.mat-estado-bom{background:#d4f0e0;color:#0e4d2a;border:1px solid #a7f3d0}
.mat-estado-regular{background:#fef0c4;color:#6b4000;border:1px solid #fde68a}
.mat-estado-ruim{background:#fde0de;color:#7d1c12;border:1px solid #fca5a5}
.mat-estado-baixado{background:#ebebeb;color:#3c3c3c;border:1px solid #dde1e9}
/* Empréstimos */
.mat-empr-row{border:1px solid var(--grid);border-radius:10px;padding:12px 16px;margin-bottom:10px;background:var(--surface)}
.mat-empr-row.atrasado{border-left:3px solid #ef4444}
.mat-empr-title{font-weight:600;font-size:.93rem;margin-bottom:4px;color:var(--ink);display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.mat-atrasado-tag{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;color:#ef4444;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.mat-empr-meta{font-size:.8rem;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.mat-empr-meta-late{color:#ef4444;font-weight:600}
/* Gestão */
.mat-gestao-section{margin-bottom:24px}
.mat-gestao-section h3{margin:0 0 10px;font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.mat-gestao-list{border:1px solid var(--grid);border-radius:8px;overflow:hidden;background:var(--surface)}
.mat-gestao-item{display:flex;align-items:center;padding:9px 14px;border-bottom:1px solid var(--grid);gap:10px}
.mat-gestao-item:last-of-type{border-bottom:none}
.mat-gestao-nome{flex:1;color:var(--ink);font-size:.9rem}
.mat-gestao-add{padding:8px 14px 10px}
/* Formulários */
.mat-form-field{margin-bottom:14px}
.mat-form-label{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:5px;letter-spacing:.03em}
.mat-form-info{font-size:.82rem;color:var(--muted);margin:0 0 12px}
.mat-form-highlight{font-weight:700;color:var(--ink)}
/* Botões pequenos */
.btn.sm{padding:5px 9px;font-size:.8rem}
.btn.icon-btn.sm{padding:4px;min-width:28px}
/* Modal overlay */
.mat-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(2px)}
.mat-modal-inner{background:var(--panel);border:1px solid var(--grid);border-radius:12px;max-width:480px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.mat-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--grid)}
.mat-modal-title{margin:0;font-size:.95rem;font-weight:700;color:var(--ink)}
.mat-modal-body{padding:18px}
/* Estado vazio */
.mat-empty{padding:32px 16px;text-align:center;color:var(--muted);font-size:.9rem}
.mat-empty .icon{width:32px;height:32px;opacity:.35;margin:0 auto 8px;display:block}
/* Responsive */
@media(max-width:640px){
  .mat-page{padding:10px}
  .mat-tab{padding:10px 12px;font-size:12px}
  .mat-card-head{padding:10px 12px}
  .mat-unit-row{padding:8px 12px}
  .mat-empr-row{padding:10px 12px}
}

/* === Onda 1 — Redesign Materiais === */

/* Touch target: expandir área tocável dos icon-btn para ≥44px sem mudar visual */
.btn.icon-btn{position:relative}
.btn.icon-btn::after{content:'';position:absolute;inset:-6px}

/* Badge de custódia (complementar ao badge de estado) */
.mat-cust{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;width:max-content;line-height:1.5}
.mat-cust-disponivel{background:#d4f0e0;color:#15643d;border:1px solid #a7f3d0}
.mat-cust-emprestado{background:#fef0c4;color:#8a5300;border:1px solid #fde68a}
.mat-cust-externo{background:#ede9fe;color:#5b21b6;border:1px solid #ddd6fe}
.mat-cust-atrasado{background:#fde0de;color:#a82018;border:1px solid #fca5a5}
.mat-cust-reservado{background:#d8ebff;color:#1547a0;border:1px solid #bfdbfe}

/* Pill row para seleção de estado no formulário de unidade */
.mat-estado-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.mat-estado-pill{
  border:2px solid var(--grid);border-radius:20px;padding:4px 12px;
  font-size:12px;font-weight:600;cursor:pointer;background:var(--surface);
  color:var(--muted);transition:all .12s;line-height:1.5;user-select:none;
}
.mat-estado-pill:hover{border-color:var(--muted);color:var(--ink)}
.mat-estado-pill.sel-novo{background:#d8ebff;color:#0d3d8b;border-color:#0d3d8b}
.mat-estado-pill.sel-bom{background:#d4f0e0;color:#0e4d2a;border-color:#0e4d2a}
.mat-estado-pill.sel-regular{background:#fef0c4;color:#6b4000;border-color:#6b4000}
.mat-estado-pill.sel-ruim{background:#fde0de;color:#7d1c12;border-color:#7d1c12}
.mat-estado-pill.sel-baixado{background:#ebebeb;color:#3c3c3c;border-color:#aaa}

/* Chips de filtro (Todos / Meus) na aba Empréstimos */
.mat-filter-chips{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.mat-filter-chip{
  padding:5px 14px;border-radius:20px;font-size:12px;font-weight:600;
  border:1.5px solid var(--grid);background:var(--surface);color:var(--muted);
  cursor:pointer;transition:all .12s;
}
.mat-filter-chip.active{
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border-color:var(--accent);color:var(--accent);
}

/* Dark mode: restaurar vibrância nos badges (contraste ok no fundo escuro) */
body[data-theme='dark'] .mat-estado-novo,
body[data-theme='dark'] .mat-cust-reservado{background:color-mix(in srgb,#3b82f6 22%,transparent);color:#93c5fd;border-color:color-mix(in srgb,#3b82f6 45%,transparent)}
body[data-theme='dark'] .mat-estado-bom,
body[data-theme='dark'] .mat-cust-disponivel{background:color-mix(in srgb,var(--accent) 22%,transparent);color:#5eead4;border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
body[data-theme='dark'] .mat-estado-regular,
body[data-theme='dark'] .mat-cust-emprestado{background:color-mix(in srgb,#f59e0b 22%,transparent);color:#fcd34d;border-color:color-mix(in srgb,#f59e0b 45%,transparent)}
body[data-theme='dark'] .mat-estado-ruim,
body[data-theme='dark'] .mat-cust-atrasado{background:color-mix(in srgb,#ef4444 22%,transparent);color:#f87171;border-color:color-mix(in srgb,#ef4444 45%,transparent)}
body[data-theme='dark'] .mat-estado-baixado{background:color-mix(in srgb,var(--muted) 22%,transparent);color:var(--muted);border-color:color-mix(in srgb,var(--muted) 45%,transparent)}
body[data-theme='dark'] .mat-cust-externo{background:color-mix(in srgb,#7c3aed 22%,transparent);color:#c4b5fd;border-color:color-mix(in srgb,#7c3aed 45%,transparent)}
@media(prefers-color-scheme:dark){
  body[data-theme='system'] .mat-estado-novo,
  body[data-theme='system'] .mat-cust-reservado{background:color-mix(in srgb,#3b82f6 22%,transparent);color:#93c5fd;border-color:color-mix(in srgb,#3b82f6 45%,transparent)}
  body[data-theme='system'] .mat-estado-bom,
  body[data-theme='system'] .mat-cust-disponivel{background:color-mix(in srgb,var(--accent) 22%,transparent);color:#5eead4;border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
  body[data-theme='system'] .mat-estado-regular,
  body[data-theme='system'] .mat-cust-emprestado{background:color-mix(in srgb,#f59e0b 22%,transparent);color:#fcd34d;border-color:color-mix(in srgb,#f59e0b 45%,transparent)}
  body[data-theme='system'] .mat-estado-ruim,
  body[data-theme='system'] .mat-cust-atrasado{background:color-mix(in srgb,#ef4444 22%,transparent);color:#f87171;border-color:color-mix(in srgb,#ef4444 45%,transparent)}
  body[data-theme='system'] .mat-estado-baixado{background:color-mix(in srgb,var(--muted) 22%,transparent);color:var(--muted);border-color:color-mix(in srgb,var(--muted) 45%,transparent)}
  body[data-theme='system'] .mat-cust-externo{background:color-mix(in srgb,#7c3aed 22%,transparent);color:#c4b5fd;border-color:color-mix(in srgb,#7c3aed 45%,transparent)}
}

/* Form groups colapsáveis (Onda 2) */
.mat-form-group{margin:0 0 14px;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.mat-form-group-title{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:7px 14px;background:var(--surface);border-bottom:1px solid var(--border)}
.mat-form-group .mat-form-field{margin-bottom:0;border-bottom:1px solid var(--border)}
.mat-form-group .mat-form-field:last-child{border-bottom:none}
details.mat-form-group>summary.mat-form-group-title{pointer-events:auto;cursor:pointer;user-select:none;list-style:none;display:flex;justify-content:space-between;align-items:center;border-bottom:none}
details.mat-form-group>summary.mat-form-group-title::after{content:'▾';font-size:13px;transition:transform .2s}
details.mat-form-group>summary.mat-form-group-title::-webkit-details-marker{display:none}
details.mat-form-group[open]>summary.mat-form-group-title{border-bottom:1px solid var(--border)}
details.mat-form-group[open]>summary.mat-form-group-title::after{transform:rotate(180deg)}
/* Chips de categoria — scroll horizontal em tela pequena */
.mat-cat-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mat-cat-chips::-webkit-scrollbar{display:none}
/* Modo carrinho — barra de seleção (Onda 3) */
.mat-cart-bar{margin-top:12px;padding:10px 14px;background:var(--surface);border:2px solid var(--accent);border-radius:8px;display:flex;align-items:center;gap:10px}
.mat-cart-bar-count{flex:1;font-size:.88rem;font-weight:600;color:var(--text)}
/* Botão de toggle de cart mode com estado ativo */
.btn.icon-btn.active{background:var(--accent);color:#fff}
/* Botão de carrinho — laranja para diferenciar do teal de criar evento */
.btn.btn-cart{color:#d97706!important;border-color:#d97706!important}
.btn.btn-cart.active{background:#d97706!important;color:#fff!important;border-color:#d97706!important}
@media(prefers-color-scheme:dark){.btn.btn-cart{color:#f59e0b!important;border-color:#f59e0b!important}.btn.btn-cart.active{background:#d97706!important;color:#fff!important}}
[data-theme="dark"] .btn.btn-cart{color:#f59e0b!important;border-color:#f59e0b!important}
[data-theme="dark"] .btn.btn-cart.active{background:#d97706!important;color:#fff!important}
/* Tabs de sub-modo do carrinho (Escanear QR / Manual) */
.mat-cart-subtabs{display:flex;gap:6px;padding:8px 0 4px}
.mat-cart-subtab{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;border:1.5px solid var(--border);background:transparent;color:var(--text);font-size:.85rem;cursor:pointer;transition:background .15s,color .15s}
.mat-cart-subtab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
/* Scanner de QR Code */
.mat-scan-wrap{display:flex;flex-direction:column;gap:10px}
.mat-scan-status{font-size:.85rem;color:var(--muted);padding:6px 0;min-height:1.4em}
.mat-scan-video-wrap{position:relative;width:100%;max-width:360px;aspect-ratio:1/1;background:#000;border-radius:10px;overflow:hidden}
.mat-scan-video{width:100%;height:100%;object-fit:cover;display:block}
.mat-scan-cart-list{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.mat-scan-empty{font-size:.85rem;color:var(--muted);margin:0;padding:4px 0}
.mat-scan-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--surface);border-radius:8px;border:1px solid var(--border)}
.mat-scan-item-label{flex:1;font-size:.88rem}
/* Dashboard de início */
.mat-dash{padding:12px 0 24px}
.mat-dash-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.mat-dash-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.mat-dash-card.ok{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.mat-dash-card.warn{border-color:#d97706;background:color-mix(in srgb,#d97706 8%,transparent)}
.mat-dash-value{font-size:1.7rem;font-weight:700;line-height:1}
.mat-dash-label{font-size:.7rem;color:var(--muted);text-align:center;line-height:1.3}
.mat-dash-section{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 8px;padding-top:4px}
.mat-dash-loans{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
.mat-dash-loan-row{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:.85rem}
.mat-dash-loan-nome{flex:1;font-weight:500}
.mat-dash-loan-qty{font-size:.8rem;color:var(--muted)}
.mat-dash-loan-date{font-size:.75rem;color:var(--muted)}
.mat-dash-empty{font-size:.85rem;color:var(--muted);margin:0 0 20px}
.mat-dash-shortcuts{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.mat-dash-shortcut{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 10px;cursor:pointer;transition:background .15s,border-color .15s;text-align:center}
.mat-dash-shortcut:hover{background:var(--surface-hover,var(--surface));border-color:var(--accent)}
.mat-dash-shortcut .icon{width:22px;height:22px;color:var(--accent)}
.mat-dash-shortcut-label{font-size:.85rem;font-weight:600}
.mat-dash-shortcut-desc{font-size:.72rem;color:var(--muted)}
/* Botão "Novo tipo" na toolbar do inventário */
.mat-btn-novo{margin-left:auto}
/* Nome e código nas linhas de unidade */
.mat-unit-nome{font-weight:500;font-size:.88rem}
.mat-unit-code{font-size:.75rem;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-family:monospace;margin-left:4px}
/* Código read-only no formulário */
.mat-codigo-readonly{font-family:monospace;font-size:.85rem;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 12px;letter-spacing:.05em}
/* ============================================================
   Módulo: Membros (v2.84+)
   ============================================================ */
.mbr-page{padding:16px;max-width:820px;margin:0 auto}
/* Toolbar */
.mbr-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.mbr-tabs{display:flex;gap:0;border-bottom:2px solid var(--grid);flex:1;min-width:0}
.mbr-tab{background:none;border:none;border-bottom:2px solid transparent;padding:10px 16px;font-size:.88rem;cursor:pointer;color:var(--muted);font-family:inherit;transition:color .15s,border-color .15s;margin-bottom:-2px}
.mbr-tab--active{color:var(--accent);border-bottom-color:var(--accent)}
.mbr-tool-right{display:flex;gap:8px;align-items:center;margin-left:auto}
.mbr-search-wrap{display:flex;align-items:center}
.mbr-search{padding:7px 12px;border:1px solid var(--grid);border-radius:8px;font-size:.88rem;background:var(--surface-soft);color:var(--ink);font-family:inherit;min-width:160px;transition:border-color .15s}
.mbr-search:focus{outline:none;border-color:var(--accent)}
.mbr-btn-novo{display:flex;align-items:center;gap:5px;white-space:nowrap}
/* Lista */
.mbr-list{display:flex;flex-direction:column;gap:8px}
.mbr-empty{color:var(--muted);font-size:.88rem;padding:24px 0;text-align:center}
.mbr-card{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--surface);border:1px solid var(--grid);border-radius:10px;cursor:pointer;transition:background .12s;user-select:none}
.mbr-card:hover,.mbr-card:focus{background:var(--surface-alt);outline:none}
.mbr-card-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mbr-card-name{font-weight:500;font-size:.9rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbr-card-badges{display:flex;gap:5px;flex-wrap:wrap}
.mbr-card-secao{font-size:.78rem;color:var(--muted)}
.mbr-card-actions{color:var(--muted)}
.mbr-chevron{display:flex;align-items:center}
/* Badges */
.mbr-badge{font-size:.72rem;font-weight:600;padding:2px 7px;border-radius:99px;letter-spacing:.02em}
.mbr-badge--jovem{background:color-mix(in srgb,#0288d1 15%,transparent);color:#0277bd}
.mbr-badge--adulto{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
.mbr-badge--pre_cadastro{background:color-mix(in srgb,#f57c00 18%,transparent);color:#e65100}
.mbr-badge--ativo{background:color-mix(in srgb,#388e3c 18%,transparent);color:#2e7d32}
.mbr-badge--inativo{background:color-mix(in srgb,#757575 18%,transparent);color:#424242}
.mbr-badge--cancelado{background:color-mix(in srgb,#c62828 18%,transparent);color:#b71c1c}
.mbr-badge--arquivado{background:color-mix(in srgb,#757575 12%,transparent);color:#616161}
.mbr-badge--registro{background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--ink);font-family:monospace}
/* Detail */
.mbr-detail-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.mbr-back-btn{flex-shrink:0}
.mbr-detail-title{flex:1;margin:0;font-size:1.1rem;color:var(--ink)}
.mbr-btn-edit{flex-shrink:0}
.mbr-detail-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.mbr-detail-grid{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:.88rem;margin-bottom:20px}
.mbr-dt{color:var(--muted);font-weight:500;white-space:nowrap}
.mbr-dd{margin:0;color:var(--ink);word-break:break-word}
.mbr-status-actions{border-top:1px solid var(--grid);padding-top:14px}
.mbr-status-title{font-size:.8rem;color:var(--muted);margin:0 0 8px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.mbr-status-btns{display:flex;gap:8px;flex-wrap:wrap}
/* Form */
.mbr-form{display:flex;flex-direction:column;gap:14px}
.mbr-field{display:flex;flex-direction:column;gap:4px}
.mbr-label{font-size:.8rem;font-weight:600;color:var(--muted)}
.mbr-input{padding:8px 10px;border:1px solid var(--grid);border-radius:8px;font-size:.88rem;background:var(--surface-soft);color:var(--ink);font-family:inherit;transition:border-color .15s}
.mbr-input:focus{outline:none;border-color:var(--accent)}
.mbr-textarea{padding:8px 10px;border:1px solid var(--grid);border-radius:8px;font-size:.88rem;background:var(--surface-soft);color:var(--ink);font-family:inherit;resize:vertical;transition:border-color .15s}
.mbr-textarea:focus{outline:none;border-color:var(--accent)}
/* Modal */
.mbr-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;z-index:2000;padding:0 0 env(safe-area-inset-bottom,0)}
@media(min-width:600px){.mbr-modal-overlay{align-items:center}}
.mbr-modal-inner{background:var(--surface);border-radius:16px 16px 0 0;width:100%;max-width:520px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
@media(min-width:600px){.mbr-modal-inner{border-radius:16px}}
.mbr-modal-header{display:flex;align-items:center;gap:8px;padding:16px 20px 0;flex-shrink:0}
.mbr-modal-title{flex:1;margin:0;font-size:1rem;font-weight:600;color:var(--ink)}
.mbr-modal-body{padding:16px 20px;overflow-y:auto;flex:1}
.mbr-modal-footer{display:flex;gap:8px;justify-content:flex-end;padding:12px 20px 16px;border-top:1px solid var(--grid);flex-shrink:0}

/* Membros — dashboard (tab início) */
.mbr-dash{padding:20px 16px}
.mbr-dash-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px;margin-bottom:24px}
.mbr-dash-card{background:var(--surface-alt);border-radius:12px;padding:14px 10px;text-align:center;display:flex;flex-direction:column;gap:4px}
.mbr-dash-card.ok{background:color-mix(in srgb,#388e3c 18%,var(--surface-alt))}
.mbr-dash-card.warn{background:color-mix(in srgb,#f57c00 18%,var(--surface-alt))}
.mbr-dash-value{font-size:1.8rem;font-weight:700;line-height:1;color:var(--ink)}
.mbr-dash-label{font-size:.75rem;color:var(--muted)}
.mbr-dash-section{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:0 0 10px}
.mbr-dash-shortcuts{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.mbr-dash-shortcut{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 12px;background:var(--surface-alt);border:none;border-radius:12px;cursor:pointer;text-align:center;transition:background .12s}
.mbr-dash-shortcut:hover{background:var(--surface-strong)}
.mbr-dash-shortcut .icon{width:22px;height:22px;color:var(--accent)}
.mbr-dash-shortcut-label{font-size:.88rem;font-weight:600;color:var(--ink)}
.mbr-dash-shortcut-desc{font-size:.75rem;color:var(--muted)}

/* Membros — tabs da ficha individual (detalhe) */
.mbr-detail-tabs{display:flex;gap:4px;padding:0 0 14px;border-bottom:1px solid var(--grid);margin-bottom:18px;overflow-x:auto;scrollbar-width:none}
.mbr-detail-tabs::-webkit-scrollbar{display:none}
.mbr-detail-tab{flex:none;padding:6px 16px;border-radius:20px;border:1.5px solid var(--grid);background:transparent;color:var(--muted);font-size:.85rem;cursor:pointer;font-family:inherit;transition:all .14s;white-space:nowrap}
.mbr-detail-tab--active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
/* Membros — ficha médica (Fase 3) */
.mbr-ficha-edit-bar{display:flex;justify-content:flex-end;margin-bottom:14px}
.mbr-ficha-read{display:flex;flex-direction:column;gap:18px}
.mbr-ficha-group{display:flex;flex-direction:column;gap:8px}
.mbr-ficha-group-title{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:0}
.mbr-ficha-fields{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:.88rem}
.mbr-ficha-empty{color:var(--muted);font-size:.88rem;font-style:italic;padding:16px 0}
.mbr-ficha-config-bar{display:flex;gap:8px;margin-bottom:14px}
.mbr-campos-admin{display:flex;flex-direction:column;gap:10px}
.mbr-campos-admin-title{font-weight:600;font-size:.95rem;flex:1}
.mbr-campos-list{display:flex;flex-direction:column;gap:8px}
.mbr-campo-row{display:flex;align-items:center;gap:8px;background:var(--surface-alt);border-radius:8px;padding:10px 12px}
.mbr-campo-label{flex:1;font-size:.9rem;font-weight:500}
.mbr-campo-tipo-badge{font-size:.75rem;color:var(--muted);background:var(--surface-strong,rgba(128,128,128,.15));padding:2px 8px;border-radius:10px;white-space:nowrap}
.mbr-campo-order-btns{display:flex;flex-direction:column}
.mbr-campo-order-btn{padding:1px 5px;font-size:.7rem;line-height:1.4;border:none;background:transparent;color:var(--muted);cursor:pointer}
.mbr-campo-order-btn:hover{color:var(--accent)}
/* Membros — vínculos jovem/adulto (Fase 2) */
.mbr-vinculos-section{margin-bottom:14px}
.mbr-vinculos-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.mbr-vinculos-list{display:flex;flex-direction:column;gap:6px}
.mbr-vinculos-warn{color:var(--warn,#d97706)!important}
.mbr-vinculo-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--surface-alt);border-radius:8px;font-size:.88rem}
.mbr-vinculo-nome{flex:1;font-weight:500;color:var(--ink)}
.mbr-vinculo-tipo{font-size:.75rem;color:var(--muted);white-space:nowrap}
.mbr-vinculo-pick-list{margin-top:10px;max-height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.mbr-vinculo-pick-row{width:100%;text-align:left;padding:8px 12px;background:var(--surface-alt);border:1px solid var(--grid);border-radius:8px;cursor:pointer;font-size:.88rem;color:var(--ink);font-family:inherit}
.mbr-vinculo-pick-row:hover{background:var(--surface-strong)}
.mbr-vinculo-pick-row.selected{background:color-mix(in srgb,var(--accent) 15%,var(--surface-alt));border-color:var(--accent)}

/* Home view */
.home-view{padding:2.5rem 2rem;max-width:960px}

/* Saudação */
.home-greeting{margin-bottom:2.5rem}
.home-greeting-text{font-size:1.75rem;font-weight:700;color:var(--ink);margin:0 0 .375rem;line-height:1.2}
.home-greeting-sub{color:var(--muted);margin:0;font-size:1rem}

/* Títulos de seção */
.home-section-title{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 .875rem}

/* Grid de módulos */
.home-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:2.25rem}

/* Card horizontal: ícone à esquerda, texto à direita */
.home-card{
  display:flex;flex-direction:row;align-items:center;gap:14px;
  background:var(--panel);border:1px solid var(--grid);border-radius:14px;
  padding:1rem 1.25rem;text-decoration:none;color:inherit;
  transition:border-color .18s,box-shadow .18s,transform .18s
}
.home-card:hover{
  border-color:var(--accent);
  box-shadow:0 4px 20px rgba(0,0,0,.1);
  transform:translateY(-2px)
}

/* Bolha do ícone */
.home-card-icon-wrap{
  width:42px;height:42px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--accent) 13%,transparent)
}
.home-card-icon{width:21px;height:21px;color:var(--accent)}

/* Texto do card */
.home-card-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.home-card-name{font-size:.9375rem;font-weight:600;color:var(--ink);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-card-desc{font-size:.8rem;color:var(--muted);margin:0;line-height:1.4}

/* Seção admin */
.home-admin{border-top:1px solid var(--grid);padding-top:1.5rem}
.home-admin-chips{display:flex;flex-wrap:wrap;gap:8px}
.home-admin-chip{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.8125rem;font-weight:500;color:var(--muted);
  border:1px solid var(--grid);border-radius:8px;
  padding:6px 14px;background:var(--surface-alt);
  text-decoration:none;transition:color .15s,border-color .15s,background .15s
}
.home-admin-chip:hover{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface-alt))}
.home-admin-chip .icon{width:14px;height:14px;color:inherit}

/* Rota home: oculta rail lateral e legend, expande conteúdo */
.shell-redesign.route-home .app-rail{display:none!important}
.shell-redesign.route-home .layout{grid-template-columns:minmax(0,1fr)!important}
.shell-redesign.route-home #legend,.shell-redesign.route-home .legend{display:none!important}

/* ============================================================
   [22/09/2026 v2.91] Modulo de Secoes — composicao (src/ui/composicao.js)
   Reaproveita .mbr-modal-*, .mbr-input, .mbr-badge; aqui so o layout novo.
   ============================================================ */
.sec-page{padding:16px;max-width:1100px;margin:0 auto}
.sec-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.sec-title{margin:0;font-size:1.35rem;font-weight:700;color:var(--ink)}
.sec-subtitle{margin:4px 0 0;color:var(--muted);font-size:.88rem}
.sec-actions{display:flex;gap:8px;flex-wrap:wrap}
.sec-back{margin-bottom:12px}
.sec-back .icon{transform:rotate(90deg)}
.sec-group-title{margin:20px 0 10px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.sec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.sec-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:14px 16px;background:var(--surface);border:1px solid var(--grid);border-radius:12px;cursor:pointer;font-family:inherit;color:var(--ink);transition:border-color .15s,background .15s}
.sec-card:hover,.sec-card:focus-visible{border-color:var(--accent);background:var(--surface-alt);outline:none}
.sec-card-name{font-weight:600;font-size:.95rem}
.sec-card-ramo{font-size:.78rem;color:var(--accent);font-weight:600}
.sec-card-stats{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.8rem;color:var(--muted);margin-top:4px}
.sec-config{background:var(--surface);border:1px solid var(--grid);border-radius:12px;padding:12px 16px;margin-bottom:16px;display:flex;flex-direction:column;gap:8px}
.sec-config-hint{margin:0 0 4px;font-size:.84rem;color:var(--muted)}
.sec-config-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0;border-top:1px solid var(--grid)}
.sec-config-row:first-of-type{border-top:0}
.sec-config-name{flex:1;min-width:180px;font-size:.9rem;color:var(--ink)}
.sec-mini-select{padding:5px 8px;font-size:.82rem;max-width:180px}
.sec-sug-btn{font-size:.78rem;padding:4px 10px}
.sec-block{margin:18px 0}
.sec-block-title{margin:0 0 8px;font-size:.95rem;font-weight:700;color:var(--ink)}
.sec-empty-inline{margin:4px 0;color:var(--muted);font-size:.85rem}
.sec-equipes{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;margin-top:8px}
.sec-equipe{background:var(--surface);border:1px solid var(--grid);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.sec-equipe--none{border-style:dashed;background:transparent}
.sec-equipe-head{display:flex;align-items:center;gap:8px}
.sec-equipe-name{margin:0;flex:1;font-size:.95rem;font-weight:700;color:var(--ink)}
.sec-equipe-count{font-size:.75rem;font-weight:700;color:var(--muted);background:var(--surface-alt);border-radius:99px;padding:2px 8px}
.sec-add-inline{align-self:flex-start;font-size:.8rem;padding:4px 10px}
.sec-member-list{display:flex;flex-direction:column;gap:6px}
.sec-member{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 10px;background:var(--surface-alt);border:1px solid var(--grid);border-radius:10px}
.sec-member--past{opacity:.8}
.sec-member-info{flex:1 1 170px;min-width:0;display:flex;flex-direction:column;gap:3px}
.sec-member-name{font-size:.88rem;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.sec-member-age{margin-left:6px;font-size:.75rem;color:var(--muted);font-weight:400}
.sec-member-since{font-size:.72rem;color:var(--muted);align-self:center}
.sec-member-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
.sec-badge--cargo{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.sec-pick-list{margin-top:10px;max-height:38vh;overflow:auto;display:flex;flex-direction:column;gap:6px}
.sec-pick-list .mbr-vinculo-pick-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sec-move-warn{margin:12px 0 0;padding:8px 10px;border-radius:8px;font-size:.82rem;background:color-mix(in srgb,#f57c00 14%,transparent);color:var(--ink)}
@media(max-width:600px){
  .sec-equipes{grid-template-columns:1fr}
  .sec-member{flex-wrap:wrap}
  .sec-member-actions{width:100%;justify-content:flex-start}
  .sec-mini-select{max-width:none;flex:1 1 90px;min-width:0}
}