/*
 * The customer's panel (painel.js), in the home page's language: a blue band with the greeting,
 * the orders as a chain of dimensions and the order; on white, what is being made and what was
 * delivered. Scoped to .pnl; the tokens and the shared parts (header, order, footer) are in
 * inicio.css.
 */

body:is([data-tela="painel"], [data-tela="creditos"]) { background: #fff; }
body:is([data-tela="painel"], [data-tela="creditos"]) > :is(.topo, .rodape) { display: none; }

.ini-nav a[aria-current="page"] { opacity: 1; font-weight: 640; }

/* ---------------------------------------------------------------- the account in the header, and its menu */
.pnl-usuario { gap: 9px; padding-left: 5px !important; }
.pnl-menu {
  position: fixed; inset: 64px var(--borda) auto auto; width: 264px; margin: 0; padding: 6px; overflow: visible;
  border: 1px solid var(--linha); border-radius: 14px; background: #fff; color: var(--tinta);
  box-shadow: 0 24px 48px -20px rgb(8 20 76 / 0.32), 0 2px 6px rgb(8 20 76 / 0.06);
  transition: opacity 160ms ease-out, translate 200ms ease-out, overlay 200ms allow-discrete, display 200ms allow-discrete;
}
.pnl-menu:not(:popover-open) { opacity: 0; translate: 0 -6px; }
@starting-style { .pnl-menu:popover-open { opacity: 0; translate: 0 -6px; } }
.pnl-menu-quem { margin: 0 0 6px; padding: 10px 12px 12px; border-bottom: 1px solid var(--linha-2); }
.pnl-menu-quem strong { display: block; font-size: 0.95rem; font-weight: 680; }
.pnl-menu-quem span { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; color: var(--tinta-3); font-size: 0.85rem; }
.pnl-menu a, .pnl-menu button {
  display: flex; align-items: center; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; cursor: pointer;
  color: var(--tinta-2); font: inherit; font-size: 0.95rem; text-align: left; text-decoration: none; transition: background-color 150ms ease-out, color 150ms ease-out;
}
.pnl-menu a:hover, .pnl-menu button:hover { background: var(--gelo); color: var(--tinta); }
.pnl-menu [data-sair-conta] { color: var(--aviso); }
.pnl-menu :focus-visible { outline-offset: -2px; }

/* ---------------------------------------------------------------- the blue band */
.pnl-palco {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) var(--coluna); gap: 32px clamp(32px, 5vw, 88px); align-items: end;
  padding: calc(72px + clamp(40px, 8vh, 96px)) var(--borda) clamp(48px, 8vh, 88px); color: var(--sobre);
  background: radial-gradient(ellipse 70% 90% at 78% 40%, var(--palco-luz) 0%, var(--palco) 55%, var(--palco-fundo) 100%);
}
/* The stage's faint grid. */
.pnl-palco::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('eixos.svg') center top / cover no-repeat; opacity: 0.1; }
.pnl-dia { margin: 0; color: var(--sobre-3); font-size: 0.95rem; }
.pnl-dia::first-letter { text-transform: uppercase; }
.pnl-saudacao h1 { margin-top: 10px; font-size: clamp(2.75rem, 1.4rem + 3.4vw, 4.75rem); font-weight: 800; font-stretch: 76%; letter-spacing: -0.028em; line-height: 0.95; color: var(--sobre); text-wrap: balance; }
/* The balance on the band, with the way to the statement. */
.pnl-saldo-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 14px 0 0; color: var(--sobre-2); font-size: 1rem; }
.pnl-saldo-linha[hidden] { display: none; }
.pnl-saldo-linha strong { color: var(--sobre); font-weight: 700; font-variant-numeric: tabular-nums; }
.pnl-saldo-linha a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: var(--ciano); font-weight: 620; text-decoration: none; }
.pnl-saldo-linha svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pnl-sub { max-width: 30em; margin: 18px 0 0; color: var(--sobre-2); font-size: 1.0625rem; line-height: 1.5; text-wrap: pretty; }
.pnl-novo h2 { margin: 0 0 14px 4px; color: var(--sobre-2); font-size: 0.95rem; font-weight: 620; }

/* The orders counted, as a chain of dimensions: the whole above, its parts below, each as long as
   its count (painel.js sets the weights). */
