/* ==========================================================================
   TRILHAS / CURSOS — acabamento v5

   Camada opt-in sobre o motor v4. Mantém dados e comportamentos legados, mas
   aproxima catálogo, caminho e tópico do sistema visual aprovado no Meu Dia.
   Todos os seletores ficam restritos à view real de Trilhas.
   ========================================================================== */

#view-trilhas {
  --v4-bg: transparent;
  --v4-bg-top: transparent;
  --v4-header: color-mix(in srgb, var(--av-ui-surface-1) 96%, transparent);
  --v4-panel: var(--av-ui-surface-1);
  --v4-panel-soft: var(--av-ui-surface-2);
  --v4-panel-raised: var(--av-ui-surface-3);
  --v4-line: color-mix(in srgb, var(--av-ui-action) 22%, transparent);
  --v4-line-soft: var(--av-ui-border);
  --v4-muted: var(--av-ui-text-muted);
  --v4-text: var(--av-ui-text);
  --v4-gold: var(--av-ui-action);
  --v4-purple: var(--av-ui-accent);
  --v4-green: var(--av-ui-success);
  --v4-blue: var(--av-ui-info);
  --v4-danger: var(--av-ui-danger);
  --v4-radius: var(--av-ui-radius-card);
  --v4-shadow: var(--av-ui-shadow-card);
  min-width: 0;
  color: var(--v4-text);
  font-family: var(--av-font-body);
}

#view-trilhas *,
#view-trilhas *::before,
#view-trilhas *::after { box-sizing: border-box; }

#view-trilhas :where(button, a, summary, [role="button"]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--av-ui-action) 82%, white);
  outline-offset: 3px;
}

/* O catálogo v4 já possui cabeçalho próprio; o cartão antigo não se duplica. */
#view-trilhas:has(#gridTrilhas .v4-home-shell) #trilhasHeaderCard,
#view-trilhas.v4-route-active #trilhasHeaderCard { display: none !important; }

#view-trilhas #gridTrilhas {
  min-width: 0;
  container-name: v4shell;
  container-type: inline-size;
}

#view-trilhas .trilha-v4-page-overlay[data-v4-surface="route"] {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--v4-text) !important;
}

#view-trilhas .trilha-v4-page-overlay button,
#view-trilhas .trilha-v4-page-overlay [role="button"] { min-height: var(--av-ui-touch-target); }

#view-trilhas .v4n-icon-btn {
  width: var(--av-ui-touch-target);
  height: var(--av-ui-touch-target);
  border-radius: var(--av-ui-radius-control);
  border-color: var(--v4-line-soft);
  background: var(--v4-panel-raised);
}

/* Catálogo */
#view-trilhas .v4-home-shell {
  width: 100%;
  max-width: none;
  padding: 4px 0 56px;
}

#view-trilhas .v4-home-head {
  min-height: 66px;
  margin: 0 0 16px;
  padding: 0 2px;
}

#view-trilhas .v4-home-head-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--v4-purple), #3b1453);
  box-shadow: 0 8px 22px rgba(91, 31, 126, .22);
}

#view-trilhas .v4-home-head h1,
#view-trilhas .v4-path-head-copy h1,
#view-trilhas .v4n-head-copy h1 {
  color: var(--v4-text);
  font-family: var(--av-font-heading);
  font-weight: 800;
}

#view-trilhas .v4-home-dashboard { gap: 16px; }

#view-trilhas .v4-home-tabs {
  gap: 5px;
  padding: 5px;
  border-color: var(--v4-line-soft);
  border-radius: var(--av-ui-radius-md);
  background: var(--v4-panel-soft);
}

#view-trilhas .v4-home-tab {
  min-height: var(--av-ui-touch-target);
  border-radius: var(--av-ui-radius-control);
  color: var(--v4-muted);
}

#view-trilhas .v4-home-shell button,
#view-trilhas .v4-home-shell summary { min-height: var(--av-ui-touch-target); }

#view-trilhas .v4-olympiad-card-top button { min-width: var(--av-ui-touch-target); }

#view-trilhas .v4-home-tab.is-active {
  border-color: color-mix(in srgb, var(--v4-gold) 28%, transparent);
  background: linear-gradient(135deg, var(--v4-purple), color-mix(in srgb, var(--v4-purple) 66%, #000));
  box-shadow: 0 7px 18px rgba(91, 31, 126, .18);
}

#view-trilhas .v4-home-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#view-trilhas .v4-home-stats > div {
  min-width: 0;
  min-height: 70px;
  border-color: var(--v4-line-soft) !important;
  background: var(--v4-panel) !important;
  box-shadow: none;
}

#view-trilhas .v4-home-guidance {
  padding: 14px;
  border-color: var(--v4-line-soft);
  background: var(--v4-panel);
  box-shadow: var(--v4-shadow);
}

#view-trilhas .v4-guidance-plan {
  border-color: var(--v4-line-soft);
  background: linear-gradient(135deg, var(--v4-panel-raised), var(--v4-panel-soft));
}

#view-trilhas .v4-catalog-group { border-top-color: var(--v4-line-soft); }

#view-trilhas .v4-catalog-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px;
}

#view-trilhas .v4-catalog-card {
  min-height: 144px;
  border-color: var(--v4-card-border, var(--v4-line-soft));
  border-radius: var(--av-ui-radius-card);
  background: linear-gradient(145deg, var(--v4-panel-raised), var(--v4-panel));
  box-shadow: var(--v4-shadow);
}

