/* ============================================================================
   FRANCESA v1.0 · docs/guia.css
   Cromo do guia visual. Prefixo guia- para não confundir com o sistema (fr-).
   Só tokens --fr-* e --cl-*; nenhum hex.
   ========================================================================== */

.guia-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  min-height: 100svh;
}

/* ---- Lateral (tema escuro fixo) ----------------------------------------- */
.guia-lateral {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow-y: auto;
  padding: 28px 24px 40px;
  background-color: var(--fr-fundo);
  color: var(--fr-texto);
  border-right: var(--fr-borda-forte) solid var(--fr-linha-forte);
  scrollbar-width: thin;
}

.guia-lateral__logo {
  display: block;
  color: var(--fr-texto);
}

.guia-lateral__logo svg {
  width: 150px;
  height: auto;
}

.guia-lateral__nome {
  margin: 18px 0 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--fr-fonte);
  font-size: 22px;
  font-weight: var(--fr-peso-cartaz);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.guia-lateral nav {
  margin-top: 28px;
}

.guia-lateral nav p {
  margin: 22px 0 8px;
  font-family: var(--fr-fonte-mono);
  font-size: var(--fr-t-mono);
  font-weight: var(--fr-peso-medio);
  letter-spacing: var(--fr-tracking-mono);
  text-transform: uppercase;
  color: var(--fr-texto-suave);
}

.guia-lateral nav a {
  display: block;
  padding: 6px 0 6px 12px;
  font-size: var(--fr-t-pequeno);
  color: var(--fr-texto-suave);
  text-decoration: none;
  border-left: var(--fr-borda-forte) solid transparent;
  transition: color var(--fr-m-curto) var(--fr-ease-saida),
    border-color var(--fr-m-curto) var(--fr-ease-saida);
}

.guia-lateral nav a:hover,
.guia-lateral nav a.is-atual {
  color: var(--fr-texto);
  border-left-color: var(--fr-realce);
}

/* ---- Principal ----------------------------------------------------------- */
.guia-main {
  min-width: 0;
}

html.no-js .guia-temas-barra {
  display: none;
}

.guia-temas-barra {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px clamp(24px, 5vw, 72px);
  background-color: var(--fr-fundo);
  color: var(--fr-texto);
  border-bottom: var(--fr-borda-forte) solid var(--fr-linha-forte);
  font-family: var(--fr-fonte-mono);
  font-size: var(--fr-t-mono);
  letter-spacing: var(--fr-tracking-mono);
  text-transform: uppercase;
}

.guia-tema-botao {
  appearance: none;
  padding: 7px 13px;
  font-family: var(--fr-fonte-mono);
  font-size: var(--fr-t-mono);
  font-weight: var(--fr-peso-medio);
  letter-spacing: var(--fr-tracking-mono);
  text-transform: uppercase;
  background-color: var(--fr-superficie);
  color: var(--fr-texto);
  border: var(--fr-borda-forte) solid var(--fr-linha-forte);
  cursor: pointer;
}

.guia-tema-botao[aria-pressed='true'] {
  background-color: var(--fr-botao-fundo);
  color: var(--fr-botao-texto);
}

.guia-secao {
  padding: 72px clamp(24px, 5vw, 72px);
  border-bottom: var(--fr-borda-forte) solid var(--fr-linha-forte);
  overflow-x: clip;
}

.guia-secao__titulo {
  margin-bottom: 16px;
}

.guia-secao__intro {
  max-width: 66ch;
  color: var(--fr-texto-suave);
}

.guia-bloco {
  margin-top: 56px;
}

.guia-bloco__cab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 12px;
}

.guia-bloco__cab h3 {
  font-family: var(--fr-fonte);
  font-size: var(--fr-t-m);
  font-weight: var(--fr-peso-forte);
  letter-spacing: var(--fr-tracking-titulo);
  margin: 0;
}

