/* SquadHub — Design System */
:root {
  --sq-primary:       #1e3a5f;
  --sq-primary-dark:  #16293f;
  --sq-primary-light: #dbe4ef;
  --sq-accent:        #b8860b;
  --sq-accent-dark:   #8a6508;
  --sq-accent-light:  #f7ecd3;
  --sq-success:       #16a34a;
  --sq-success-dark:  #15803d;
  --sq-success-light: #dcfce7;
  --sq-danger:        #dc2626;
  --sq-danger-light:  #fee2e2;
  --sq-warning:       #d97706;
  --sq-warning-light: #fef3c7;
  --sq-info:          #0284c7;
  --sq-info-light:    #e0f2fe;
  --sq-dark:          #111827;
  --sq-gray-900:      #1f2937;
  --sq-gray-800:      #374151;
  --sq-gray-700:      #4b5563;
  --sq-gray-600:      #6b7280;
  --sq-gray-400:      #9ca3af;
  --sq-gray-300:      #d1d5db;
  --sq-gray-200:      #e5e7eb;
  --sq-gray-100:      #f3f4f6;
  --sq-gray-50:       #f9fafb;
  --sq-white:         #ffffff;
  --sq-sidebar-w:     260px;
  --sq-topbar-h:      56px;
  --sq-radius:        8px;
  --sq-radius-sm:     4px;
  --sq-shadow:        0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --sq-shadow-md:     0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.06);
  --sq-shadow-lg:     0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.06);
  --font:             'Inter', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
  font-family: var(--font);
  background: var(--sq-gray-100);
  color: var(--sq-gray-900);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--sq-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* ── Layout ─────────────────────────────────────── */
.sq-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sq-sidebar-w);
  background: var(--sq-gray-900);
  display: flex; flex-direction: column;
  z-index: 200; overflow-y: auto; overflow-x: hidden;
  transition: transform .25s ease;
}
.sq-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.4); z-index: 199;
}
.sq-overlay.show { display: block; }

.sq-topbar {
  position: fixed; top: 0; left: var(--sq-sidebar-w); right: 0;
  height: var(--sq-topbar-h);
  background: var(--sq-white);
  border-bottom: 1px solid var(--sq-gray-200);
  display: flex; align-items: center; gap: .75rem;
  padding: 0 1.25rem; z-index: 100;
  box-shadow: var(--sq-shadow);
}
.sq-main {
  margin-left: var(--sq-sidebar-w);
  padding-top: var(--sq-topbar-h);
  min-height: 100vh;
}
.sq-page { padding: 1.5rem; }