#view-trilhas .v4-catalog-card:hover {
  border-color: color-mix(in srgb, var(--v4-gold) 48%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--v4-panel-raised) 88%, var(--v4-purple)), var(--v4-panel));
}

#view-trilhas .v4-discipline-card { min-height: 104px; }
#view-trilhas .v4-catalog-card-copy b,
#view-trilhas .v4-olympiad-card-title,
#view-trilhas .v4-catalog-group-head b { color: var(--v4-text); }

/* Caminho */
#view-trilhas .trilha-v4-page-head,
#view-trilhas .v4n-head {
  top: 0;
  border: 1px solid var(--v4-line-soft) !important;
  border-radius: var(--av-ui-radius-card);
  background: color-mix(in srgb, var(--v4-panel) 96%, transparent) !important;
  box-shadow: var(--v4-shadow);
}

#view-trilhas .v4-path-head {
  width: 100%;
  padding: 16px 18px 14px !important;
}

#view-trilhas .v4-path-content {
  width: 100%;
  max-width: none;
  padding: 16px 0 56px;
}

#view-trilhas .v4-path-next,
#view-trilhas .v4n-next {
  border-radius: var(--av-ui-radius-card);
  background: linear-gradient(110deg, color-mix(in srgb, var(--v4-gold) 13%, transparent), var(--v4-panel));
  box-shadow: var(--v4-shadow);
}

#view-trilhas .v4-path-next > button,
#view-trilhas .v4-path-leveling { min-height: var(--av-ui-touch-target); }

#view-trilhas .v4-path-rationale,
#view-trilhas .v4-path-section,
#view-trilhas .v4-path-node,
#view-trilhas .v4n-side-card,
#view-trilhas .v4n-objective {
  border-color: var(--v4-line-soft);
  background: var(--v4-panel);
}

#view-trilhas .v4-path-section-trigger { background: var(--v4-panel-soft); }
#view-trilhas .v4-path-section-body { background: color-mix(in srgb, var(--v4-panel-soft) 48%, transparent); }
#view-trilhas .v4-path-node { min-height: 76px; }

/* Tópico */
#view-trilhas .v4n-head {
  min-height: 88px;
  padding: 14px 18px;
}

#view-trilhas .v4n-layout {
  width: 100%;
  max-width: none;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  gap: 18px;
  padding: 16px 0 56px;
}

#view-trilhas .v4n-side { top: 16px; gap: 12px; }
#view-trilhas .v4n-side-card { border-radius: var(--av-ui-radius-card); box-shadow: var(--v4-shadow); }
#view-trilhas .v4n-objective { border-radius: var(--av-ui-radius-card); }
#view-trilhas .v4n-task { min-height: 58px; }
#view-trilhas .v4n-task:not(.disabled):hover { background: var(--v4-panel-soft); }

body.theme-light #view-trilhas .trilha-v4-page-head,
body.theme-light #view-trilhas .v4n-head { background: color-mix(in srgb, #fff 96%, transparent) !important; }

@media (max-width: 1100px) {
  #view-trilhas .v4n-layout { grid-template-columns: minmax(0, 1fr) 280px; }
}

@media (max-width: 960px) {
  #view-trilhas .v4n-layout { grid-template-columns: 1fr; }
  #view-trilhas .v4n-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  #view-trilhas .v4-home-shell { padding: 0 0 calc(108px + env(safe-area-inset-bottom, 0px)); }
  #view-trilhas .v4-home-head { grid-template-columns: 44px minmax(0, 1fr); gap: 11px; }
  #view-trilhas .v4-home-head > :last-child:not(:nth-child(2)) { grid-column: 1 / -1; }
  #view-trilhas .v4-home-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
    overflow: visible;
  }
  #view-trilhas .v4-home-tab {
    min-width: 0;
    min-height: var(--av-ui-touch-target) !important;
    padding-inline: 8px;
  }
  #view-trilhas .v4-home-shell button,
  #view-trilhas .v4-home-shell summary,
  #view-trilhas .v4-home-shell [role="button"] { min-height: var(--av-ui-touch-target) !important; }
  #view-trilhas .v4-home-stats { grid-template-columns: 1fr; }
  #view-trilhas .v4-catalog-grid { grid-template-columns: 1fr; }
  #view-trilhas .v4-path-head,
  #view-trilhas .v4n-head { padding: 12px !important; border-radius: var(--av-ui-radius-md); }
  #view-trilhas .v4-path-leveling { width: 100%; margin-left: 0; }
  #view-trilhas .v4-path-next { grid-template-columns: 42px minmax(0, 1fr); }
  #view-trilhas .v4-path-next > button { grid-column: 1 / -1; width: 100%; }
  #view-trilhas .v4-path-section-body { padding-left: 10px; }
  #view-trilhas .v4-path-node { grid-template-columns: 32px minmax(0, 1fr); }
  #view-trilhas .v4-path-node-meta { grid-column: 2; align-items: flex-start; }
  #view-trilhas .v4n-side { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  #view-trilhas .trilha-v4-page-overlay,
  #view-trilhas .v4-catalog-card,
  #view-trilhas .v4-path-node { animation: none !important; transition: none !important; }
}