.guia-bloco__cab code {
  font-family: var(--fr-fonte-mono);
  font-size: var(--fr-t-mono);
  color: var(--fr-texto-suave);
}

.guia-bloco__texto {
  max-width: 70ch;
  color: var(--fr-texto-suave);
  margin-bottom: 20px;
}

/* ---- Palco de demonstração ---------------------------------------------- */
.guia-demo {
  position: relative;
  padding: 40px;
  background-color: var(--fr-fundo);
  color: var(--fr-texto);
  border: var(--fr-borda-forte) solid var(--fr-linha-forte);
  overflow: clip;
}

.guia-demo--linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.guia-demo--coluna {
  display: grid;
  gap: 20px;
}

.guia-demo--sem-pad {
  padding: 0;
}

.guia-demo--sem-pad > .guia-replay {
  margin: 12px 12px 0;
}

.guia-demo__rotulo {
  position: absolute;
  top: 12px;
  right: 14px;
  font-family: var(--fr-fonte-mono);
  font-size: 11px;
  letter-spacing: var(--fr-tracking-mono);
  text-transform: uppercase;
  color: var(--fr-texto-suave);
}

/* ---- Código copiável ------------------------------------------------------ */
.guia-codigo {
  position: relative;
  margin-top: 12px;
}

.guia-codigo pre {
  margin: 0;
  padding: 18px 20px;
  background-color: var(--cl-ink);
  color: var(--cl-mist);
  border: var(--fr-borda-forte) solid var(--fr-linha-forte);
  font-family: var(--fr-fonte-mono);
  font-size: 12.5px;
  line-height: 1.6;
  overflow-x: auto;
  tab-size: 2;
  max-height: 420px;
}

.guia-copiar {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 6px 12px;
  font-family: var(--fr-fonte-mono);
  font-size: var(--fr-t-mono);
  letter-spacing: var(--fr-tracking-mono);
  text-transform: uppercase;
  background-color: var(--cl-forest);
  color: var(--cl-snow);
  border: var(--fr-borda-fina) solid var(--cl-pistachio);
  cursor: pointer;
}

.guia-copiar:hover {
  background-color: var(--cl-pistachio);
  color: var(--cl-ink);
}

.guia-copiar:focus-visible {
  outline-color: var(--cl-snow);
}

/* ---- Fazer / evitar ------------------------------------------------------- */
.guia-uso {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.guia-uso > div {
  padding: 16px 18px;
  background-color: var(--fr-superficie);
  border: var(--fr-borda-forte) solid var(--fr-linha-forte);
  border-top: var(--fr-tarja) solid var(--fr-tarja-cor);
  font-size: var(--fr-t-pequeno);
  line-height: 1.55;
}

.guia-uso p {
  margin: 0 0 8px;
  font-family: var(--fr-fonte-mono);
  font-size: var(--fr-t-mono);
  letter-spacing: var(--fr-tracking-mono);
  text-transform: uppercase;
}

.guia-uso ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.guia-uso li {
  position: relative;
  padding-left: 18px;
  color: var(--fr-texto-suave);
  margin-bottom: 6px;
}

.guia-uso li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
}

.guia-uso .guia-uso--sim li::before {
  background-color: var(--fr-realce);
}

.guia-uso .guia-uso--nao li::before {
  background-color: var(--fr-acento);
  border: var(--fr-borda-fina) solid var(--fr-linha-forte);
}

/* ---- Paleta e temas ------------------------------------------------------- */
.guia-paleta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.guia-cor {
  background-color: var(--fr-superficie);
  border: var(--fr-borda-forte) solid var(--fr-linha-forte);
  overflow: hidden;
}

.guia-cor__amostra {
  height: 96px;
  border-bottom: var(--fr-borda-forte) solid var(--fr-linha-forte);
}