.pnl-cadeia { --traco-cota: rgb(255 255 255 / 0.5); max-width: 560px; margin-top: clamp(28px, 5vh, 48px); }
.pnl-cadeia:empty { display: none; }
.pnl-cotas { display: flex; }
.pnl-cotas .pnl-cota { flex: 1 1 0; min-width: 7.75rem; }
.pnl-cota {
  position: relative; display: flex; justify-content: center; padding: 0 6px 14px; color: var(--sobre-2); text-decoration: none; white-space: nowrap;
  font-size: 13px; font-style: italic; font-weight: 560; font-stretch: 78%; font-variant-numeric: tabular-nums; transition: color 150ms ease-out;
}
.pnl-cota-total { margin-bottom: 12px; }
.pnl-cota::before { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--traco-cota); transition: background-color 150ms ease-out; }
/* The ticks: the site's 45° slashes, at both ends of the whole and at every joint of the parts. */
.pnl-cota::after, .pnl-cota:is(.pnl-cota-total, :last-child) > span::after {
  content: ''; position: absolute; left: -4.5px; bottom: 4px; width: 10px; height: 1px; background: var(--traco-cota); transform: rotate(-45deg);
}
.pnl-cota:is(.pnl-cota-total, :last-child) > span::after { left: auto; right: -4.5px; }
.pnl-cota:hover { color: var(--ciano); --traco-cota: var(--ciano); }

/* ---------------------------------------------------------------- on white */
.pnl-secao { padding: clamp(48px, 7vh, 80px) var(--borda) 0; background: #fff; }
.pnl-entregues { padding-bottom: clamp(72px, 10vh, 120px); }
.pnl-secao-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--linha); }
.pnl-secao h2 { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); font-weight: 800; font-stretch: 76%; letter-spacing: -0.02em; line-height: 1; color: var(--tinta); }
.pnl-todos { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--azul); font-weight: 620; text-decoration: none; }
.pnl-todos svg, .pnl-acompanhar svg, .pnl-parados .acao svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms ease-out; }
.pnl-todos:hover svg { transform: translateX(3px); }
.pnl-vazio, .pnl-carregando, .pnl-erro { margin: 0; padding: 28px 0 8px; color: var(--tinta-3); font-size: 1rem; line-height: 1.5; }
.pnl-erro { color: var(--aviso); }
/* A link stretched over its whole card or row (the download sits above it). */
.pnl-esticado::after { content: ''; position: absolute; inset: 0; border-radius: 12px; }