/* ── Sidebar Header ─────────────────────────────── */
.sq-sidebar-header {
  padding: 1.25rem 1rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.sq-sidebar-logo {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1.1rem; font-weight: 800;
  color: var(--sq-white);
  letter-spacing: -.01em;
}
.sq-sidebar-logo i { color: var(--sq-primary); font-size: 1.25rem; }
.sq-sidebar-subtitle {
  font-size: .72rem; color: var(--sq-gray-400);
  margin-top: .15rem; margin-left: 1.85rem;
}

/* ── Sidebar User ───────────────────────────────── */
.sq-sidebar-user {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.sq-sidebar-user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--sq-primary); color: var(--sq-white);
  font-weight: 700; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sq-sidebar-user-name {
  font-size: .85rem; font-weight: 600; color: var(--sq-white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sq-sidebar-user-role {
  font-size: .72rem; color: var(--sq-gray-400); margin-top: .05rem;
}

/* ── Sidebar Nav ────────────────────────────────── */
.sq-sidebar-nav {
  list-style: none; padding: .5rem 0; flex: 1;
}
.sq-sidebar-nav .nav-section {
  font-size: .68rem; font-weight: 700; color: var(--sq-gray-600);
  text-transform: uppercase; letter-spacing: .07em;
  padding: .85rem 1rem .3rem;
}
/* Escolha de ícone Font Awesome (Lista Telefónica → Categorias) */
.sq-icon-picker { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.sq-icon-pick {
  width: 34px; height: 34px; border: 1px solid #e5e7eb; background: #fff; border-radius: 6px;
  cursor: pointer; color: var(--sq-gray-600); transition: background .12s, color .12s, border-color .12s;
}
.sq-icon-pick:hover, .sq-icon-pick.sel { background: var(--sq-primary-light); color: var(--sq-primary-dark); border-color: var(--sq-primary); }

/* Grupos do menu recolhíveis — o estado (recolhido/expandido) fica em cookie, ver script em Admin.Master */
.sq-sidebar-nav .nav-section.sq-collapsible {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none; transition: color .15s;
}
.sq-sidebar-nav .nav-section.sq-collapsible:hover { color: var(--sq-gray-400); }
.sq-sidebar-nav .nav-section.sq-collapsible:focus-visible { outline: 1px solid rgba(240,192,75,.6); outline-offset: -1px; }
.sq-sidebar-nav .nav-section .sq-nav-chevron { font-size: .6rem; transition: transform .15s; }
.sq-sidebar-nav .nav-section.sq-collapsed .sq-nav-chevron { transform: rotate(-90deg); }
.sq-sidebar-nav li.sq-nav-hidden { display: none; }
.sq-sidebar-nav a {
  display: flex; align-items: center; gap: .65rem;
  padding: .52rem 1rem; font-size: .85rem; font-weight: 500;
  color: var(--sq-gray-400); border-radius: 0;
  transition: background .15s, color .15s;
}
.sq-sidebar-nav a i { width: 18px; text-align: center; font-size: .9rem; }
.sq-sidebar-nav a:hover { background: rgba(255,255,255,.06); color: var(--sq-white); text-decoration: none; }
.sq-sidebar-nav a.active { background: rgba(184,134,11,.22); color: #f0c04b; }
.sq-sidebar-footer {
  padding: .75rem 1rem;
  border-top: 1px solid rgba(255,255,255,.07);
}
.sq-sidebar-footer a {
  display: flex; align-items: center; gap: .6rem;
  font-size: .82rem; color: var(--sq-gray-400);
  padding: .4rem .5rem; border-radius: var(--sq-radius-sm);
}
.sq-sidebar-footer a:hover { color: var(--sq-white); text-decoration: none; }

/* ── Topbar ─────────────────────────────────────── */
.sq-topbar-title {
  font-size: .95rem; font-weight: 600; color: var(--sq-gray-800);
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sq-topbar-actions { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.sq-ctx-selector { display: flex; align-items: center; gap: .35rem; margin-left: .75rem; }
.sq-ctx-select {
  height: 32px; padding: 0 .45rem; border: 1px solid #e5e7eb; border-radius: 6px;
  font-size: .78rem; font-weight: 500; background: #f9fafb; color: #374151;
  cursor: pointer; max-width: 140px; line-height: 1; font-family: inherit;
}
.sq-ctx-select:focus { outline: none; border-color: var(--sq-primary); background: #fff; }
.sq-ctx-sep { color: #d1d5db; font-size: .6rem; }
@media (max-width: 900px) { .sq-ctx-selector { display: none; } }
.sq-icon-btn {
  width: 36px; height: 36px; border-radius: var(--sq-radius-sm);
  background: none; border: none; cursor: pointer;
  color: var(--sq-gray-600); font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.sq-icon-btn:hover { background: var(--sq-gray-100); color: var(--sq-gray-900); }
.sq-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--sq-primary); color: var(--sq-white);
  font-weight: 700; font-size: .82rem;
  display: flex; align-items: center; justify-content: center;
}

/* ── Notificações (topbar) ──────────────────────── */
.sq-notif-wrap { position: relative; }
.sq-notif-badge {
  position: absolute; top: 3px; right: 3px; min-width: 15px; height: 15px; padding: 0 3px;
  background: #dc2626; color: #fff; border-radius: 10px; font-size: .62rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.sq-notif-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-width: 90vw;
  background: var(--sq-white); border-radius: var(--sq-radius); box-shadow: var(--sq-shadow-lg, var(--sq-shadow));
  border: 1px solid var(--sq-gray-100); z-index: 200; overflow: hidden;
}
.sq-notif-dropdown.open { display: block; }
.sq-notif-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .65rem .9rem; border-bottom: 1px solid var(--sq-gray-100); font-weight: 700; font-size: .85rem;
}
.sq-notif-header a { font-weight: 500; font-size: .75rem; color: var(--sq-primary); text-decoration: none; }
.sq-notif-header a:hover { text-decoration: underline; }
.sq-notif-lista { max-height: 380px; overflow-y: auto; }
.sq-notif-item {
  display: flex; align-items: stretch; border-bottom: 1px solid var(--sq-gray-100); position: relative;
}
.sq-notif-item:last-child { border-bottom: none; }
.sq-notif-item:hover { background: var(--sq-gray-50, #f9fafb); }
.sq-notif-item.unread { background: #eff6ff; }
.sq-notif-item.unread::before {
  content: ''; position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: #2563eb; z-index: 1;
}
.sq-notif-link {
  flex: 1; min-width: 0; display: block; padding: .6rem .9rem;
  font-size: .8rem; color: var(--sq-gray-800); text-decoration: none;
}
.sq-notif-item.unread .sq-notif-link { padding-left: 1.15rem; }
.sq-notif-del {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 32px; color: var(--sq-gray-300); text-decoration: none; font-size: .75rem;
  transition: color .15s, background .15s;
}
.sq-notif-del:hover { color: #dc2626; background: #fee2e2; }
.sq-notif-msg { display: block; margin-bottom: .15rem; }
.sq-notif-hora { font-size: .7rem; color: var(--sq-gray-400); }
.sq-notif-vazio { padding: 2rem 1rem; text-align: center; color: var(--sq-gray-400); font-size: .82rem; }

/* ── Cards ──────────────────────────────────────── */
.sq-card {
  background: var(--sq-white); border-radius: var(--sq-radius);
  box-shadow: var(--sq-shadow); overflow: hidden;
}
.sq-card-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; row-gap: .5rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--sq-gray-200);
}
.sq-card-title { font-size: .95rem; font-weight: 700; color: var(--sq-gray-900); }
.sq-card-body { padding: 1.25rem; }
.sq-card-footer {
  padding: .75rem 1.25rem; background: var(--sq-gray-50);
  border-top: 1px solid var(--sq-gray-200);
}

/* ── Stat Cards (dashboard) ─────────────────────── */
.sq-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.sq-stat-card {
  background: var(--sq-white); border-radius: var(--sq-radius);
  padding: 1.25rem; box-shadow: var(--sq-shadow);
  display: flex; align-items: flex-start; gap: 1rem;
}
.sq-stat-card > div:last-child { flex: 1; min-width: 0; }
.sq-stat-icon {
  width: 44px; height: 44px; border-radius: var(--sq-radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; flex-shrink: 0;
}
.sq-stat-icon.green { background: var(--sq-success-light); color: var(--sq-success-dark); }
.sq-stat-icon.amber { background: var(--sq-warning-light); color: var(--sq-warning); }
.sq-stat-icon.red   { background: var(--sq-danger-light);  color: var(--sq-danger); }
.sq-stat-icon.blue  { background: var(--sq-info-light);    color: var(--sq-info); }
.sq-stat-value { font-size: 1.6rem; font-weight: 800; color: var(--sq-gray-900); line-height: 1.15; overflow-wrap: break-word; }
.sq-stat-label { font-size: .78rem; color: var(--sq-gray-600); margin-top: .2rem; }

/* ── Buttons ────────────────────────────────────── */
.sq-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem; border-radius: var(--sq-radius-sm);
  font-size: .85rem; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; transition: all .15s;
  text-decoration: none; line-height: 1.4;
}
.sq-btn:hover { text-decoration: none; }
.sq-btn-primary   { background: var(--sq-primary);   color: #fff; border-color: var(--sq-primary); }
.sq-btn-primary:hover   { background: var(--sq-primary-dark); border-color: var(--sq-primary-dark); }
.sq-btn-secondary { background: var(--sq-white);  color: var(--sq-gray-800); border-color: var(--sq-gray-300); }
.sq-btn-secondary:hover { background: var(--sq-gray-50); }
.sq-btn-danger    { background: var(--sq-danger);   color: #fff; border-color: var(--sq-danger); }
.sq-btn-danger:hover    { background: #b91c1c; border-color: #b91c1c; }
.sq-btn-warning   { background: var(--sq-accent);   color: #fff; border-color: var(--sq-accent); }
.sq-btn-warning:hover   { background: var(--sq-accent-dark); border-color: var(--sq-accent-dark); }
.sq-btn-sm { padding: .3rem .65rem; font-size: .78rem; }
.sq-btn-lg { padding: .65rem 1.25rem; font-size: .95rem; }

/* ── Forms ──────────────────────────────────────── */
.sq-form-group { margin-bottom: 1rem; }
.sq-form-group label { display: block; font-size: .82rem; font-weight: 600; color: var(--sq-gray-700); margin-bottom: .35rem; }
.sq-form-control {
  width: 100%; padding: .5rem .75rem;
  border: 1px solid var(--sq-gray-300); border-radius: var(--sq-radius-sm);
  font-size: .9rem; color: var(--sq-gray-900); background: var(--sq-white);
  transition: border-color .15s, box-shadow .15s;
}
.sq-form-control:focus {
  outline: none; border-color: var(--sq-primary);
  box-shadow: 0 0 0 3px rgba(30,58,95,.15);
}
.sq-form-control[disabled], .sq-form-control[readonly] { background: var(--sq-gray-50); color: var(--sq-gray-600); }
.sq-form-hint { font-size: .75rem; color: var(--sq-gray-500); margin-top: .25rem; }
select.sq-form-control { cursor: pointer; }
textarea.sq-form-control { min-height: 90px; resize: vertical; }
.sq-form-row { display: grid; gap: 1rem; }
.sq-form-row.cols-2 { grid-template-columns: 1fr 1fr; }
.sq-form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.sq-form-row.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

/* ── Assignee picker (pesquisar + chips) — ex: "Atribuído a" nas Tarefas do CRM, em vez de uma
   checklist longa com todas as pessoas visíveis de uma vez. ─────────────────────────────────── */
.sq-assignee-picker { position: relative; }
.sq-assignee-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .4rem; }
.sq-assignee-chips:empty { display: none; }
.sq-assignee-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--sq-primary-light); color: var(--sq-primary-dark);
  border-radius: 999px; padding: .25rem .5rem .25rem .7rem; font-size: .8rem; font-weight: 600;
}
.sq-assignee-chip-x {
  background: none; border: none; cursor: pointer; color: inherit; opacity: .6;
  font-size: 1rem; line-height: 1; padding: 0 .1rem; font-weight: 700;
}
.sq-assignee-chip-x:hover { opacity: 1; }
.sq-assignee-suggestions {
  /* position:fixed (não absolute) com left/top/width calculados em JS a partir do input — os .sq-card têm
     overflow:hidden (cantos arredondados) e cortavam esta lista quando ficava perto do fundo do cartão. */
  position: fixed; z-index: 1000;
  background: var(--sq-white); border: 1px solid var(--sq-gray-200); border-radius: var(--sq-radius-sm);
  box-shadow: 0 4px 12px rgba(0,0,0,.1); max-height: 220px; overflow-y: auto;
}
.sq-assignee-suggestion { padding: .5rem .75rem; font-size: .85rem; cursor: pointer; }
.sq-assignee-suggestion:hover { background: var(--sq-gray-50); }

/* ── Tables ─────────────────────────────────────── */
.sq-table-wrap { overflow-x: auto; }
.sq-table {
  width: 100%; border-collapse: collapse; font-size: .85rem;
}
.sq-table th {
  background: var(--sq-gray-50); padding: .65rem .9rem;
  text-align: left; font-size: .75rem; font-weight: 700;
  color: var(--sq-gray-600); text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 2px solid var(--sq-gray-200);
  white-space: nowrap;
}
.sq-table td {
  padding: .65rem .9rem; border-bottom: 1px solid var(--sq-gray-200);
  color: var(--sq-gray-800); vertical-align: middle;
}
.sq-table tbody tr:last-child td { border-bottom: none; }
.sq-table tbody tr:nth-child(even) td { background: var(--sq-gray-50); }
.sq-table tbody tr:hover td { background: var(--sq-gray-100); }

/* Cabeçalho de grupo dentro de um sq-table (ex: Tarefas do CRM agrupadas por estado) — sobrepõe-se ao
   zebra-striping/hover de cima por ter mais especificidade (.sq-tarefa-grupo-header é uma classe extra). */
.sq-table tbody tr.sq-tarefa-grupo-header td {
  background: var(--sq-gray-100); padding: .45rem .9rem;
  font-size: .74rem; font-weight: 700; color: var(--sq-gray-600);
  text-transform: uppercase; letter-spacing: .04em;
  border-top: 2px solid var(--sq-gray-200); border-bottom: 1px solid var(--sq-gray-200);
}
.sq-table tbody tr.sq-tarefa-grupo-header:first-child td { border-top: none; }
.sq-table tbody tr.sq-tarefa-grupo-header:hover td { background: var(--sq-gray-100); }
.sq-tarefa-grupo-count { color: var(--sq-gray-400); font-weight: 600; text-transform: none; letter-spacing: normal; }

/* ── Exercícios — cards de visualização (modo leitura) ─────────── */
.sq-ex-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 1.25rem; }
.sq-ex-card {
  background: var(--sq-white); border: 1px solid var(--sq-gray-200); border-radius: 10px;
  overflow: hidden; display: flex; flex-direction: column;
}
.sq-ex-card-head {
  display: flex; gap: .6rem; align-items: center; justify-content: space-between;
  padding: .75rem 1rem; background: var(--sq-gray-50); border-bottom: 1px solid var(--sq-gray-200);
}
.sq-ex-card-head-left { display: flex; gap: .6rem; align-items: center; min-width: 0 }
.sq-ex-card-num {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--sq-primary); color: var(--sq-primary); font-weight: 700; font-size: .78rem;
  display: flex; align-items: center; justify-content: center;
}
.sq-ex-card-titles { min-width: 0; }
.sq-ex-card-titles strong { display: block; font-size: .95rem; color: var(--sq-gray-900); }
.sq-ex-card-reorder { display: flex; flex-direction: column; gap: .1rem; flex: 0 0 auto; }
.sq-ex-card-reorder a { color: var(--sq-gray-400); font-size: .75rem; line-height: 1; padding: .15rem; }
.sq-ex-card-reorder a:hover { color: var(--sq-primary); }
.sq-ex-card-body { padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: 0; }
.sq-ex-card-pitch { position: relative; border-radius: 8px; overflow: hidden; background: #14532d; margin: 1rem 0 0; }
.sq-ex-pitch-svg { display: block; width: 100%; height: auto; }
.sq-ex-fullscreen-btn {
  position: absolute; right: .5rem; bottom: .5rem; z-index: 2;
  background: rgba(17,24,39,.72); color: #fff; border: none; border-radius: 6px;
  padding: .3rem .6rem; font-size: .7rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  cursor: pointer; display: flex; align-items: center; gap: .35rem;
}
.sq-ex-fullscreen-btn:hover { background: rgba(17,24,39,.9); }
.sq-ex-card-pitch.sq-fullscreen {
  position: fixed; inset: 0; z-index: 2000; margin: 0; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
}
.sq-ex-card-pitch.sq-fullscreen .sq-ex-pitch-svg { width: auto; height: 92vh; max-width: 96vw; }
.sq-ex-statband {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  background: var(--sq-gray-50); border-radius: 8px; margin-top: .75rem; overflow: hidden;
}
.sq-ex-stat { text-align: center; padding: .6rem .4rem; border-left: 1px solid var(--sq-gray-200); }
.sq-ex-stat:first-child { border-left: none; }
.sq-ex-stat i { color: var(--sq-gray-400); font-size: .85rem; }
.sq-ex-stat .val { display: block; font-weight: 700; color: var(--sq-gray-900); font-size: .95rem; margin: .15rem 0 0; }
.sq-ex-stat .lbl { display: block; font-size: .68rem; color: var(--sq-gray-500); text-transform: uppercase; letter-spacing: .03em; }
.sq-ex-section { margin-top: .85rem; }
.sq-ex-section h4 { font-size: .8rem; font-weight: 700; color: var(--sq-gray-900); margin: 0 0 .3rem; }
.sq-ex-card-desc { font-size: .83rem; color: var(--sq-gray-700); line-height: 1.45; white-space: pre-wrap; }
.sq-ex-card-pdf { margin-top: .85rem; }

/* ── Plano de Treino — ficha profissional (modo Visualizar) ─────── */
.sq-plano-meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.sq-plano-meta-item { padding: .75rem 1.1rem; border-top: 1px solid var(--sq-gray-200); border-left: 1px solid var(--sq-gray-200); }
.sq-plano-meta-item:nth-child(4n+1) { border-left: none; }
.sq-plano-meta-item:nth-child(-n+4) { border-top: none; }
.sq-plano-meta-item label { display: block; font-size: .7rem; font-weight: 700; color: var(--sq-gray-500); text-transform: uppercase; letter-spacing: .03em; margin-bottom: .2rem; }
.sq-plano-meta-item span { font-size: .9rem; color: var(--sq-gray-900); font-weight: 600; }
.sq-plano-obj-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.sq-plano-obj-col { padding: 1rem 1.25rem; border-left: 1px solid var(--sq-gray-200); }
.sq-plano-obj-col:first-child { border-left: none; }
.sq-plano-obj-col h4 { font-size: .9rem; font-weight: 700; color: var(--sq-gray-900); margin: 0 0 .6rem; }
.sq-plano-obj-col div { font-size: .85rem; color: var(--sq-gray-700); line-height: 1.5; white-space: pre-wrap; }
@media (max-width: 900px) {
  .sq-plano-meta-grid { grid-template-columns: repeat(2, 1fr); }
  .sq-plano-meta-item:nth-child(4n+1) { border-left: 1px solid var(--sq-gray-200); }
  .sq-plano-meta-item:nth-child(2n+1) { border-left: none; }
  .sq-plano-meta-item:nth-child(-n+4) { border-top: 1px solid var(--sq-gray-200); }
  .sq-plano-meta-item:nth-child(-n+2) { border-top: none; }
  .sq-plano-obj-grid { grid-template-columns: 1fr; }
  .sq-plano-obj-col { border-left: none; border-top: 1px solid var(--sq-gray-200); }
  .sq-plano-obj-col:first-child { border-top: none; }
}

/* ── Badges ─────────────────────────────────────── */
.sq-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .15rem .5rem; border-radius: 9999px;
  font-size: .72rem; font-weight: 700;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.sq-badge-green   { background: var(--sq-success-light); color: var(--sq-success-dark); }
.sq-badge-red     { background: var(--sq-danger-light);  color: var(--sq-danger); }
.sq-badge-amber   { background: var(--sq-warning-light); color: var(--sq-warning); }
.sq-badge-blue    { background: var(--sq-info-light);    color: var(--sq-info); }
.sq-badge-gray    { background: var(--sq-gray-200);      color: var(--sq-gray-700); }

/* ── Category tiles (Biblioteca de Exercícios) ─────── */
.sq-cat-tiles { display: flex; flex-wrap: wrap; gap: .6rem; }
.sq-cat-tile {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .85rem; border-radius: var(--sq-radius);
  background: var(--sq-white); border: 1px solid var(--sq-gray-200);
  box-shadow: var(--sq-shadow); cursor: pointer; user-select: none;
  transition: border-color .15s, background .15s;
}
.sq-cat-tile:hover { border-color: var(--sq-gray-300); background: var(--sq-gray-50); }
.sq-cat-tile.active { border-color: var(--sq-primary); background: var(--sq-primary-light); }
.sq-cat-tile .sq-cat-count { color: var(--sq-gray-500); font-size: .82rem; }
.sq-cat-tile .sq-cat-chevron { transition: transform .15s; color: var(--sq-gray-500); font-size: .75rem; }
.sq-cat-panel { margin-bottom: 1rem; }

/* ── Alerts ─────────────────────────────────────── */
.sq-alert {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .75rem 1rem; border-radius: var(--sq-radius-sm);
  font-size: .85rem; margin-bottom: 1rem; border: 1px solid transparent;
}
.sq-alert i { margin-top: .1rem; flex-shrink: 0; }
.sq-alert-success { background: var(--sq-success-light);  color: var(--sq-success-dark);  border-color: #bbf7d0; }
.sq-alert-danger  { background: var(--sq-danger-light);   color: #991b1b;                 border-color: #fecaca; }
.sq-alert-warning { background: var(--sq-warning-light);  color: #92400e;                 border-color: #fde68a; }
.sq-alert-info    { background: var(--sq-info-light);     color: #075985;                 border-color: #bae6fd; }

/* ── Login page ─────────────────────────────────── */
.sq-login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--sq-gray-900) 0%, var(--sq-primary-dark) 100%);
  padding: 1.5rem;
}
.sq-login-card {
  background: var(--sq-white); border-radius: var(--sq-radius);
  box-shadow: var(--sq-shadow-lg); padding: 2.5rem;
  width: 100%; max-width: 400px;
}
.sq-login-logo { text-align: center; margin-bottom: 2rem; }
.sq-login-logo h1 { font-size: 1.6rem; font-weight: 900; color: var(--sq-gray-900); letter-spacing: -.03em; }
.sq-login-logo p { font-size: .82rem; color: var(--sq-gray-600); margin-top: .25rem; }

/* ── Setup page ─────────────────────────────────── */
.sq-setup-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--sq-gray-100); padding: 1.5rem; }
.sq-setup-card { background: var(--sq-white); border-radius: var(--sq-radius); box-shadow: var(--sq-shadow-lg); padding: 2.5rem; width: 100%; max-width: 520px; }
.sq-setup-card h1 { font-size: 1.4rem; font-weight: 800; color: var(--sq-gray-900); margin-bottom: .35rem; }
.sq-setup-card .lead { color: var(--sq-gray-600); font-size: .88rem; margin-bottom: 1.75rem; }

/* ── Section titles ─────────────────────────────── */
.sq-section-title {
  font-size: 1rem; font-weight: 700; color: var(--sq-gray-900);
  margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem;
}
.sq-section-title i { color: var(--sq-primary); }
.sq-page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem; flex-wrap: wrap; gap: .75rem;
}
.sq-page-header h2 { font-size: 1.2rem; font-weight: 800; color: var(--sq-gray-900); }
.sq-page-header p  { font-size: .82rem; color: var(--sq-gray-600); margin-top: .15rem; }

/* ── Tabs ───────────────────────────────────────── */
.sq-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--sq-gray-200); margin-bottom: 1.25rem; overflow-x: auto; }
.sq-tab {
  padding: .6rem 1rem; font-size: .85rem; font-weight: 600;
  color: var(--sq-gray-600); border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap; margin-bottom: -2px;
  transition: color .15s, border-color .15s; background: none; border-top: none; border-left: none; border-right: none;
}
.sq-tab:hover { color: var(--sq-gray-900); }
.sq-tab.active { color: var(--sq-primary); border-bottom-color: var(--sq-primary); }
.sq-tab-panel { display: none; }
.sq-tab-panel.active { display: block; }

/* ── Player avatar ──────────────────────────────── */
.sq-player-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--sq-gray-200); object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem; color: var(--sq-gray-600); flex-shrink: 0;
}
.sq-player-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Selo do exame médico sobreposto no canto da foto (grid de Jogadores) — verde=válido, âmbar=expirado, cinza=nunca registado. */
.sq-avatar-wrap { position: relative; display: inline-flex; width: 36px; height: 36px; }
.sq-exame-selo {
  position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: .55rem; color: var(--sq-white);
  border: 2px solid var(--sq-white);
}
.sq-exame-selo.green { background: var(--sq-success, #16a34a); }
.sq-exame-selo.amber { background: #d97706; }
.sq-exame-selo.gray  { background: var(--sq-gray-400); }

/* ── Presenças (marcação por estado) ────────────── */
.sq-pres-group { display: inline-flex; gap: .3rem; }
.sq-pres-btn {
  width: 34px; height: 34px; border-radius: var(--sq-radius-sm);
  border: 1px solid var(--sq-gray-200); background: var(--sq-white); color: var(--sq-gray-400);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: .9rem; transition: transform .1s, background .15s, color .15s, border-color .15s;
}
.sq-pres-btn:hover { border-color: var(--sq-gray-400); color: var(--sq-gray-600); }
.sq-pres-btn.active { color: #fff; transform: scale(1.05); }
.sq-pres-btn.active[data-value="presente"] { background: #16a34a; border-color: #16a34a; }
.sq-pres-btn.active[data-value="atrasado"] { background: #2563eb; border-color: #2563eb; }
.sq-pres-btn.active[data-value="falta_justificada"] { background: #d97706; border-color: #d97706; }
.sq-pres-btn.active[data-value="falta_injustificada"] { background: #dc2626; border-color: #dc2626; }
.sq-pres-btn.active[data-value="lesionado"] { background: #7c3aed; border-color: #7c3aed; }
.sq-pres-btn.active[data-value="condicionado"] { background: #0d9488; border-color: #0d9488; }
.sq-pres-legenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .75rem; color: var(--sq-gray-600); padding: .5rem .75rem; }
.sq-pres-legenda span { display: inline-flex; align-items: center; gap: .35rem; }
.sq-pres-legenda .ic { width: 18px; height: 18px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: .68rem; }
.sq-pres-count {
  background: var(--sq-gray-100); color: var(--sq-gray-700); border-radius: 999px;
  min-width: 1.4em; padding: .05rem .4rem; text-align: center; font-size: .7rem; font-weight: 700;
}
.sq-pres-mini-group { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.sq-pres-mini {
  display: inline-flex; align-items: center; gap: .25rem; padding: .12rem .4rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700; color: #fff; white-space: nowrap;
}
.sq-pres-mini i { font-size: .62rem; }

/* ── Tooltip estruturado da Agenda (dashboards) — ver Scripts/agenda-tooltip.js ────────── */
.sq-agenda-tip {
  position: fixed; z-index: 3000; background: var(--sq-white); border-radius: var(--sq-radius-sm);
  box-shadow: 0 12px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
  border: 1px solid var(--sq-gray-200); min-width: 220px; max-width: 300px; padding: 0;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease; pointer-events: none;
}
.sq-agenda-tip.open { opacity: 1; visibility: visible; transform: translateY(0); }
.sq-agenda-tip-head { display: flex; align-items: center; gap: .5rem; padding: .6rem .75rem .4rem; border-left: 4px solid transparent; }
.sq-agenda-tip-badge { flex-shrink: 0; display: inline-block; padding: .15rem .5rem; border-radius: 20px; color: #fff; font-size: .68rem; font-weight: 700; }
.sq-agenda-tip-titulo { font-size: .85rem; color: var(--sq-gray-900); line-height: 1.25; }
.sq-agenda-tip-quando { font-size: .76rem; color: var(--sq-gray-600); padding: 0 .75rem .5rem; text-transform: capitalize; }
.sq-agenda-tip-campos { border-top: 1px solid var(--sq-gray-100); padding: .4rem .75rem .5rem; }
.sq-agenda-tip-campo { display: flex; gap: .5rem; padding: .2rem 0; font-size: .76rem; }
.sq-agenda-tip-l { flex: 0 0 84px; font-weight: 700; color: var(--sq-gray-600); }
.sq-agenda-tip-v { flex: 1; color: var(--sq-gray-800); white-space: pre-wrap; word-break: break-word; }

/* ── Recolhas (motorista) ────────────────────────── */
.sq-recolha-card { padding: .75rem 1.1rem; border-bottom: 1px solid var(--sq-gray-100); }
.sq-recolha-card:last-child { border-bottom: none; }
.sq-recolha-card:hover { background: var(--sq-gray-50, #f9fafb); }
.sq-recolha-linha1 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.sq-recolha-linha2 { margin-top: .35rem; font-size: .78rem; color: var(--sq-gray-500); display: flex; align-items: center; flex-wrap: wrap; }

/* ── Campo (convocatória) — fundo realista consoante a modalidade, ver data-mod no <div class="sq-pitch">
   preenchido a partir de modalidades_dt.modalidadeNome. As marcações (linhas/círculos/áreas) são um <svg>
   injetado como primeiro filho (.sq-pitch-svg, ver pitchMarkingsSvg() em Convocatoria.aspx) em vez de um
   background-image, para não precisar de URL-encoding e ficar fácil de ajustar. Modalidades sem tratamento
   dedicado (ex: Badminton, Bilhar) ficam com o relvado genérico como fallback — a convocatória visual não é
   pensada para desportos individuais, mas não deve partir visualmente por não ter um "campo" próprio. */
.sq-pitch {
  background-color: #2d7a1f;
  background-image: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 32px, rgba(0,0,0,.05) 32px 64px);
  border-radius: var(--sq-radius);
  position: relative; overflow: hidden;
  padding: 1.5rem; min-height: 420px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.sq-pitch[data-mod="basquebol"], .sq-pitch[data-mod="basquetebol"] {
  background-color: #c8925a;
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 6px, transparent 6px 34px);
}
.sq-pitch-svg {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block;
}
.sq-pitch-row {
  display: flex; justify-content: space-evenly; align-items: flex-start; gap: .5rem;
  margin-bottom: 1.25rem; padding: 0 .5rem;
}
.sq-pitch-player {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  cursor: grab; user-select: none;
}
.sq-pitch-player-num {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--sq-accent); color: var(--sq-dark);
  font-weight: 800; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.sq-pitch-player-name {
  font-size: .62rem; font-weight: 600; color: var(--sq-white);
  max-width: 82px; text-align: center; white-space: normal;
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.sq-pitch-empty {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px dashed rgba(255,255,255,.3);
}

/* ── Campo Visual livre (arrastar para qualquer ponto — ver colocarNoCampo em Convocatoria.aspx) ──
   max-width trava o tamanho: sem isto o campo esticava até à largura toda da coluna (1fr no grid do
   card), o que em ecrãs largos dava um campo enorme, já que a altura acompanha via aspect-ratio. */
.sq-pitch.sq-pitch-free { aspect-ratio: .8; max-width: 420px; min-height: 240px; padding: 0; margin: 0 auto; }
.sq-pitch.sq-pitch-free.drag-over { outline: 3px dashed rgba(255,255,255,.6); outline-offset: -6px; }
.sq-pitch.sq-pitch-free .sq-pitch-player-num { width: 28px; height: 28px; font-size: .7rem; }
.sq-pitch.sq-pitch-free .sq-pitch-player-name { font-size: .55rem; max-width: 62px; }
.pitch-token {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  cursor: grab; user-select: none; touch-action: none; z-index: 2;
}
.pitch-token:active { cursor: grabbing; }
.sq-pitch-zonelabel {
  position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; z-index: 1;
  font-size: .62rem; font-weight: 700; color: rgba(255,255,255,.4);
  text-transform: uppercase; letter-spacing: .06em;
}

/* ── Modal ──────────────────────────────────────── */
.sq-modal-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 500;
  align-items: center; justify-content: center; padding: 1rem;
}
.sq-modal-backdrop.open { display: flex; }
.sq-modal {
  background: var(--sq-white); border-radius: var(--sq-radius);
  box-shadow: var(--sq-shadow-lg);
  width: 100%; max-width: 520px; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.sq-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--sq-gray-200);
  flex-shrink: 0;
}
.sq-modal-header h3 { font-size: 1rem; font-weight: 700; color: var(--sq-gray-900); }
.sq-modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--sq-gray-500); font-size: 1.1rem; padding: .2rem .4rem;
  border-radius: var(--sq-radius-sm); line-height: 1;
}
.sq-modal-close:hover { background: var(--sq-gray-100); color: var(--sq-gray-900); }
.sq-modal-body { padding: 1.25rem; overflow-y: auto; flex: 1; }
.sq-modal-footer {
  padding: .85rem 1.25rem; border-top: 1px solid var(--sq-gray-200);
  display: flex; justify-content: flex-end; gap: .6rem; flex-shrink: 0;
}

/* ── Icon preview (modalidades) ─────────────────── */
.sq-icon-preview {
  width: 40px; height: 40px; border-radius: var(--sq-radius-sm);
  background: var(--sq-primary-light); color: var(--sq-primary-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; flex-shrink: 0;
}

/* ── Leaflet map container ──────────────────────── */
.sq-map { height: 480px; border-radius: var(--sq-radius); overflow: hidden; }

/* ── Bottom nav (mobile) ────────────────────────── */
.sq-bottom-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--sq-white); border-top: 1px solid var(--sq-gray-200);
  padding: .4rem 0; z-index: 150; justify-content: space-around;
  box-shadow: 0 -1px 3px rgba(0,0,0,.07);
}
.sq-bottom-nav a {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  font-size: .65rem; font-weight: 600; color: var(--sq-gray-600); padding: .3rem .5rem;
  min-width: 50px; text-align: center;
}
.sq-bottom-nav a i { font-size: 1.05rem; }
.sq-bottom-nav a.active, .sq-bottom-nav a:hover { color: var(--sq-primary); text-decoration: none; }

/* ── Grid helpers ───────────────────────────────── */
.sq-grid { display: grid; gap: 1.25rem; }
.sq-grid-2 { grid-template-columns: repeat(2, 1fr); }
.sq-grid-3 { grid-template-columns: repeat(3, 1fr); }
.sq-grid-4 { grid-template-columns: repeat(4, 1fr); }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.text-muted  { color: var(--sq-gray-600); font-size: .82rem; }
.text-danger { color: var(--sq-danger); }
.text-success{ color: var(--sq-success-dark); }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.fw-bold { font-weight: 700; }
.w-100 { width: 100%; }

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 900px) {
  .sq-sidebar { transform: translateX(-100%); }
  .sq-sidebar.open { transform: translateX(0); }
  .sq-topbar { left: 0; }
  .sq-main { margin-left: 0; padding-bottom: 65px; }
  .sq-bottom-nav { display: flex; }
  .sq-grid-2, .sq-grid-3, .sq-grid-4 { grid-template-columns: 1fr; }
  /* Muitas páginas definem grid-template-columns inline (ex: "1fr 260px") para um layout
     de 2 colunas em ecrã largo — isto sobrepõe-se a essas para empilhar em ecrãs estreitos. */
  .sq-grid { grid-template-columns: 1fr !important; }
  .sq-form-row.cols-2, .sq-form-row.cols-3, .sq-form-row.cols-4 { grid-template-columns: 1fr; }
  .sq-stats { grid-template-columns: repeat(2, 1fr); }
  .d-lg-none { display: flex !important; }
  .d-none { display: none !important; }
}
@media (min-width: 901px) {
  .d-lg-none { display: none !important; }
}

/* ── Editor de Desenho Tático — tema escuro profissional ─────────── */
#modalDesenho { --dt-bg: #1b2430; --dt-bg2: #242f3d; --dt-line: #38455a; --dt-text: #e5e9f0; --dt-text-dim: #94a3b8; --dt-accent: #22d3ee; }
#modalDesenho.dt-fs { padding: 0 !important; }
#modalDesenho.dt-fs .sq-modal { width: 100vw !important; height: 100vh !important; max-width: 100vw !important; max-height: 100vh !important; border-radius: 0 !important; }
#modalDesenho.dt-fs #pitchSVG { max-height: calc(100vh - 300px) !important; }
#modalDesenho .sq-modal-header { position: relative; }
.dt-fs-btn { background: none; border: none; cursor: pointer; color: var(--dt-text-dim); font-size: 1rem; padding: .2rem .5rem; border-radius: var(--sq-radius-sm); line-height: 1; margin-right: .35rem; }
.dt-fs-btn:hover { background: var(--dt-line); color: var(--dt-text); }
#modalDesenho .sq-modal-header { background: var(--dt-bg); border-bottom: 1px solid var(--dt-line); }
#modalDesenho .sq-modal-header h3 { color: var(--dt-text); }
#modalDesenho .sq-modal-close { color: var(--dt-text-dim); }
#modalDesenho .sq-modal-close:hover { background: var(--dt-line); color: var(--dt-text); }
#modalDesenho .sq-modal-body { background: var(--dt-bg); }
#modalDesenho .sq-modal-footer { background: var(--dt-bg); border-top: 1px solid var(--dt-line); }
#modalDesenho .dt-bar {
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; align-items: center;
  background: var(--dt-bg2); border: 1px solid var(--dt-line); border-radius: 6px;
  padding: .5rem .7rem; margin-bottom: .5rem; color: var(--dt-text);
}
#modalDesenho .dt-bar label {
  font-size: .68rem; font-weight: 700; color: var(--dt-text-dim); text-transform: uppercase;
  letter-spacing: .04em; margin-right: .4rem; white-space: nowrap;
}
#modalDesenho .dt-bar select,
#modalDesenho .dt-bar input[type="text"],
#modalDesenho .dt-bar input[type="number"] {
  background: var(--dt-bg); color: var(--dt-text); border: 1px solid var(--dt-line);
  border-radius: 5px; padding: .3rem .5rem; font-size: .82rem;
}
#modalDesenho .dt-bar input[type="color"] {
  width: 30px; height: 26px; padding: 0; border: 1px solid var(--dt-line); border-radius: 5px; background: none; cursor: pointer;
}
#modalDesenho .dt-seg { display: inline-flex; border: 1px solid var(--dt-line); border-radius: 5px; overflow: hidden; }
#modalDesenho .dt-seg button {
  background: var(--dt-bg); color: var(--dt-text-dim); border: none; border-right: 1px solid var(--dt-line);
  padding: .3rem .6rem; font-size: .78rem; font-weight: 600; cursor: pointer; line-height: 1.3;
}
#modalDesenho .dt-seg button:last-child { border-right: none; }
#modalDesenho .dt-seg button:hover { background: var(--dt-line); color: var(--dt-text); }
#modalDesenho .dt-seg button.active { background: var(--dt-accent); color: #05242c; }
#modalDesenho #drawToolbar {
  background: var(--dt-bg2); border: 1px solid var(--dt-line); border-radius: 6px;
}
#modalDesenho #drawToolbar .draw-tool {
  background: var(--dt-bg); color: var(--dt-text-dim); border: 1px solid var(--dt-line);
}
#modalDesenho #drawToolbar .draw-tool:hover { background: var(--dt-line); color: var(--dt-text); }
#modalDesenho #drawToolbar .draw-tool[style*="outline"] { color: var(--dt-text); }
#modalDesenho #drawToolbar > span { background: var(--dt-line) !important; }
#modalDesenho #pitchWrap { box-shadow: inset 0 0 0 1px var(--dt-line); }
#modalDesenho .sq-btn-secondary { background: var(--dt-bg2); color: var(--dt-text); border: 1px solid var(--dt-line); }
#modalDesenho .sq-btn-secondary:hover { background: var(--dt-line); }
#modalDesenho p.dt-hint { color: var(--dt-text-dim) !important; }

/* ── Impressão — chrome comum (sidebar/topbar/nav) nunca deve sair no papel ────── */
@media print {
  .sq-sidebar, .sq-topbar, .sq-bottom-nav { display: none !important; }
  .sq-main { margin-left: 0 !important; padding: 0 !important; }
  .sq-page { padding: 0 !important; }
  body { background: #fff !important; }
  .no-print { display: none !important; }
}