.guia-swatch--neve { background-color: var(--cl-snow); }
.guia-swatch--nevoa { background-color: var(--cl-mist); }
.guia-swatch--pistache { background-color: var(--cl-pistachio); }
.guia-swatch--verde { background-color: var(--cl-forest); }
.guia-swatch--grafite { background-color: var(--cl-ink); }
.guia-swatch--laranja { background-color: var(--cl-orange); }
.guia-swatch--suave { background-color: var(--cl-text-muted); }
.guia-swatch--suave-escuro { background-color: var(--cl-text-muted-dark); }
.guia-swatch--borda { background-color: var(--cl-border); }
.guia-swatch--trama { background-color: var(--cl-trama); }

.guia-swatch--fundo { background-color: var(--fr-fundo); }
.guia-swatch--superficie { background-color: var(--fr-superficie); }
.guia-swatch--texto { background-color: var(--fr-texto); }
.guia-swatch--realce { background-color: var(--fr-realce); }
.guia-swatch--tarja { background-color: var(--fr-tarja-cor); }

.guia-cor__info {
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
}

.guia-cor__info b {
  display: block;
  font-weight: var(--fr-peso-forte);
}

.guia-cor__info code {
  font-family: var(--fr-fonte-mono);
  font-size: 12px;
  color: var(--fr-texto-suave);
}

/* Três colunas ou uma, nunca duas. Nessas duas grades a ordem do HTML deixa o
   cartão laranja longe do verde e do pistache (laranja não encosta em verde). */
.guia-temas-grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (min-width: 951px) and (max-width: 1060px), (max-width: 719px) {
  .guia-temas-grade {
    grid-template-columns: minmax(0, 1fr);
  }
}

.guia-tema-card {
  padding: 22px;
  border: var(--fr-borda-forte) solid var(--fr-linha-forte);
  border-top: var(--fr-tarja) solid var(--fr-tarja-cor);
  background-color: var(--fr-fundo);
  color: var(--fr-texto);
}

.guia-tema-card__nome {
  font-family: var(--fr-fonte);
  font-size: 20px;
  font-weight: var(--fr-peso-cartaz);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.guia-tema-card p {
  font-size: 13px;
  color: var(--fr-texto-suave);
  margin: 6px 0 0;
}

.guia-tema-card__amostras {
  display: flex;
  gap: 6px;
  margin-top: 14px;
}

.guia-tema-card__amostras i {
  width: 24px;
  height: 24px;
  border: var(--fr-borda-fina) solid var(--fr-linha-forte);
}

.guia-tema-card hr {
  border: 0;
  border-top: var(--fr-borda-fina) solid var(--fr-linha);
  margin: 14px 0;
}

.guia-tema-card .fr-mono {
  color: var(--fr-texto-suave);
}

/* ---- Tabelas de referência ------------------------------------------------ */
.guia-tabela-wrap {
  overflow-x: auto;
  border: var(--fr-borda-forte) solid var(--fr-linha-forte);
}

.guia-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fr-t-pequeno);
}

.guia-tabela th,
.guia-tabela td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: var(--fr-borda-fina) solid var(--fr-linha);
  vertical-align: top;
}

.guia-tabela tr:last-child td {
  border-bottom: 0;
}

.guia-tabela th {
  font-family: var(--fr-fonte-mono);
  font-weight: var(--fr-peso-medio);
  font-size: var(--fr-t-mono);
  letter-spacing: var(--fr-tracking-mono);
  text-transform: uppercase;
  color: var(--fr-texto-suave);
  background-color: var(--fr-superficie);
}

.guia-tabela code {
  font-family: var(--fr-fonte-mono);
  font-size: 12.5px;
}

/* ---- Escala tipográfica e medidas ---------------------------------------- */
.guia-escala > div {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: var(--fr-borda-fina) solid var(--fr-linha);
}

.guia-escala > div:last-child {
  border-bottom: 0;
}

.guia-escala code {
  font-family: var(--fr-fonte-mono);
  font-size: 12px;
  color: var(--fr-texto-suave);
}