/* What is being made: a row each, with its four steps as a chain of dimensions. */
.pnl-ativos { margin: 0; padding: 0; list-style: none; }
.pnl-pedido-ativo { position: relative; display: grid; gap: 18px; padding: 22px 0 22px; border-bottom: 1px solid var(--linha-2); }
.pnl-pedido-ativo > a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "pulso titulo acao" ". meta acao";
  align-items: center; gap: 4px 14px; color: inherit; text-decoration: none;
}
.pnl-pulso { grid-area: pulso; width: 10px; height: 10px; border-radius: 3px; background: var(--azul); animation: pnl-pulso 2.4s ease-out infinite; }
@keyframes pnl-pulso { 0% { box-shadow: 0 0 0 0 rgb(36 80 216 / 0.45); } 70%, 100% { box-shadow: 0 0 0 10px rgb(36 80 216 / 0); } }
.pnl-ativo-titulo { grid-area: titulo; overflow: hidden; color: var(--tinta); font-size: 1.125rem; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; transition: color 150ms ease-out; }
.pnl-ativo-meta { grid-area: meta; color: var(--tinta-3); font-size: 0.925rem; }
.pnl-acompanhar { grid-area: acao; display: inline-flex; align-items: center; gap: 8px; color: var(--azul); font-weight: 620; }
.pnl-pedido-ativo:hover .pnl-ativo-titulo { color: var(--azul); }
.pnl-pedido-ativo:hover .pnl-acompanhar svg { transform: translateX(3px); }
.pnl-etapas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 0 24px; padding: 0; list-style: none; }
.pnl-etapas li { --traco-etapa: rgb(13 26 61 / 0.2); position: relative; padding: 0 8px 14px; color: var(--tinta-3); font-size: 0.85rem; text-align: center; }
.pnl-etapas li::before { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--traco-etapa); }
.pnl-etapas li::after, .pnl-etapas li:last-child > span::after {
  content: ''; position: absolute; left: -4.5px; bottom: 4px; width: 10px; height: 1px; background: var(--traco-etapa); transform: rotate(-45deg);
}
.pnl-etapas li:last-child > span::after { left: auto; right: -4.5px; }
.pnl-etapas li[data-estado="feita"] { --traco-etapa: var(--azul); color: var(--tinta-2); }
.pnl-etapas li[data-estado="feita"]::before { height: 1.5px; }
/* The step under way: its dimension line runs. */
.pnl-etapas li[data-estado="atual"] { --traco-etapa: var(--azul); color: var(--tinta); font-weight: 640; }
.pnl-etapas li[data-estado="atual"]::before {
  height: 1.5px; background: linear-gradient(90deg, var(--azul) 0 35%, rgb(36 80 216 / 0.22) 35% 100%) 0 0 / 200% 100%;
  animation: pnl-corre 1.8s linear infinite;
}
@keyframes pnl-corre { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* The revision an order is at, beside its name. */
.pnl-revisao { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 4px; background: var(--azul-suave); color: var(--azul); font-size: 0.75rem; font-weight: 700; vertical-align: 2px; white-space: nowrap; }
.pnl-familia-meta .pnl-revisao { margin-left: 0; vertical-align: 0; }
/* Research the order did not need: the dimension drawn dashed, the name faded. */
.pnl-etapas li[data-estado="pulada"] { color: rgb(90 103 133 / 0.6); }
.pnl-etapas li[data-estado="pulada"]::before { background: repeating-linear-gradient(90deg, rgb(13 26 61 / 0.28) 0 4px, transparent 4px 8px); }
.pnl-etapas li[data-estado="falha"] { --traco-etapa: var(--aviso); color: var(--aviso); }

/* What stopped, to look at. */
.pnl-parados { margin-top: 32px; }
.pnl-parados h3 { margin: 0 0 6px; color: var(--tinta-2); font-size: 0.95rem; font-weight: 660; }
.pnl-parados ul { margin: 0; padding: 0; list-style: none; }
.pnl-parados a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 18px; min-height: 52px;
  border-bottom: 1px solid var(--linha-2); color: inherit; text-decoration: none;
}
.pnl-parados .titulo { overflow: hidden; color: var(--tinta); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pnl-parados .meta { color: var(--aviso); font-size: 0.9rem; white-space: nowrap; }
.pnl-parados .acao { display: inline-flex; align-items: center; gap: 6px; color: var(--azul); font-size: 0.9rem; font-weight: 620; white-space: nowrap; }
.pnl-parados a:hover .titulo { color: var(--azul); }

/* The families delivered: their picture from Revit, on white like the Revit view itself. */
.pnl-familias-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 32px 24px; margin: 28px 0 0; padding: 0; list-style: none; }
.pnl-familia { position: relative; display: flex; flex-direction: column; gap: 6px; }
.pnl-familia-imagem {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 8px; overflow: hidden;
  border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--linha); transition: box-shadow 200ms ease-out;
}
/* Laid over the frame: as a grid item the picture would size the row itself and spill past the frame's bottom. */
.pnl-familia-imagem img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 7%; object-fit: contain; transition: transform 400ms var(--sai); }
.pnl-familia-desenho { display: none; width: 30%; height: auto; fill: none; stroke: var(--tinta-3); stroke-width: 0.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; }
.pnl-familia-imagem.sem-imagem { background: var(--gelo); }
.pnl-familia-imagem.sem-imagem img { display: none; }
.pnl-familia-imagem.sem-imagem .pnl-familia-desenho { display: block; }
.pnl-familia:hover .pnl-familia-imagem { box-shadow: inset 0 0 0 1px rgb(36 80 216 / 0.45), 0 18px 36px -24px rgb(10 26 100 / 0.45); }
.pnl-familia:hover img { transform: scale(1.03); }
.pnl-familia h3 { display: -webkit-box; overflow: hidden; margin: 0; font-size: 1rem; font-weight: 660; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pnl-familia h3 a { color: var(--tinta); text-decoration: none; transition: color 150ms ease-out; }
.pnl-familia:hover h3 a { color: var(--azul); }
.pnl-familia-meta { margin: 0; color: var(--tinta-3); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.pnl-baixar {
  position: relative; z-index: 1; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; margin-top: 6px; padding: 0 12px 0 10px;
  border-radius: 10px; background: var(--azul-suave); color: var(--azul); font-size: 0.9rem; font-weight: 640; text-decoration: none; transition: background-color 150ms ease-out;
}
.pnl-baixar:hover { background: #DCE5FC; }
.pnl-baixar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- the way in */
.pnl.entrando .pnl-saudacao > *, .pnl.entrando .pnl-novo { animation: pnl-entra 900ms var(--sai) backwards; }
.pnl.entrando .pnl-saudacao > :nth-child(2) { animation-delay: 60ms; }
.pnl.entrando .pnl-saudacao > :nth-child(3) { animation-delay: 120ms; }
.pnl.entrando .pnl-saudacao > :nth-child(4) { animation-delay: 180ms; }
.pnl.entrando .pnl-novo { animation-delay: 140ms; }
@keyframes pnl-entra { from { opacity: 0; transform: translateY(14px); } }

/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 1100px) {
  .pnl-palco { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .pnl-novo { max-width: 680px; }
}
@media (max-width: 640px) {
  .pnl-usuario .nome { display: none; }
  .pnl-pedido-ativo > a { grid-template-areas: "pulso titulo" ". meta" ". acao"; grid-template-columns: auto minmax(0, 1fr); }
  .pnl-acompanhar { justify-self: start; margin-top: 4px; }
  .pnl-etapas { margin-left: 0; }
  .pnl-etapas li { padding: 0 2px 14px; font-size: 0.72rem; }
  .pnl-parados a { grid-template-columns: minmax(0, 1fr) auto; }
  .pnl-parados .meta { display: none; }
  .pnl-secao-cabeca { flex-wrap: wrap; }
  /* Two families a row: smaller pictures, quicker to scan. */
  .pnl-familias-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .pnl-familia h3 { font-size: 0.925rem; }
  .pnl-baixar { padding: 0 10px 0 8px; font-size: 0.85rem; }
}
/* On a phone the header keeps the orders and the account; the panel is in the account's menu. */
@media (max-width: 440px) {
  .ini-topo .ini-nav a[href="/painel"] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pnl *, .pnl *::before, .pnl *::after { animation: none !important; transition-duration: 0ms !important; }
}

/* ---------------------------------------------------------------- the credits page */
.crd-palco { grid-template-columns: minmax(0, 1fr); }
.crd-palco .pnl-cadeia { max-width: 640px; }
.crd-intro { max-width: 40em; margin: 18px 0 0; color: var(--tinta-2); line-height: 1.5; }
.crd-pacotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; }
.crd-pacote { display: grid; gap: 6px; padding: 22px; border: 1px solid var(--linha); border-radius: 8px; }
.crd-pacote p { margin: 0; }
.crd-pacote-creditos { color: var(--tinta-2); }
.crd-pacote-creditos strong { margin-right: 4px; color: var(--tinta); font-size: 2.25rem; font-weight: 800; font-stretch: 76%; letter-spacing: -0.02em; }
.crd-pacote-preco { color: var(--tinta); font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.crd-pacote p.crd-pacote-nota { margin-bottom: 10px; color: var(--tinta-3); font-size: 0.925rem; }
.crd-pacote .ini-botao { min-height: 44px; }
.crd-tabela { width: 100%; margin-top: 8px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.crd-tabela :is(th, td) { padding: 14px 8px 14px 0; border-bottom: 1px solid var(--linha-2); text-align: left; vertical-align: baseline; }
.crd-tabela thead th { color: var(--tinta-3); font-size: 0.875rem; font-weight: 600; }
.crd-tabela tbody th { color: var(--tinta); font-weight: 620; }
.crd-tabela td { color: var(--tinta-2); }
.crd-extrato { padding-bottom: clamp(72px, 10vh, 120px); }
.crd-movimentos { margin: 0; padding: 0; list-style: none; }
.crd-movimentos li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--linha-2); }
.crd-quando { color: var(--tinta-3); font-size: 0.925rem; font-variant-numeric: tabular-nums; }
.crd-o-que { min-width: 0; color: var(--tinta); }
.crd-o-que a { color: var(--azul); font-weight: 600; text-decoration: none; }
.crd-o-que small { display: block; color: var(--tinta-3); font-size: 0.85rem; }
.crd-valor { color: var(--tinta); font-weight: 700; font-variant-numeric: tabular-nums; }
.crd-movimentos li[data-sinal="1"] .crd-valor { color: var(--ok); }
.crd-movimentos li[data-sinal="0"] .crd-valor { color: var(--tinta-3); }
@media (max-width: 560px) {
  .crd-movimentos li { grid-template-columns: minmax(0, 1fr) auto; }
  .crd-quando { grid-column: 1 / -1; }
  .crd-tabela thead { display: none; }
}
.crd-pacote .ini-botao[disabled] { opacity: 0.55; cursor: not-allowed; }