.guia-medidas {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
}

.guia-medidas > div {
  display: grid;
  gap: 8px;
  justify-items: start;
  font-family: var(--fr-fonte-mono);
  font-size: 11px;
  letter-spacing: var(--fr-tracking-mono);
  text-transform: uppercase;
  color: var(--fr-texto-suave);
}

.guia-medidas i {
  display: block;
  background-color: var(--fr-realce);
  border: var(--fr-borda-fina) solid var(--fr-linha-forte);
}

.guia-medida--u { width: calc(var(--fr-u) * 2); height: calc(var(--fr-u) * 2); }
.guia-medida--borda { width: 96px; height: var(--fr-borda-forte); }
.guia-medida--bloco { width: 96px; height: var(--fr-borda-bloco); }
.guia-medida--tarja { width: 128px; height: var(--fr-tarja); }
.guia-medida--sombra {
  width: 88px;
  height: 56px;
  background-color: var(--fr-superficie);
  border: var(--fr-borda-forte) solid var(--fr-linha-forte);
  box-shadow: var(--fr-sombra-bloco);
}

.guia-grade-demo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--fr-col-gap);
}

.guia-grade-demo > div {
  grid-column: span 1;
  min-height: 48px;
  display: grid;
  place-items: center;
  background-color: var(--fr-superficie);
  border: var(--fr-borda-fina) solid var(--fr-linha-forte);
  font-family: var(--fr-fonte-mono);
  font-size: 11px;
  color: var(--fr-texto-suave);
}

.guia-motion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}

.guia-motion > div {
  padding: 16px;
  background-color: var(--fr-superficie);
  border: var(--fr-borda-forte) solid var(--fr-linha-forte);
  border-top: var(--fr-tarja) solid var(--fr-tarja-cor);
  font-size: 13px;
}

.guia-motion b {
  display: block;
  font-family: var(--fr-fonte);
  font-size: 24px;
  font-weight: var(--fr-peso-cartaz);
}

.guia-motion code {
  font-family: var(--fr-fonte-mono);
  font-size: 11px;
  color: var(--fr-texto-suave);
}

.guia-sprite-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
}

.guia-sprite-grade > div {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 18px 8px;
  background-color: var(--fr-superficie);
  border: var(--fr-borda-forte) solid var(--fr-linha-forte);
  font-family: var(--fr-fonte-mono);
  font-size: 11px;
  color: var(--fr-texto-suave);
  text-align: center;
}

.guia-sprite-grade svg {
  width: 32px;
  height: 32px;
  color: var(--fr-texto);
}

.guia-sprite-grade svg.guia-largo {
  width: 110px;
}

.guia-replay {
  margin-bottom: 16px;
}

/* O cabeçalho do sistema é sticky na página. No palco, fica no fluxo
   para não cobrir a barra de temas do guia. */
.guia-demo .fr-cabecalho {
  position: static;
}

/* ---- Responsivo ------------------------------------------------------------ */
@media (max-width: 950px) {
  .guia-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .guia-lateral {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: var(--fr-borda-forte) solid var(--fr-linha-forte);
  }

  .guia-lateral nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
  }

  .guia-lateral nav p {
    width: 100%;
    margin: 12px 0 2px;
  }

  .guia-secao {
    padding: 48px 20px;
  }

  .guia-demo {
    padding: 24px 18px;
  }

  .guia-demo--sem-pad {
    padding: 0;
  }

  .guia-escala > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
}

/* ---- Cores forçadas -------------------------------------------------------- */
@media (forced-colors: active) {
  .guia-lateral nav a.is-atual {
    border-left-color: Highlight;
  }

  .guia-cor__amostra,
  .guia-tema-card__amostras i,
  .guia-medidas i {
    forced-color-adjust: none;
  }

  .guia-lateral__logo svg,
  .guia-sprite-grade svg {
    color: inherit;
  }
}