.admin-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  background:
    radial-gradient(circle at top right, rgba(0, 0, 0, 0.04), transparent 32%),
    #f3f3f0;
  color: #111;
}

.admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 30px 24px;
  background: linear-gradient(180deg, #050505 0%, #0b0b0b 100%);
  color: #fff;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-sidebar h1 {
  margin-bottom: 42px;
  font-family: var(--font-title);
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: 0.34em;
}

.admin-sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-sidebar a {
  width: 100%;
  padding: 12px 0;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #d9d9d9;
  font-family: var(--font-title);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.25s ease, padding-left 0.25s ease;
}

.admin-sidebar a:hover {
  color: #fff;
  padding-left: 8px;
}

.admin-content {
  min-width: 0;
  padding: 44px 42px;
  overflow-x: hidden;
}

.admin-page {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

.admin-heading {
  margin-bottom: 34px;
}

.admin-heading p {
  font-family: var(--font-title);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #777;
}

.admin-heading h1 {
  margin-top: 8px;
  font-family: var(--font-title);
  font-size: clamp(3.2rem, 6vw, 5.4rem);
  line-height: 0.88;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-heading span {
  display: block;
  max-width: 560px;
  margin-top: 14px;
  color: #555;
  line-height: 1.6;
}

.admin-empty,
.admin-table-card,
.admin-detail-card {
  margin-top: 28px;
  padding: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), #fff);
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.055);
}

.admin-empty h2 {
  font-family: var(--font-title);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.admin-empty p {
  margin-top: 10px;
  color: #666;
}

.admin-table-header {
  margin-bottom: 18px;
  padding-bottom: 18px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.admin-table-header h2,
.admin-detail-card h2 {
  font-family: var(--font-title);
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #111;
}

.admin-table-header span {
  color: #666;
}

.admin-table-wrapper {
  width: 100%;
  overflow-x: visible;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.admin-table th {
  padding: 15px 8px;
  text-align: left;
  font-family: var(--font-title);
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.admin-table td {
  padding: 17px 8px;
  color: #333;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  vertical-align: middle;
  font-size: 0.88rem;
}

.admin-table tbody tr {
  transition: background 0.2s ease;
}

.admin-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.025);
}

.admin-table th:nth-child(1),
.admin-table td:nth-child(1) {
  width: 16%;
}

.admin-table th:nth-child(2),
.admin-table td:nth-child(2) {
  width: 10%;
}

.admin-table th:nth-child(3),
.admin-table td:nth-child(3) {
  width: 22%;
}

.admin-table th:nth-child(4),
.admin-table td:nth-child(4) {
  width: 18%;
}

.admin-table th:nth-child(5),
.admin-table td:nth-child(5) {
  width: 6%;
}

.admin-table th:nth-child(6),
.admin-table td:nth-child(6) {
  width: 9%;
}

.admin-table th:nth-child(7),
.admin-table td:nth-child(7) {
  width: 11%;
}

.admin-table th:nth-child(8),
.admin-table td:nth-child(8) {
  width: 13%;
  text-align: right;
}

.admin-order-code strong {
  display: inline-block;
  max-width: 100%;
  font-family: var(--font-title);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  line-height: 1.35;
  word-break: break-word;
}

.admin-status {
  max-width: 100%;
  padding: 7px 10px;
  display: inline-flex;
  border-radius: 999px;
  background: #eee;
  color: #111;
  font-family: var(--font-title);
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-status-aguardando_pagamento {
  background: #fff3cf;
  color: #7a5400;
}

.admin-status-pago {
  background: #dff7e8;
  color: #116331;
}

.admin-status-cancelado {
  background: #ffe1e1;
  color: #8a1111;
}

.admin-status-separando {
  background: #eeeeee;
  color: #333;
}

.admin-status-enviado,
.admin-status-entregue {
  background: #e5edff;
  color: #243f88;
}

.admin-link-button {
  height: 34px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-family: var(--font-title);
  font-size: 0.54rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
  transition: transform 0.25s ease, background 0.25s ease;
}

.admin-link-button:hover {
  transform: translateY(-2px);
  background: #000;
}

.admin-details-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.admin-detail-list {
  margin-top: 20px;
  display: grid;
  gap: 14px;
}

.admin-detail-list div {
  padding-bottom: 12px;
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.admin-detail-list span {
  font-family: var(--font-title);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #888;
}

.admin-detail-list strong {
  color: #111;
  font-size: 0.96rem;
  line-height: 1.5;
}

.admin-address-box {
  margin-top: 18px;
  padding: 22px;
  border-radius: 16px;
  background: #f5f5f2;
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #333;
  line-height: 1.8;
}

.admin-back-link {
  width: max-content;
  margin-top: 34px;
  padding: 14px 22px;
  display: inline-flex;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-family: var(--font-title);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Detalhes do pedido */
.admin-order-page .admin-heading {
  max-width: 900px;
}

.admin-order-page .admin-heading p {
  color: #8b806d;
}

.admin-order-page .admin-heading h1 {
  max-width: 900px;
  font-size: clamp(3.2rem, 5.4vw, 5.2rem);
  line-height: 0.92;
  letter-spacing: 0.02em;
  word-break: break-word;
}

.admin-order-page .admin-heading span {
  font-size: 1rem;
  color: #5f5f5f;
}

.admin-status-current {
  display: inline-flex;
  align-items: center;
}

.admin-status-form {
  margin: 10px 0 6px;
  padding: 18px;
  display: grid;
  gap: 14px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 18px;
  background: linear-gradient(180deg, #fcfcfc 0%, #f6f3ee 100%);
}

.admin-status-form label {
  font-family: var(--font-title);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8b806d;
}

.admin-select-wrap {
  position: relative;
  width: max-content;
  max-width: 100%;
}

.admin-status-form select {
  width: auto;
  min-width: 190px;
  max-width: 100%;
  height: 48px;
  padding: 0 42px 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  color: #111;
  font-family: var(--font-title);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  outline: none;
  cursor: pointer;
}

.admin-status-form select:focus {
  border-color: #bca77a;
  box-shadow: 0 0 0 4px rgba(188, 167, 122, 0.14);
}

.admin-status-form button {
  width: max-content;
  min-width: 170px;
  height: 42px;
  padding: 0 18px;
  border: none;
  border-radius: 999px;
  background: #111;
  color: #fff;
  cursor: pointer;
  font-family: var(--font-title);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.admin-status-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  background: #000;
}

.admin-status-note {
  margin: 0;
  max-width: 360px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #666;
}

.admin-detail-list .admin-status-form {
  border-bottom: none;
}

.admin-detail-card {
  min-height: auto;
}

@media (max-width: 1280px) {
  .admin-layout {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .admin-sidebar {
    padding: 28px 20px;
  }

  .admin-sidebar h1 {
    font-size: 1.28rem;
    letter-spacing: 0.28em;
  }

  .admin-sidebar a {
    font-size: 0.64rem;
    letter-spacing: 0.07em;
  }

  .admin-content {
    padding: 36px 34px;
  }

  .admin-page {
    max-width: 100%;
  }

  .admin-table-card {
    padding: 24px;
  }

  .admin-heading h1 {
    font-size: clamp(3rem, 5vw, 4.8rem);
  }

  .admin-table th {
    font-size: 0.52rem;
    padding: 14px 6px;
  }

  .admin-table td {
    font-size: 0.82rem;
    padding: 16px 6px;
  }

  .admin-status {
    font-size: 0.46rem;
    padding: 6px 8px;
  }

  .admin-link-button {
    height: 32px;
    padding: 0 11px;
    font-size: 0.5rem;
  }
}

@media (max-width: 980px) {
  .admin-layout {
    /*
       minmax(0, 1fr), e nao 1fr — Fase 10.5.19.

       "1fr" e' atalho para "minmax(auto, 1fr)", e esse auto e' um
       MINIMO: a coluna se recusa a encolher abaixo do conteudo mais
       largo que ela segura. Qualquer card, tabela ou titulo comprido
       de dentro do painel empurrava a coluna, a coluna empurrava o
       documento, e o admin inteiro ganhava largura maior que a tela.

       Na regra de desktop, logo no comeco deste arquivo, o
       minmax(0, 1fr) ja' estava la'. Aqui na versao mobile ficou de
       fora -- e' por isso que o vazamento so' aparecia no celular.

       Vale para TODAS as telas do admin: /admin/pedidos vazava nos
       cards de Cliente e Pedido pelo mesmo motivo.

       7a ocorrencia desta familia de bug no projeto. A regra da casa
       continua valendo: contêiner de flex ou grid que segura conteudo
       largo pede min-width: 0 / minmax(0, 1fr).
    */
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-sidebar {
    position: static;
    height: auto;
  }

  .admin-sidebar nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 18px;
  }

  .admin-sidebar a {
    width: auto;
  }

  .admin-content {
    padding: 34px 22px;
  }

  .admin-table-wrapper {
    overflow-x: auto;
  }

  .admin-table {
    min-width: 860px;
  }

  /*
     minmax(0, 1fr) nas duas: mesma razao da .admin-layout mais acima.
     "1fr" sozinho carrega um minimo automatico que impede a coluna de
     encolher abaixo do conteudo. Aqui e' o cinto, e o max-width do
     seletor de status e' o suspensorio -- qualquer conteudo largo que
     entrar nestes cards no futuro ja' nasce contido.
  */
  .admin-details-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-detail-list div {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Ajuste fino do select de status */
.admin-status-form .admin-select-wrap {
  position: relative;

  /*
     width:100% com teto de 300px, e NAO width:300px com
     max-width:100% — Fase 10.5.19.

     Os dois parecem a mesma coisa e nao sao. Quando o navegador
     calcula a largura MINIMA que a coluna do grid precisa ter, ele
     usa a largura declarada e IGNORA max-width em porcentagem --
     porcentagem depende do pai, e o pai ainda esta' sendo medido.
     Resultado: a coluna nascia com 300px de minimo e se recusava a
     encolher.

     A conta que explica por que so' quebrava em 390px e nao em 430:

         300 do seletor
        + 56 do padding do card (28 de cada lado)
        + 44 do padding da pagina (22 de cada lado)
        = 400px

     Invertendo os dois, o minimo vira zero e o teto continua em
     300px: mesmo desenho no desktop, sem travar o celular.
  */
  width: 100%;
  max-width: 300px;

  display: inline-block;
}

.admin-status-form .admin-select-wrap::after {
  content: "";
  position: absolute;
  top: 38%;
  right: 24px;
  width: 7px;
  height: 7px;
  border-right: 2px solid #777;
  border-bottom: 2px solid #777;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}

.admin-status-form .admin-select-wrap select {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 58px 0 22px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Painel de separação */
.separation-list {
  display: grid;
  gap: 22px;
}

.separation-card {
  padding: 28px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), #fff);
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.06);
}

.separation-card-header {
  padding-bottom: 20px;
  margin-bottom: 22px;
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: flex-start;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.separation-card-header p,
.separation-block h3,
.separation-items-header h3 {
  font-family: var(--font-title);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #888;
}

.separation-card-header h2 {
  margin-top: 8px;
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #111;
}

.separation-card-header span {
  display: inline-block;
  margin-top: 8px;
  color: #666;
}

.separation-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.separation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.separation-block {
  padding: 20px;
  border-radius: 18px;
  background: #f6f6f3;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.separation-block h3 {
  margin-bottom: 14px;
  color: #777;
}

.separation-block p {
  margin: 7px 0 0;
  color: #444;
  line-height: 1.55;
}

.separation-block strong {
  color: #111;
}

.separation-items {
  margin-top: 20px;
  padding: 20px;
  border-radius: 18px;
  background: #fbfbfa;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.separation-items-header {
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.separation-items-header span {
  color: #666;
}

.separation-table {
  width: 100%;
  border-collapse: collapse;
}

.separation-table th {
  padding: 12px 0;
  text-align: left;
  font-family: var(--font-title);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.separation-table td {
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  color: #333;
}

.separation-table td:nth-child(2),
.separation-table td:nth-child(3),
.separation-table th:nth-child(2),
.separation-table th:nth-child(3) {
  text-align: center;
}

.separation-footer {
  margin-top: 18px;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  color: #555;
}

.separation-footer strong {
  color: #111;
}

@media (max-width: 860px) {
  .separation-card-header,
  .separation-grid {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .separation-card-actions {
    justify-content: flex-start;
  }
}

/* Refinamento do cabeçalho da separação */
.separation-page .admin-heading span {
  position: relative;
  max-width: 560px;
  padding-left: 18px;
  display: block;
  color: #555;
  font-size: 1rem;
  line-height: 1.7;
}

.separation-page .admin-heading span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 3px;
  height: 42px;
  border-radius: 999px;
  background: #111;
  opacity: 0.22;
}

.admin-back-actions {
  margin-top: 34px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-back-actions .admin-back-link {
  margin-top: 0;
}

.admin-back-link-secondary {
  background: transparent;
  color: #111;
  border: 1px solid rgba(0, 0, 0, 0.16);
}

/* Dashboard inicial */
.dashboard-page .admin-heading span {
  max-width: 620px;
}

.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.dashboard-kpi-card {
  min-height: 170px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.045);
}

.dashboard-kpi-card span {
  font-family: var(--font-title);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #888;
}

.dashboard-kpi-card strong {
  margin-top: 22px;
  display: block;
  font-family: var(--font-title);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #111;
}

.dashboard-kpi-card p {
  margin-top: 14px;
  color: #666;
  line-height: 1.5;
}

.dashboard-kpi-card-dark {
  background: radial-gradient(circle at top right, #2c2c2c 0%, #080808 52%);
  color: #fff;
}

.dashboard-kpi-card-dark span,
.dashboard-kpi-card-dark p {
  color: rgba(255, 255, 255, 0.68);
}

.dashboard-kpi-card-dark strong {
  color: #fff;
}

.dashboard-content-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
  gap: 22px;
}

.dashboard-panel {
  padding: 26px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.045);
}

.dashboard-panel-header {
  margin-bottom: 20px;
  padding-bottom: 18px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.dashboard-panel-header p {
  font-family: var(--font-title);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #888;
}

.dashboard-panel-header h2 {
  margin-top: 6px;
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dashboard-panel-header a {
  padding: 10px 14px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-family: var(--font-title);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dashboard-orders-list {
  display: grid;
}

.dashboard-order-row {
  padding: 16px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 18px;
  align-items: center;
  color: #111;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.dashboard-order-row:last-child {
  border-bottom: none;
}

.dashboard-order-row span,
.dashboard-order-row small {
  display: block;
  color: #777;
  font-size: 0.82rem;
}

.dashboard-order-row strong {
  display: block;
  margin-top: 4px;
  color: #111;
}

.dashboard-quick-actions {
  display: grid;
  gap: 12px;
}

.dashboard-quick-actions a {
  padding: 18px;
  display: grid;
  gap: 6px;
  border-radius: 18px;
  background: #f6f6f3;
  color: #111;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, background 0.25s ease;
}

.dashboard-quick-actions a:hover {
  transform: translateY(-2px);
  background: #efefea;
}

.dashboard-quick-actions span {
  font-family: var(--font-title);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
}

.dashboard-quick-actions strong {
  color: #111;
}

.dashboard-empty {
  margin-top: 0;
  box-shadow: none;
}

@media (max-width: 1180px) {
  .dashboard-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .dashboard-kpi-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-order-row {
    grid-template-columns: 1fr;
  }
}

.admin-orders-table th:nth-child(1),
.admin-orders-table td:nth-child(1) {
  width: 16%;
}

.admin-orders-table th:nth-child(2),
.admin-orders-table td:nth-child(2) {
  width: 10%;
}

.admin-orders-table th:nth-child(3),
.admin-orders-table td:nth-child(3) {
  width: 22%;
}

.admin-orders-table th:nth-child(4),
.admin-orders-table td:nth-child(4) {
  width: 20%;
}

.admin-orders-table th:nth-child(5),
.admin-orders-table td:nth-child(5) {
  width: 9%;
}

.admin-orders-table th:nth-child(6),
.admin-orders-table td:nth-child(6) {
  width: 10%;
}

.admin-orders-table th:nth-child(7),
.admin-orders-table td:nth-child(7) {
  width: 12%;
}

.admin-orders-table th:nth-child(8),
.admin-orders-table td:nth-child(8) {
  width: 14%;
  text-align: right;
}

.admin-orders-table th:nth-child(1),
.admin-orders-table td:nth-child(1) {
  width: 16%;
}

.admin-orders-table th:nth-child(2),
.admin-orders-table td:nth-child(2) {
  width: 10%;
}

.admin-orders-table th:nth-child(3),
.admin-orders-table td:nth-child(3) {
  width: 22%;
}

.admin-orders-table th:nth-child(4),
.admin-orders-table td:nth-child(4) {
  width: 20%;
}

.admin-orders-table th:nth-child(5),
.admin-orders-table td:nth-child(5) {
  width: 9%;
}

.admin-orders-table th:nth-child(6),
.admin-orders-table td:nth-child(6) {
  width: 10%;
}

.admin-orders-table th:nth-child(7),
.admin-orders-table td:nth-child(7) {
  width: 12%;
}

.admin-orders-table th:nth-child(8),
.admin-orders-table td:nth-child(8) {
  width: 14%;
  text-align: right;
}

.admin-email-cell {
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.admin-status-cell {
  min-width: 0;
}

.admin-status-with-separator {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-status-separator {
  width: 38px;
  height: 1px;
  display: inline-block;
  flex: 0 0 auto;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.55),
    rgba(0, 0, 0, 0.1)
  );
}

/* Status muito longo: encurta o traço para não invadir a coluna do pagamento */
.admin-status-aguardando_pagamento + .admin-status-separator {
  width: 12px;
}


.admin-orders-table .admin-status {
  white-space: nowrap;
}

/* Ajuste premium da tabela de pedidos */
.admin-orders-table {
  table-layout: fixed;
}

.admin-orders-table th:nth-child(1),
.admin-orders-table td:nth-child(1) {
  width: 16%;
}

.admin-orders-table th:nth-child(2),
.admin-orders-table td:nth-child(2) {
  width: 10%;
}

.admin-orders-table th:nth-child(3),
.admin-orders-table td:nth-child(3) {
  width: 22%;
}

.admin-orders-table th:nth-child(4),
.admin-orders-table td:nth-child(4) {
  width: 20%;
}

.admin-orders-table th:nth-child(5),
.admin-orders-table td:nth-child(5) {
  width: 9%;
}

.admin-orders-table th:nth-child(6),
.admin-orders-table td:nth-child(6) {
  width: 10%;
}

.admin-orders-table th:nth-child(7),
.admin-orders-table td:nth-child(7) {
  width: 12%;
}

.admin-orders-table th:nth-child(8),
.admin-orders-table td:nth-child(8) {
  width: 14%;
  text-align: right;
}

.admin-email-cell {
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.admin-status-cell {
  min-width: 0;
}

.admin-status-with-separator {
  width: 100%;
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  column-gap: 5px;
}

.admin-status-separator {
  width: 48px;
  height: 2px;
  display: block;
  justify-self: center;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.14),
    rgba(0, 0, 0, 0.58),
    rgba(0, 0, 0, 0.14)
  );
}

.admin-orders-table .admin-status {
  white-space: nowrap;
}

/* Admin produtos */
.admin-page-actions {
  margin: -12px 0 28px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-outline-button {
  height: 34px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: transparent;
  color: #111;
  border: 1px solid rgba(0, 0, 0, 0.16);
  font-family: var(--font-title);
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.25s ease, background 0.25s ease;
}

.admin-outline-button:hover {
  transform: translateY(-2px);
  background: #fff;
}

.admin-products-summary {
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.admin-products-summary div {
  padding: 20px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.04);
}

.admin-products-summary span {
  display: block;
  font-family: var(--font-title);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
}

.admin-products-summary strong {
  margin-top: 12px;
  display: block;
  font-family: var(--font-title);
  font-size: 2rem;
  font-weight: 900;
  color: #111;
}

.admin-products-table {
  table-layout: fixed;
}

.admin-products-table th:nth-child(1),
.admin-products-table td:nth-child(1) {
  width: 24%;
}

.admin-products-table th:nth-child(2),
.admin-products-table td:nth-child(2) {
  width: 10%;
}

.admin-products-table th:nth-child(3),
.admin-products-table td:nth-child(3) {
  width: 12%;
}

.admin-products-table th:nth-child(4),
.admin-products-table td:nth-child(4) {
  width: 14%;
}

.admin-products-table th:nth-child(5),
.admin-products-table td:nth-child(5) {
  width: 14%;
}

.admin-products-table th:nth-child(6),
.admin-products-table td:nth-child(6) {
  width: 10%;
}

.admin-products-table th:nth-child(7),
.admin-products-table td:nth-child(7) {
  width: 10%;
}

.admin-products-table th:nth-child(8),
.admin-products-table td:nth-child(8) {
  width: 12%;
  text-align: right;
}

.admin-product-name-cell strong,
.admin-product-price-cell strong,
.admin-stock-cell strong {
  display: block;
  color: #111;
}

.admin-product-name-cell span,
.admin-product-price-cell span,
.admin-stock-cell span {
  margin-top: 5px;
  display: block;
  color: #666;
  font-size: 0.78rem;
  line-height: 1.35;
}

.admin-product-price-cell small,
.admin-featured-label {
  margin-top: 6px;
  width: max-content;
  padding: 5px 8px;
  display: inline-flex;
  border-radius: 999px;
  background: #f4f0e7;
  color: #7a5c22;
  font-family: var(--font-title);
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.admin-featured-label {
  background: #111;
  color: #fff;
}

.admin-product-status-disponivel {
  background: #dff7e8;
  color: #116331;
}

.admin-product-status-em_breve {
  background: #fff3cf;
  color: #7a5400;
}

.admin-product-status-esgotado {
  background: #ffe1e1;
  color: #8a1111;
}

@media (max-width: 1180px) {
  .admin-products-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-products-table {
    min-width: 980px;
  }

  .admin-table-wrapper {
    overflow-x: auto;
  }
}

@media (max-width: 720px) {
  .admin-products-summary {
    grid-template-columns: 1fr;
  }
}

/* Admin estoque */
.admin-stock-page .admin-table-wrapper {
  overflow-x: visible;
  overflow-y: hidden;
}

.admin-stock-summary div:nth-child(3) strong {
  color: #7a5400;
}

.admin-stock-summary div:nth-child(4) strong {
  color: #8a1111;
}

.admin-stock-table {
  width: 100%;
  table-layout: fixed;
  min-width: 0;
}

.admin-stock-table th,
.admin-stock-table td {
  padding-left: 5px;
  padding-right: 5px;
}

.admin-stock-table th:nth-child(1),
.admin-stock-table td:nth-child(1) {
  width: 22%;
}

.admin-stock-table th:nth-child(2),
.admin-stock-table td:nth-child(2) {
  width: 7%;
}

.admin-stock-table th:nth-child(3),
.admin-stock-table td:nth-child(3) {
  width: 9%;
}

.admin-stock-table th:nth-child(4),
.admin-stock-table td:nth-child(4) {
  width: 7%;
  text-align: center;
}

.admin-stock-table th:nth-child(5),
.admin-stock-table td:nth-child(5) {
  width: 11%;
}

.admin-stock-table th:nth-child(6),
.admin-stock-table td:nth-child(6) {
  width: 16%;
  text-align: center;
}

.admin-stock-table th:nth-child(7),
.admin-stock-table td:nth-child(7) {
  width: 8%;
  text-align: center;
}

.admin-stock-table th:nth-child(8),
.admin-stock-table td:nth-child(8) {
  width: 8%;
  text-align: center;
}

.admin-stock-table th:nth-child(9),
.admin-stock-table td:nth-child(9) {
  width: 12%;
  text-align: right;
}

.admin-sku-cell {
  color: #666;
  font-size: 0.74rem;
  word-break: break-word;
}

.admin-stock-alert {
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-family: var(--font-title);
  font-size: 0.46rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-stock-alert-ok {
  background: #dff7e8;
  color: #116331;
}

.admin-stock-alert-low {
  background: #fff3cf;
  color: #7a5400;
}

.admin-stock-alert-empty {
  background: #ffe1e1;
  color: #8a1111;
}

/* Edição manual de estoque */
.admin-stock-update-form {
  width: 100%;
  display: grid;
  grid-template-columns: 54px 58px;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.admin-stock-update-form input {
  width: 54px;
  height: 32px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  color: #111;
  font-family: var(--font-title);
  font-size: 0.74rem;
  font-weight: 900;
  text-align: center;
  outline: none;
}

.admin-stock-update-form input:focus {
  border-color: #bca77a;
  box-shadow: 0 0 0 4px rgba(188, 167, 122, 0.14);
}

.admin-stock-update-form button {
  width: 58px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #111;
  color: #fff;
  cursor: pointer;
  font-family: var(--font-title);
  font-size: 0.43rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.25s ease, background 0.25s ease;
}

.admin-stock-update-form button:hover {
  transform: translateY(-2px);
  background: #000;
}

.admin-stock-store-button {
  width: 58px;
  height: 32px;
  padding: 0;
  font-size: 0.47rem;
}

@media (max-width: 1180px) {
  .admin-stock-page .admin-table-wrapper {
    overflow-x: auto;
  }

  .admin-stock-table {
    min-width: 980px;
  }
}

/* Admin novo produto */
.admin-product-form-page {
  max-width: 1120px;
}

.admin-product-form {
  display: grid;
  gap: 22px;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.55fr);
  gap: 22px;
}

.admin-form-card {
  padding: 28px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), #fff);
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.055);
}

.admin-form-card-header {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.admin-form-card-header p {
  font-family: var(--font-title);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #888;
}

.admin-form-card-header h2 {
  margin-top: 8px;
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #111;
}

.admin-form-card-header span {
  display: block;
  max-width: 520px;
  margin-top: 8px;
  color: #666;
  line-height: 1.55;
}

.admin-form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.admin-form-fields-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-field {
  display: grid;
  gap: 8px;
}

.admin-field-full {
  grid-column: 1 / -1;
}

.admin-field label {
  font-family: var(--font-title);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #777;
}

.admin-field input,
.admin-field select,
.admin-field textarea {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  color: #111;
  font: inherit;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.admin-field input,
.admin-field select {
  height: 48px;
  padding: 0 16px;
  border-radius: 999px;
}

.admin-field textarea {
  min-height: 120px;
  padding: 16px;
  border-radius: 18px;
  resize: vertical;
  line-height: 1.55;
}

.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus {
  border-color: #bca77a;
  box-shadow: 0 0 0 4px rgba(188, 167, 122, 0.14);
}

.admin-form-switches {
  display: grid;
  gap: 12px;
}

.admin-form-switches label {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 18px;
  background: #f6f6f3;
  border: 1px solid rgba(0, 0, 0, 0.06);
  cursor: pointer;
}

.admin-form-switches input {
  width: 16px;
  height: 16px;
  accent-color: #111;
}

.admin-form-switches span {
  font-weight: 700;
  color: #222;
}

.admin-variant-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.admin-variant-row {
  padding: 14px;
  display: grid;
  gap: 10px;
  border-radius: 20px;
  background: #f6f6f3;
  border: 1px solid rgba(0, 0, 0, 0.07);
}

.admin-variant-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #111;
}

.admin-variant-row span {
  font-family: var(--font-title);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #111;
}

.admin-variant-row input[type="number"] {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  text-align: center;
  font-family: var(--font-title);
  font-weight: 900;
  outline: none;
}

.admin-form-footer {
  padding: 22px 26px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  border-radius: 26px;
  background: radial-gradient(circle at top right, #292929 0%, #090909 56%);
  color: #fff;
}

.admin-form-footer strong {
  display: block;
  font-family: var(--font-title);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.admin-form-footer span {
  display: block;
  max-width: 620px;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.5;
}

.admin-form-submit-button {
  height: 44px;
  padding: 0 22px;
  border: none;
  border-radius: 999px;
  background: #fff;
  color: #111;
  cursor: not-allowed;
  opacity: 0.72;
  font-family: var(--font-title);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 1120px) {
  .admin-form-grid,
  .admin-form-fields-four {
    grid-template-columns: 1fr 1fr;
  }

  .admin-variant-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 760px) {
  .admin-form-grid,
  .admin-form-fields,
  .admin-form-fields-four {
    grid-template-columns: 1fr;
  }

  .admin-variant-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-form-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

.admin-form-help {
  grid-column: 1 / -1;
  padding: 18px;
  border-radius: 18px;
  background: #f6f6f3;
  color: #666;
  line-height: 1.5;
}

.admin-form-errors {
  padding: 18px 20px;
  border-radius: 22px;
  background: #fff3f3;
  border: 1px solid rgba(138, 17, 17, 0.18);
  color: #8a1111;
}

.admin-form-errors strong {
  display: block;
  font-family: var(--font-title);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.admin-form-errors ul {
  margin-top: 10px;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.admin-form-submit-button-active {
  cursor: pointer;
  opacity: 1;
}

.admin-form-submit-button-active:hover {
  transform: translateY(-2px);
}

.admin-product-actions-cell {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-small-action-button {
  height: 30px;
  padding: 0 11px;
  font-size: 0.46rem;
}

/* Ajuste fino — ações da tabela de produtos */
.admin-products-table th:nth-child(1),
.admin-products-table td:nth-child(1) {
  width: 23%;
}

.admin-products-table th:nth-child(2),
.admin-products-table td:nth-child(2) {
  width: 9%;
}

.admin-products-table th:nth-child(3),
.admin-products-table td:nth-child(3) {
  width: 11%;
}

.admin-products-table th:nth-child(4),
.admin-products-table td:nth-child(4) {
  width: 13%;
}

.admin-products-table th:nth-child(5),
.admin-products-table td:nth-child(5) {
  width: 13%;
}

.admin-products-table th:nth-child(6),
.admin-products-table td:nth-child(6) {
  width: 10%;
}

.admin-products-table th:nth-child(7),
.admin-products-table td:nth-child(7) {
  width: 9%;
  text-align: center;
}

.admin-products-table th:nth-child(8),
.admin-products-table td:nth-child(8) {
  width: 12%;
  text-align: right;
}

.admin-products-table td:nth-child(7) {
  color: #444;
  font-size: 0.82rem;
  white-space: nowrap;
}

.admin-product-actions-cell {
  min-width: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 7px;
}

.admin-product-actions-cell .admin-small-action-button {
  width: 76px;
  height: 29px;
  padding: 0;
  font-size: 0.44rem;
}

.admin-inline-action-form {
  margin: 0;
  padding: 0;
}

.admin-inline-action-form button {
  font-family: inherit;
  cursor: pointer;
}

.admin-inactive-label {
  width: fit-content;
  display: block;
  margin-top: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f1f1f1;
  color: #777;
  font-family: "Archivo", sans-serif;
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.admin-danger-action-button {
  border-color: rgba(120, 0, 0, 0.18);
  color: #7a1111;
}

.admin-danger-action-button:hover {
  background: #7a1111;
  color: #fff;
  border-color: #7a1111;
}

.admin-success-action-button {
  border-color: rgba(0, 90, 35, 0.18);
  color: #0b6b36;
}

.admin-success-action-button:hover {
  background: #0b6b36;
  color: #fff;
  border-color: #0b6b36;
}

.admin-product-actions-cell {
  min-width: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 7px;
}

/* Admin imagens do produto */
.admin-images-card {
  overflow: hidden;
}

.admin-product-images-empty {
  padding: 22px;
  border-radius: 20px;
  background: #f6f6f3;
  border: 1px dashed rgba(0, 0, 0, 0.16);
}

.admin-product-images-empty strong {
  display: block;
  font-family: var(--font-title);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #111;
}

.admin-product-images-empty p {
  margin-top: 8px;
  max-width: 560px;
  color: #666;
  line-height: 1.6;
}

.admin-product-images-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.admin-product-image-card {
  overflow: hidden;
  border-radius: 22px;
  background: #f6f6f3;
  border: 1px solid rgba(0, 0, 0, 0.07);
}

.admin-product-image-preview {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: radial-gradient(circle at center, #2d2d2d 0%, #050505 62%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-product-image-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.admin-product-image-info {
  padding: 16px;
}

.admin-product-image-info > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.admin-product-image-info strong {
  font-family: var(--font-title);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #111;
}

.admin-product-image-info p {
  margin-top: 10px;
  color: #666;
  font-size: 0.78rem;
  line-height: 1.45;
  word-break: break-all;
}

.admin-primary-image-badge,
.admin-secondary-image-badge {
  padding: 6px 9px;
  border-radius: 999px;
  font-family: var(--font-title);
  font-size: 0.46rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-primary-image-badge {
  background: #111;
  color: #fff;
}

.admin-secondary-image-badge {
  background: #e9e9e5;
  color: #555;
}

.admin-image-open-button {
  width: max-content;
  margin-top: 14px;
  height: 30px;
  padding: 0 12px;
  font-size: 0.48rem;
}

@media (max-width: 980px) {
  .admin-product-images-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .admin-product-images-grid {
    grid-template-columns: 1fr;
  }
}

/* Ajuste final — imagens do produto no admin */
.admin-images-card .admin-product-images-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
  gap: 18px;
  align-items: start;
}

.admin-images-card .admin-product-image-card {
  width: 100%;
  max-width: 260px;
  overflow: hidden;
  border-radius: 22px;
  background: #f6f6f3;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.admin-images-card .admin-product-image-preview {
  width: 100%;
  height: 320px;
  max-height: 320px;
  padding: 12px;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-images-card .admin-product-image-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

.admin-images-card .admin-product-image-info {
  padding: 14px;
}

.admin-images-card .admin-product-image-info p {
  display: none;
}

.admin-images-card .admin-product-image-info {
  padding: 14px 14px 28px;
}

.admin-images-card .admin-image-open-button {
  margin-top: 18px;
  margin-bottom: 16px;
}

/* Admin — gerenciamento de imagens do produto */
.admin-image-create-form {
  margin-bottom: 26px;
  padding: 22px;
  display: grid;
  gap: 18px;
  border-radius: 22px;
  background: #f6f6f3;
  border: 1px solid rgba(0, 0, 0, 0.07);
}

.admin-image-form-fields {
  align-items: end;
}

.admin-image-main-check {
  min-height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

.admin-image-main-check input {
  width: 16px;
  height: 16px;
  accent-color: #111;
}

.admin-image-main-check span {
  font-weight: 800;
  color: #222;
}

.admin-image-actions {
  margin-top: 18px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.admin-image-actions form {
  margin: 0;
}

.admin-image-action-button,
.admin-image-open-button {
  height: 30px;
  padding: 0 11px;
  font-size: 0.46rem;
}

.admin-images-card .admin-product-image-info {
  padding: 14px 14px 24px;
}

/* Fase 9.8 — edição de imagens no admin */
.admin-image-edit-form {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.admin-image-edit-form label {
  display: grid;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
}

.admin-image-edit-form input,
.admin-image-edit-form select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  color: #111;
  font-size: 0.8rem;
  outline: none;
}

.admin-image-edit-row {
  display: grid;
  grid-template-columns: 0.65fr 1fr;
  gap: 10px;
}

.admin-image-save-button {
  width: max-content;
  height: 34px;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  background: #111;
  color: #fff;
  cursor: pointer;
  font-family: var(--font-title);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.admin-image-save-button:hover {
  background: #000;
}

/* Fase 9.8.2 — visual dos cards de imagem */

.admin-product-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.admin-product-image-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 28px;
  background: #f7f6f3;
  min-height: 100%;
}

.admin-product-image-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 24px;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.admin-product-image-preview img {
  max-width: 100%;
  max-height: 240px;
  object-fit: contain;
  display: block;
}

.admin-product-image-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

.admin-product-image-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-product-image-topbar h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #111;
}

.admin-image-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.admin-image-badge-main {
  background: #111;
  color: #fff;
}

.admin-image-badge-secondary {
  background: #e7e3dc;
  color: #444;
}

.admin-image-edit-form {
  display: grid;
  gap: 12px;
}

.admin-image-edit-form label {
  display: grid;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a5a5a;
}

.admin-image-edit-form input,
.admin-image-edit-form select {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  color: #111;
  font-size: 0.85rem;
  outline: none;
}

.admin-image-edit-row {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: 12px;
}

.admin-image-save-button {
  width: fit-content;
  min-width: 140px;
  height: 38px;
  padding: 0 18px;
  border: none;
  border-radius: 999px;
  background: #111;
  color: #fff;
  cursor: pointer;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.admin-image-save-button:hover {
  background: #000;
}

.admin-product-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.admin-danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #d9b3b3;
  background: #fff;
  color: #a33;
  cursor: pointer;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.admin-danger-button:hover {
  background: #fff5f5;
}

@media (max-width: 640px) {
  .admin-image-edit-row {
    grid-template-columns: 1fr;
  }

  .admin-product-image-topbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Ajuste fino — ações dos cards de imagem no admin */
.admin-product-image-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-product-image-actions form {
  margin: 0;
  padding: 0;
  display: inline-flex;
}

.admin-product-image-actions .admin-small-action-button {
  min-width: 74px;
  height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 0.5rem;
}

.admin-product-image-actions .admin-danger-button {
  min-width: 82px;
  height: 32px;
  padding: 0 12px;
}

/* Fase 9.8.3 — padrão Frente/Costas no admin */
.admin-image-role-label {
  margin-top: 6px;
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eeeae2;
  color: #5f574b;
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.admin-product-image-topbar > div {
  display: grid;
  gap: 4px;
}

.admin-image-pattern-help {
  padding: 16px 18px;
  display: grid;
  gap: 6px;
  border-radius: 18px;
  background: #fff;
  border: 1px dashed rgba(0, 0, 0, 0.16);
}

.admin-image-pattern-help strong {
  font-family: var(--font-title);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #111;
}

.admin-image-pattern-help span {
  color: #666;
  line-height: 1.6;
  font-size: 0.88rem;
}

.admin-image-pattern-help b {
  color: #111;
}

/* Fase 9.9.3 — estoque agrupado premium */
.admin-stock-page {
  max-width: 1240px;
}

.admin-stock-page .admin-heading {
  max-width: 720px;
}

.admin-stock-summary {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.admin-stock-summary div {
  min-height: 92px;
}

.admin-stock-summary div:nth-child(5) strong {
  color: #7a5400;
}

.admin-stock-summary div:nth-child(6) strong {
  color: #8a1111;
}

.admin-stock-groups {
  margin-top: 30px;
  display: grid;
  gap: 22px;
}

.admin-stock-category-group {
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffff 0%, #faf9f6 100%);
  border: 1px solid rgba(0, 0, 0, 0.075);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.055);
  overflow: hidden;
}

.admin-stock-category-summary {
  padding: 24px 26px;
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: center;
  cursor: pointer;
  list-style: none;
  background:
    radial-gradient(circle at top right, rgba(0, 0, 0, 0.055), transparent 34%),
    #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.admin-stock-category-summary::-webkit-details-marker {
  display: none;
}

.admin-stock-category-summary::before {
  content: "+";
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 900;
}

.admin-stock-category-group[open] .admin-stock-category-summary::before {
  content: "−";
}

.admin-stock-category-summary > div:first-of-type {
  margin-right: auto;
}

.admin-stock-category-summary span {
  display: block;
  font-family: var(--font-title);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #888;
}

.admin-stock-category-summary strong {
  display: block;
  margin-top: 6px;
  font-family: var(--font-title);
  font-size: clamp(1.35rem, 2.4vw, 2.1rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #111;
}

.admin-stock-category-meta {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.admin-stock-category-meta span {
  min-height: 30px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #f0eee8;
  color: #555;
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.admin-stock-mini-alert {
  font-family: var(--font-title);
}

.admin-stock-mini-alert-low {
  background: #fff3cf !important;
  color: #7a5400 !important;
}

.admin-stock-mini-alert-empty {
  background: #ffe1e1 !important;
  color: #8a1111 !important;
}

.admin-stock-products-list {
  padding: 24px;
  display: grid;
  gap: 22px;
}

.admin-stock-product-card {
  padding: 22px;
  border-radius: 24px;
  background: #f6f6f3;
  border: 1px solid rgba(0, 0, 0, 0.065);
}

.admin-stock-product-header {
  margin-bottom: 18px;
  padding-bottom: 18px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.admin-stock-product-header p {
  margin: 0 0 8px;
  font-family: var(--font-title);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #888;
}

.admin-stock-product-header h2 {
  margin: 0;
  max-width: 680px;
  font-family: var(--font-title);
  font-size: clamp(1.15rem, 2vw, 1.8rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111;
}

.admin-stock-product-header span {
  display: block;
  margin-top: 8px;
  color: #666;
  font-size: 0.9rem;
}

.admin-stock-product-header span strong {
  color: #111;
}

.admin-stock-product-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.admin-stock-product-meta > span {
  min-height: 30px;
  margin-top: 0;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #fff;
  color: #555;
  font-family: var(--font-title);
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-stock-product-inactive {
  background: #ffe1e1 !important;
  color: #8a1111 !important;
}

.admin-stock-view-product {
  height: 30px;
  padding: 0 12px;
  font-size: 0.5rem;
}

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

.admin-stock-variant-card {
  min-height: 190px;
  padding: 16px;
  display: grid;
  gap: 12px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.065);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.035);
}

.admin-stock-variant-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.admin-stock-variant-top > strong {
  width: 46px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-family: var(--font-title);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.admin-stock-variant-info {
  display: grid;
  gap: 4px;
}

.admin-stock-variant-info span,
.admin-stock-update-form-card label {
  font-family: var(--font-title);
  font-size: 0.54rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #888;
}

.admin-stock-variant-info p {
  margin: 0;
  color: #222;
  font-size: 0.84rem;
  line-height: 1.35;
  word-break: break-word;
}

.admin-stock-update-form-card {
  width: 100%;
  margin-top: 4px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
}

.admin-stock-update-form-card label {
  display: grid;
  gap: 6px;
}

.admin-stock-update-form-card input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #f8f8f5;
  color: #111;
  font-family: var(--font-title);
  font-size: 0.82rem;
  font-weight: 900;
  text-align: center;
  outline: none;
}

.admin-stock-update-form-card input:focus {
  border-color: #111;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08);
}

.admin-stock-update-form-card button {
  width: 72px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #111;
  color: #fff;
  cursor: pointer;
  font-family: var(--font-title);
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-stock-update-form-card button:hover {
  background: #000;
  transform: translateY(-1px);
}

@media (max-width: 1180px) {
  .admin-stock-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-stock-category-summary,
  .admin-stock-product-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-stock-category-meta,
  .admin-stock-product-meta {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .admin-stock-summary {
    grid-template-columns: 1fr 1fr;
  }

  .admin-stock-category-summary {
    padding: 20px;
  }

  .admin-stock-products-list {
    padding: 18px;
  }

  .admin-stock-product-card {
    padding: 18px;
  }

  .admin-stock-variants-grid {
    grid-template-columns: 1fr;
  }
}

/* Fase 10.0.2.1.3 — produtos por categoria premium */
.admin-products-page {
  max-width: 1240px;
}

.admin-products-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
  margin-bottom: 34px;
}

.admin-products-summary > div {
  min-height: 98px;
  padding: 22px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.06);
}

.admin-products-summary span {
  display: block;
  margin-bottom: 12px;
  color: #777;
  font-family: var(--font-title);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.admin-products-summary strong {
  color: #050505;
  font-size: 2rem;
  line-height: 1;
}

.admin-products-groups {
  display: grid;
  gap: 18px;
  margin-top: 8px;
}

.admin-products-category-group {
  border-radius: 26px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.07);
  overflow: hidden;
}

.admin-products-category-group summary {
  list-style: none;
}

.admin-products-category-group summary::-webkit-details-marker {
  display: none;
}

.admin-products-category-summary {
  min-height: 94px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  cursor: pointer;
  background:
    radial-gradient(circle at top right, rgba(0, 0, 0, 0.055), transparent 36%),
    #fff;
  transition: background 0.25s ease;
}

.admin-products-category-summary:hover {
  background:
    radial-gradient(circle at top right, rgba(0, 0, 0, 0.08), transparent 38%),
    #fff;
}

.admin-products-category-summary > div:first-child span {
  display: block;
  margin-bottom: 8px;
  color: #777;
  font-family: var(--font-title);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.admin-products-category-summary > div:first-child strong {
  color: #050505;
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-products-category-summary::after {
  content: "+";
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #050505;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
  transition: transform 0.25s ease;
  margin-left: auto;
}

.admin-products-category-group[open] .admin-products-category-summary::after {
  content: "−";
  transform: rotate(180deg);
}

.admin-products-category-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: 14px;
  flex: 1;
}

.admin-products-category-meta small {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.055);
  color: #333;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

.admin-products-category-content {
  padding: 0 28px 28px;
}

.admin-products-category-stats {
  padding-top: 22px;
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.admin-products-category-stats > div {
  padding: 16px;
  border-radius: 18px;
  background: #f5f5f3;
}

.admin-products-category-stats span {
  display: block;
  margin-bottom: 8px;
  color: #777;
  font-family: var(--font-title);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.admin-products-category-stats strong {
  color: #050505;
  font-size: 1.5rem;
}

.admin-products-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.admin-product-card {
  padding: 22px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 246, 243, 0.98));
  border: 1px solid rgba(0, 0, 0, 0.065);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.055);
}

.admin-product-card-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.admin-product-card-header p {
  margin-bottom: 8px;
  color: #777;
  font-family: var(--font-title);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.admin-product-card-header h2 {
  margin-bottom: 9px;
  color: #050505;
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.25;
}

.admin-product-card-header span {
  color: #777;
  font-size: 0.84rem;
}

.admin-product-card-statuses {
  display: grid;
  justify-items: end;
  gap: 8px;
  flex: 0 0 auto;
}

.admin-product-card-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.admin-product-card-info-grid > div {
  min-height: 100px;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.055);
}

.admin-product-card-info-grid span {
  display: block;
  margin-bottom: 9px;
  color: #777;
  font-family: var(--font-title);
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.admin-product-card-info-grid strong {
  display: block;
  margin-bottom: 6px;
  color: #050505;
  font-size: 1rem;
  line-height: 1.25;
}

.admin-product-card-info-grid small {
  display: block;
  color: #777;
  font-size: 0.76rem;
  line-height: 1.45;
}

.admin-product-card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.admin-product-card-actions .admin-inline-action-form {
  margin: 0;
}

.admin-product-card-actions .admin-small-action-button {
  min-height: 38px;
  padding: 0 16px;
}

@media (max-width: 1180px) {
  .admin-products-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-products-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .admin-products-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-products-category-summary {
    padding: 22px;
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-products-category-summary::after {
    position: absolute;
    right: 22px;
    top: 22px;
  }

  .admin-products-category-group {
    position: relative;
  }

  .admin-products-category-meta {
    justify-content: flex-start;
    padding-right: 46px;
  }

  .admin-products-category-content {
    padding: 0 18px 22px;
  }

  .admin-products-category-stats {
    grid-template-columns: 1fr;
  }

  .admin-product-card {
    padding: 18px;
  }

  .admin-product-card-header {
    flex-direction: column;
  }

  .admin-product-card-statuses {
    justify-items: start;
  }

  .admin-product-card-info-grid {
    grid-template-columns: 1fr;
  }

  .admin-product-card-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .admin-product-card-actions .admin-small-action-button,
  .admin-product-card-actions form,
  .admin-product-card-actions button {
    width: 100%;
  }
}

/* Fase 10.0.2.2.3 — separação premium */
.separation-page {
  max-width: 1240px;
}

.separation-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
  margin-bottom: 34px;
}

.separation-summary > div {
  min-height: 98px;
  padding: 22px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.06);
}

.separation-summary span {
  display: block;
  margin-bottom: 12px;
  color: #777;
  font-family: var(--font-title);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.separation-summary strong {
  color: #050505;
  font-size: 2rem;
  line-height: 1;
}

.separation-accordion-list {
  display: grid;
  gap: 18px;
}

.separation-accordion-card {
  border-radius: 26px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.07);
  overflow: hidden;
}

.separation-accordion-card summary {
  list-style: none;
}

.separation-accordion-card summary::-webkit-details-marker {
  display: none;
}

.separation-accordion-summary {
  min-height: 108px;
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 1.1fr 1.35fr 1.4fr 42px;
  align-items: center;
  gap: 22px;
  cursor: pointer;
  background:
    radial-gradient(circle at top right, rgba(0, 0, 0, 0.055), transparent 38%),
    #fff;
  transition: background 0.25s ease;
}

.separation-accordion-summary:hover {
  background:
    radial-gradient(circle at top right, rgba(0, 0, 0, 0.08), transparent 38%),
    #fff;
}

.separation-accordion-summary::after {
  content: "+";
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #050505;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
  transition: transform 0.25s ease;
  justify-self: end;
}

.separation-accordion-card[open] .separation-accordion-summary::after {
  content: "−";
  transform: rotate(180deg);
}

.separation-summary-main span,
.separation-summary-customer span {
  display: block;
  margin-bottom: 8px;
  color: #777;
  font-family: var(--font-title);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.separation-summary-main strong,
.separation-summary-customer strong {
  display: block;
  margin-bottom: 7px;
  color: #050505;
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.25;
}

.separation-summary-main small,
.separation-summary-customer small {
  color: #777;
  font-size: 0.78rem;
  line-height: 1.45;
}

.separation-summary-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.separation-summary-meta small {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.055);
  color: #333;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

.separation-accordion-content {
  padding: 0 28px 28px;
}

.separation-detail-grid {
  padding-top: 22px;
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.separation-detail-block,
.separation-items-card,
.separation-footer {
  padding: 22px;
  border-radius: 24px;
  background: #f5f5f3;
  border: 1px solid rgba(0, 0, 0, 0.045);
}

.separation-detail-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.separation-detail-heading span,
.separation-items-header span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #050505;
  color: #fff;
  font-family: var(--font-title);
  font-size: 0.62rem;
  font-weight: 900;
}

.separation-detail-heading h3,
.separation-items-header h3 {
  color: #050505;
  font-family: var(--font-title);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.separation-detail-block p {
  margin-bottom: 8px;
  color: #555;
  font-size: 0.9rem;
  line-height: 1.6;
}

.separation-detail-block p:last-child {
  margin-bottom: 0;
}

.separation-detail-block strong {
  color: #050505;
}

.separation-items-card {
  margin-bottom: 22px;
  background: #fff;
}

.separation-items-header {
  margin-bottom: 18px;
  padding-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.separation-items-header > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.separation-items-header strong {
  color: #050505;
  font-size: 0.86rem;
  white-space: nowrap;
}

.separation-items-list {
  display: grid;
  gap: 10px;
}

.separation-item-row {
  min-height: 74px;
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 110px 80px;
  align-items: center;
  gap: 16px;
  border-radius: 18px;
  background: #f5f5f3;
  border: 1px solid rgba(0, 0, 0, 0.045);
}

.separation-item-row span {
  display: block;
  margin-bottom: 6px;
  color: #777;
  font-family: var(--font-title);
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.separation-item-row strong {
  color: #050505;
  font-size: 0.94rem;
  line-height: 1.35;
}

.separation-footer {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 16px;
  background: #050505;
  color: #fff;
}

.separation-footer span {
  display: block;
  margin-bottom: 7px;
  color: rgba(255, 255, 255, 0.58);
  font-family: var(--font-title);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.separation-footer strong {
  color: #fff;
  font-size: 1rem;
}

.separation-footer .admin-link-button {
  background: #fff;
  color: #050505;
}

@media (max-width: 1180px) {
  .separation-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .separation-accordion-summary {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .separation-accordion-summary::after {
    position: absolute;
    right: 24px;
    top: 24px;
  }

  .separation-accordion-card {
    position: relative;
  }

  .separation-summary-meta {
    justify-content: flex-start;
    padding-right: 52px;
  }
}

@media (max-width: 720px) {
  .separation-summary {
    grid-template-columns: 1fr;
  }

  .separation-accordion-summary {
    padding: 22px;
    gap: 16px;
  }

  .separation-accordion-content {
    padding: 0 18px 22px;
  }

  .separation-detail-grid {
    grid-template-columns: 1fr;
  }

  .separation-items-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .separation-item-row {
    grid-template-columns: 1fr;
  }

  .separation-footer {
    grid-template-columns: 1fr;
  }

  .separation-footer .admin-link-button {
    width: 100%;
    justify-content: center;
  }
}

/* Fase 10.0.2.3 — interesses premium */
.admin-interests-page {
  max-width: 1120px;
}

.admin-interests-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 260px));
  gap: 16px;
  margin-top: 28px;
  margin-bottom: 28px;
}

.admin-interests-summary > div {
  min-height: 98px;
  padding: 22px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.06);
}

.admin-interests-summary span {
  display: block;
  margin-bottom: 12px;
  color: #777;
  font-family: var(--font-title);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.admin-interests-summary strong {
  color: #050505;
  font-size: 2rem;
  line-height: 1;
}

.admin-interests-card {
  padding: 28px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.07);
}

.admin-interests-list {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.admin-interest-item {
  padding: 20px;
  display: grid;
  grid-template-columns: 1.05fr 1.25fr 1.6fr;
  align-items: center;
  gap: 22px;
  border-radius: 22px;
  background: #f5f5f3;
  border: 1px solid rgba(0, 0, 0, 0.045);
}

.admin-interest-client span,
.admin-interest-product span,
.admin-interest-meta span {
  display: block;
  margin-bottom: 7px;
  color: #777;
  font-family: var(--font-title);
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.admin-interest-client strong,
.admin-interest-product strong,
.admin-interest-meta strong {
  display: block;
  color: #050505;
  font-size: 0.94rem;
  line-height: 1.35;
}

.admin-interest-client small {
  display: block;
  margin-top: 6px;
  color: #777;
  font-size: 0.8rem;
  word-break: break-word;
}

.admin-interest-product strong {
  max-width: 360px;
}

.admin-interest-meta {
  display: grid;
  grid-template-columns: 0.7fr 0.8fr 0.8fr 1fr;
  gap: 12px;
  align-items: center;
}

.admin-interest-meta > div {
  min-height: 66px;
  padding: 13px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.045);
}

.admin-interest-meta .admin-status {
  display: inline-flex;
  width: fit-content;
}

@media (max-width: 1180px) {
  .admin-interest-item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .admin-interest-product strong {
    max-width: 100%;
  }
}

@media (max-width: 720px) {
  .admin-interests-summary {
    grid-template-columns: 1fr;
  }

  .admin-interests-card {
    padding: 20px;
  }

  .admin-interest-item {
    padding: 18px;
  }

  .admin-interest-meta {
    grid-template-columns: 1fr;
  }
}

/* Ajuste fino — interesses com cores longas */
.admin-interest-meta {
  grid-template-columns: minmax(150px, 1.3fr) 90px 90px 130px;
}

.admin-interest-meta > div {
  min-height: 72px;
}

.admin-interest-meta > div:first-child strong {
  max-width: 150px;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.35;
}

.admin-interest-item {
  grid-template-columns: 1fr 1.15fr 1.7fr;
}

/* Fase 10.2.4.4 — seção premium de cores do produto */
.admin-product-colors-section {
  margin-top: 28px;
  overflow: hidden;
}

.admin-color-create-form {
  margin-top: 28px;
  padding: 24px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(184, 167, 122, 0.11), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-color-form-fields {
  /* 5 colunas desde a 10.5.17: nome, slug, hex, cores da arte, ordem.
     "Cores da arte" recebe folga porque cabe ate 4 hexes com virgula. */
  grid-template-columns: 1.2fr 1fr 0.75fr 1.3fr 0.55fr;
}

.admin-color-create-options {
  margin-top: 18px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.admin-color-create-options label,
.admin-color-active-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.86rem;
  cursor: pointer;
}

.admin-color-create-options input,
.admin-color-active-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-gold);
}

.admin-product-colors-empty {
  margin-top: 24px;
  padding: 24px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px dashed rgba(255, 255, 255, 0.14);
}

.admin-product-colors-empty strong {
  display: block;
  margin-bottom: 8px;
  color: #fff;
  font-family: var(--font-title);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.admin-product-colors-empty p {
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.6;
}

.admin-product-colors-list {
  margin-top: 28px;
  display: grid;
  gap: 18px;
}

.admin-product-color-card {
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(200px, 0.7fr) minmax(160px, 0.45fr) minmax(0, 1.8fr) auto;
  align-items: center;
  gap: 20px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)),
    #101010;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.22);
}

.admin-product-color-preview {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.admin-product-color-swatch {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: block;
  border-radius: 999px;
  background: #d9d9d9;
  border: 2px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.14),
    0 12px 26px rgba(0, 0, 0, 0.28);
}

/* Usa o HEX vindo do data-color sem inline style */
.admin-product-color-swatch[data-color="#050505"] {
  background: #050505;
}

.admin-product-color-swatch[data-color="#000000"] {
  background: #000000;
}

.admin-product-color-swatch[data-color="#ffffff"],
.admin-product-color-swatch[data-color="#fff"] {
  background: #ffffff;
}

.admin-product-color-swatch[data-color="#d9d9d9"] {
  background: #d9d9d9;
}

.admin-product-color-preview h4 {
  margin-bottom: 6px;
  color: #fff;
  font-family: var(--font-title);
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
}

.admin-product-color-preview p {
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.8rem;
  line-height: 1.4;
  word-break: break-word;
}

.admin-product-color-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-color-edit-form {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.admin-color-edit-grid {
  display: grid;
  /*
     Cinco campos (nome, slug, hex, cores da arte, ordem) dentro de uma
     coluna estreita do card. Colunas fixas espremem: "#000008" vira
     "#000" e a Ordem some.

     auto-fit + minmax dao um piso de largura a cada campo e deixam a
     linha quebrar quando nao couber. Melhor duas fileiras legiveis do
     que uma fileira ilegivel.
  */
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 10px 12px;
}

.admin-color-edit-grid > * {
  min-width: 0;
}

.admin-color-edit-grid label {
  display: grid;
  gap: 8px;
  color: rgba(255, 255, 255, 0.48);
  font-family: var(--font-title);
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.admin-color-edit-grid input {
  width: 100%;
  min-height: 42px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  outline: none;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-size: 0.82rem;
}

.admin-color-edit-grid input:focus {
  border-color: rgba(184, 167, 122, 0.72);
  box-shadow: 0 0 0 3px rgba(184, 167, 122, 0.12);
}

.admin-color-active-check {
  width: max-content;
  max-width: 100%;
}

.admin-product-color-actions {
  display: grid;
  justify-items: stretch;
  gap: 10px;
}

.admin-product-color-actions form {
  width: 100%;
}

.admin-product-color-actions button {
  width: 100%;
  justify-content: center;
}

.admin-product-color-actions .admin-danger-action-button {
  color: #ffb7b7;
  border-color: rgba(255, 90, 90, 0.32);
}

.admin-product-color-actions .admin-danger-action-button:hover {
  background: rgba(255, 80, 80, 0.1);
}

@media (max-width: 1280px) {
  .admin-product-color-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .admin-product-color-actions {
    display: flex;
    flex-wrap: wrap;
  }

  .admin-product-color-actions form {
    width: auto;
  }

  .admin-product-color-actions button {
    width: auto;
  }
}

@media (max-width: 860px) {
  .admin-color-form-fields,
  .admin-color-edit-grid {
    grid-template-columns: 1fr;
  }

  .admin-color-create-form,
  .admin-product-color-card {
    padding: 18px;
    border-radius: 20px;
  }

  .admin-product-color-actions {
    display: grid;
  }

  .admin-product-color-actions form,
  .admin-product-color-actions button {
    width: 100%;
  }
}

/* Ajuste visual dos checkboxes da seção de cores */
.admin-color-create-options label,
.admin-color-active-check {
  color: #2f2f2f;
  font-weight: 700;
}

.admin-product-color-card .admin-color-active-check {
  color: rgba(255, 255, 255, 0.82);
}

.admin-color-create-options span,
.admin-color-active-check span {
  opacity: 1;
}

.admin-color-create-options input[type="checkbox"],
.admin-color-active-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  accent-color: #b8a77a;
  cursor: pointer;
}

/* Fase 10.2.5 — estoque agrupado por cor + tamanho */
.admin-stock-color-groups {
  margin-top: 22px;
  display: grid;
  gap: 18px;
}

.admin-stock-color-group {
  padding: 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-stock-color-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-stock-color-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-stock-color-swatch {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: block;
  border-radius: 999px;
  background: #d9d9d9;
  border: 2px solid rgba(255, 255, 255, 0.24);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.18),
    0 12px 28px rgba(0, 0, 0, 0.28);
}

.admin-stock-color-title p {
  margin: 0 0 4px;
  color: rgba(255, 255, 255, 0.42);
  font-family: var(--font-title);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.admin-stock-color-title h3 {
  margin: 0;
  color: #fff;
  font-family: var(--font-title);
  font-size: 0.98rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.admin-stock-color-badges,
.admin-stock-color-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-stock-color-badges {
  margin-top: 10px;
}

.admin-stock-color-meta {
  justify-content: flex-end;
}

.admin-stock-color-meta > span:not(.admin-stock-mini-alert) {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.75rem;
  font-weight: 800;
}

@media (max-width: 860px) {
  .admin-stock-color-header {
    flex-direction: column;
  }

  .admin-stock-color-meta {
    justify-content: flex-start;
  }
}

/* Ajuste visual do cabeçalho da cor no estoque */
.admin-stock-color-title p {
  color: #8a8a8a;
}

.admin-stock-color-title h3 {
  color: #111;
}

.admin-stock-color-meta > span:not(.admin-stock-mini-alert) {
  background: rgba(0, 0, 0, 0.04);
  color: #4a4a4a;
}

.admin-stock-color-group {
  background: rgba(0, 0, 0, 0.018);
  border-color: rgba(0, 0, 0, 0.06);
}

.admin-stock-color-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* Fase 10.3.3 — detalhes de pagamento, fiscal e envio */
.admin-operational-details-grid {
  margin-top: 28px;
}

.admin-operational-card {
  margin-top: 28px;
}

.admin-operational-card .admin-detail-list strong {
  word-break: break-word;
}

.admin-breakable-text {
  word-break: break-all;
  line-height: 1.5;
}

.admin-shipping-detail-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.admin-shipping-detail-list > div {
  min-width: 0;

  /* ================================================================
     "Nao / info / rma / do" — o defeito da coluna de 140px
     Corrigido em 13/09/2026

     O CARD APARECIA ASSIM, EM TELA LARGA:

         METODO   prop      TRANSPORTADORA   Nao
                  ria                        defi
                                             nido

     Cada valor quebrando letra a letra, numa coluna com tres
     caracteres de largura.

     A CONTA QUE EXPLICA
     ----------------------------------------------------------------
     A regra geral .admin-detail-list div poe rotulo e valor LADO A
     LADO, com o rotulo numa coluna FIXA de 140px:

         grid-template-columns: 140px 1fr;
         gap: 18px;

     Isso funciona nos outros cards, onde cada linha ocupa a largura
     inteira. Aqui nao: .admin-shipping-detail-list divide o card em
     CINCO colunas. Num card de ~1060px, cada coluna fica com ~195px,
     e a conta que sobra para o valor e':

         195 - 140 (rotulo) - 18 (gap) = 37px

     Trinta e sete pixels. Nenhuma palavra do portugues cabe ali, e o
     navegador faz a unica coisa que pode: quebra dentro da palavra.

     Repare que nao ha' nada de errado com as duas regras isoladas. O
     defeito nasce do ENCONTRO delas -- uma largura fixa herdada de um
     layout de uma coluna, dentro de um layout de cinco. E por isso
     ele nao aparecia em 390px nem em 430px: abaixo de 720px a lista
     vira coluna unica e o valor volta a ter espaco. O defeito morava
     justamente na tela grande, onde ninguem procura.

     A CORRECAO, E POR QUE ELA GANHA
     ----------------------------------------------------------------
     Aqui o rotulo vai EM CIMA do valor, e o valor usa a coluna
     inteira. Nao ha' mais largura fixa disputando espaco.

     .admin-shipping-detail-list > div tem especificidade (0,2,0) --
     duas classes. A regra geral .admin-detail-list div tem (0,1,1) --
     uma classe e um elemento. Classe vale mais que elemento, entao
     esta ganha sem precisar de !important.
  ================================================================ */
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 6px;
}

/*
   O valor precisa poder quebrar entre PALAVRAS, mas nunca dentro
   delas. overflow-wrap: anywhere entraria em acao so' se uma palavra
   sozinha ja' fosse maior que a coluna -- caso de codigo de rastreio
   longo de transportadora estrangeira, nao de "Nao informado".
*/
.admin-shipping-detail-list > div > strong {
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.admin-operational-card a {
  color: #111;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 900;
}

@media (max-width: 1180px) {
  .admin-shipping-detail-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .admin-shipping-detail-list {
    grid-template-columns: 1fr;
  }
}

.admin-status-faturado,
.admin-status.admin-status-faturado {
  background: #e9f3ff;
  color: #165ea8;
  border-color: rgba(22, 94, 168, 0.18);
}

/* Fase 10.3.4 — histórico de status do pedido */
.admin-status-history-card {
  margin-top: 28px;
}

.admin-status-history-list {
  display: grid;
  gap: 14px;
}

.admin-status-history-item {
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 14px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid rgba(0, 0, 0, 0.07);
}

.admin-status-history-item div {
  min-width: 0;
}

.admin-status-history-item span:not(.admin-status) {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-title);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #888;
}

.admin-status-history-item strong {
  display: block;
  color: #111;
  font-size: 0.92rem;
  word-break: break-word;
}

.admin-status-history-item p {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  color: #666;
  line-height: 1.6;
}

.admin-status-history-empty {
  margin-top: 14px;
  padding: 22px;
}

@media (max-width: 980px) {
  .admin-status-history-item {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .admin-status-history-item {
    grid-template-columns: 1fr;
  }
}

.admin-bling-card {
  margin-top: 24px;
}

.admin-bling-actions {
  margin-top: 18px;
}

.admin-alert {
  margin: 16px 0;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 600;
}

.admin-alert-success {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.admin-muted {
  margin-top: 16px;
  opacity: 0.75;
  font-size: 0.92rem;
}

.admin-bling-action-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.admin-bling-actions {
  margin: 0;
}

.admin-secondary-action-button {
  border: 1px solid rgba(0, 0, 0, 0.16);
  background: #fff;
  color: #111;
  border-radius: 999px;
  padding: 11px 18px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.admin-secondary-action-button:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 0, 0, 0.35);
  background: rgba(0, 0, 0, 0.04);
}

.admin-alert-warning {
  background: rgba(245, 158, 11, 0.13);
  border: 1px solid rgba(245, 158, 11, 0.32);
  color: #92400e;
}

.admin-alert-danger {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.32);
  color: #991b1b;
}

.admin-alert a {
  display: inline-block;
  margin-left: 8px;
  color: inherit;
  font-weight: 900;
  text-decoration: underline;
}

.admin-fiscal-section {
  margin-top: 28px;
}

.admin-form-group small {
  display: block;
  margin-top: 6px;
  color: rgba(0, 0, 0, 0.55);
  font-size: 0.78rem;
  line-height: 1.4;
}

.admin-fiscal-warning {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #92400e;
  font-size: 0.9rem;
  line-height: 1.5;
}

.admin-fiscal-section {
  margin-top: 0;
}

.admin-fiscal-section .admin-form-fields + .admin-form-fields {
  margin-top: 18px;
}

.admin-form-fields-five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-field small {
  display: block;
  margin-top: 2px;
  color: rgba(0, 0, 0, 0.55);
  font-size: 0.76rem;
  line-height: 1.4;
}

.admin-fiscal-warning {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #92400e;
  font-size: 0.9rem;
  line-height: 1.5;
}

.admin-fiscal-warning strong {
  font-weight: 900;
}

@media (max-width: 1120px) {
  .admin-form-fields-five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .admin-form-fields-five {
    grid-template-columns: 1fr;
  }
}

.fiscal-checklist-card {
  display: grid;
  gap: 18px;
}

.fiscal-checklist-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.fiscal-checklist-status.is-ready {
  background: rgba(22, 163, 74, 0.12);
  color: #166534;
}

.fiscal-checklist-status.has-pending {
  background: rgba(234, 179, 8, 0.16);
  color: #854d0e;
}

.fiscal-checklist-status.is-neutral {
  background: rgba(100, 116, 139, 0.14);
  color: #334155;
}

.fiscal-checklist-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.fiscal-check-item {
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 18px;
  padding: 14px;
  display: grid;
  gap: 6px;
  background: rgba(255, 255, 255, 0.72);
}

.fiscal-check-item strong {
  font-size: 0.86rem;
  color: #111827;
}

.fiscal-check-item span {
  font-size: 0.95rem;
  font-weight: 700;
}

.fiscal-check-item small {
  color: #64748b;
  font-size: 0.76rem;
}

.fiscal-check-item.is-ok {
  border-color: rgba(22, 163, 74, 0.28);
}

.fiscal-check-item.is-missing {
  border-color: rgba(234, 179, 8, 0.45);
}

.fiscal-checklist-section {
  border-radius: 18px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
}

.fiscal-checklist-section h3 {
  margin: 0 0 10px;
  font-size: 0.95rem;
}

.fiscal-checklist-section ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.fiscal-checklist-section p {
  margin: 0;
  color: #475569;
}

.fiscal-checklist-section.is-required {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.22);
}

.fiscal-checklist-section.is-warning {
  background: rgba(234, 179, 8, 0.08);
  border-color: rgba(234, 179, 8, 0.25);
}

.fiscal-checklist-section.is-ok {
  background: rgba(22, 163, 74, 0.07);
  border-color: rgba(22, 163, 74, 0.22);
}

@media (max-width: 720px) {
  .fiscal-checklist-grid {
    grid-template-columns: 1fr;
  }

  .fiscal-checklist-status {
    width: 100%;
  }
}

/* Ajustes finos do checklist fiscal dentro da tela de detalhes do pedido */
.fiscal-checklist-card .admin-card-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: flex-start;
}

.fiscal-checklist-card .admin-card-header p {
  max-width: 100%;
  line-height: 1.45;
}

.fiscal-checklist-card .fiscal-checklist-status {
  width: 100%;
  max-width: 100%;
  text-align: center;
  white-space: normal;
  line-height: 1.3;
}

.fiscal-checklist-card .fiscal-checklist-grid {
  grid-template-columns: 1fr;
}

.fiscal-checklist-card .fiscal-check-item {
  min-width: 0;
  overflow: hidden;
}

.fiscal-checklist-card .fiscal-check-item strong,
.fiscal-checklist-card .fiscal-check-item span,
.fiscal-checklist-card .fiscal-check-item small {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.fiscal-checklist-card .fiscal-check-item span {
  line-height: 1.35;
}

.fiscal-checklist-card .fiscal-check-item small {
  line-height: 1.35;
}

.fiscal-checklist-card .fiscal-checklist-section {
  display: block;
}

.fiscal-checklist-card .fiscal-checklist-section h3 {
  margin-bottom: 12px;
}

.fiscal-checklist-card .fiscal-checklist-section ul {
  width: 100%;
  padding-left: 20px;
}

.fiscal-checklist-card .fiscal-checklist-section li {
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.internal-qr-card {
  display: grid;
  gap: 18px;
}

.internal-qr-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(79, 70, 229, 0.12);
  color: #3730a3;
  white-space: nowrap;
}

.internal-qr-content {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.internal-qr-image-wrap {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 18px;
  padding: 12px;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.internal-qr-image {
  width: 150px;
  height: 150px;
  object-fit: contain;
  display: block;
}

.internal-qr-info {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.internal-qr-info strong {
  font-size: 0.9rem;
  color: #111827;
}

.internal-qr-info code {
  display: block;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.06);
  color: #334155;
  font-size: 0.78rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.internal-qr-info small {
  color: #64748b;
  font-size: 0.78rem;
}

.internal-qr-info p,
.internal-qr-empty p {
  margin: 0;
  color: #475569;
  line-height: 1.45;
}

@media (max-width: 720px) {
  .internal-qr-content {
    grid-template-columns: 1fr;
  }

  .internal-qr-status {
    width: 100%;
  }
}

/* Fase 10.6.3 — QR Code interno na separação */
.separation-qr-card {
  margin-bottom: 22px;
  padding: 22px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.055);
}

.separation-qr-content {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.separation-qr-image-wrap {
  width: 150px;
  height: 150px;
  padding: 10px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.separation-qr-image {
  width: 128px;
  height: 128px;
  display: block;
  object-fit: contain;
}

.separation-qr-info {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.separation-qr-info > strong {
  font-family: var(--font-title);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #050505;
}

.separation-qr-info p {
  margin: 0;
  max-width: 620px;
  color: #555;
  line-height: 1.55;
}

.separation-qr-info code {
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  display: block;
  border-radius: 14px;
  background: #f3f3f0;
  color: #334155;
  font-size: 0.76rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.separation-qr-info small,
.separation-qr-info span {
  display: block;
  color: #64748b;
  font-size: 0.8rem;
  line-height: 1.45;
}

.separation-qr-empty {
  padding: 16px;
  border-radius: 18px;
  background: #f6f6f3;
  border: 1px dashed rgba(0, 0, 0, 0.14);
}

.separation-qr-empty p {
  margin: 0;
  color: #666;
}

@media (max-width: 720px) {
  .separation-qr-content {
    grid-template-columns: 1fr;
  }

  .separation-qr-image-wrap {
    width: 100%;
    max-width: 180px;
  }
}

/* Fase 10.6.4 — leitura interna do QR */
.qr-reader-page {
  max-width: 1120px;
}

.qr-reader-result-card {
  display: grid;
  gap: 18px;
}

.qr-reader-result-card h2,
.qr-reader-next-card h2 {
  margin-top: 6px;
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #111;
}

.qr-reader-result-card p,
.qr-reader-next-card p {
  color: #555;
  line-height: 1.55;
}

.qr-reader-result-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.qr-reader-order-code {
  padding: 20px;
  border-radius: 20px;
  background: #f6f6f3;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.qr-reader-order-code span {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-title);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #888;
}

.qr-reader-order-code strong {
  display: block;
  font-family: var(--font-title);
  font-size: clamp(1.35rem, 3vw, 2.2rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #111;
  word-break: break-word;
}

.qr-reader-order-code small {
  display: block;
  margin-top: 8px;
  color: #666;
}

.qr-reader-next-card {
  margin-top: 28px;
}

.qr-reader-next-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  font-family: var(--font-title);
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.qr-reader-next-badge.is-available {
  background: #dff7e8;
  color: #116331;
}

.qr-reader-next-badge.is-unavailable {
  background: #eeeeee;
  color: #444;
}

.qr-reader-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.qr-reader-actions .admin-back-link {
  margin-top: 0;
}

.qr-reader-result-error {
  border-color: rgba(239, 68, 68, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), #fff),
    rgba(239, 68, 68, 0.04);
}

@media (max-width: 720px) {
  .qr-reader-result-header {
    flex-direction: column;
  }

  .qr-reader-next-badge {
    width: 100%;
  }

  .qr-reader-actions a {
    width: 100%;
    justify-content: center;
  }
}

/* Fase 10.6.5 — feedback do scan operacional */
.qr-action-feedback {
  padding: 16px 18px;
  border-radius: 18px;
  display: grid;
  gap: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.qr-action-feedback strong {
  font-family: var(--font-title);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.qr-action-feedback p {
  margin: 0;
  color: #475569;
  line-height: 1.5;
}

.qr-action-feedback-success {
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.24);
}

.qr-action-feedback-success strong {
  color: #166534;
}

.qr-action-feedback-info {
  background: rgba(100, 116, 139, 0.08);
  border-color: rgba(100, 116, 139, 0.22);
}

.qr-action-feedback-info strong {
  color: #334155;
}

.admin-auth-layout{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-left: 220px;
    background:
      radial-gradient(circle at center, rgba(0, 0, 0, 0.05), transparent 45%),
      #f3f3f0;
}

.admin-login-card{
    width:min(420px,90%);
    background:#fff;
    padding:42px;
    border-radius:28px;
    box-shadow:
    0 30px 80px rgba(0,0,0,.25);
}

.admin-login-brand{
    display:flex;
    justify-content:center;
    margin-bottom:25px;
}

.admin-login-brand img{
    width:60px;
}

.admin-login-header span{
    font-size:11px;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:#777;
}

.admin-login-header h1{
    margin-top:12px;
    font-family:"Archivo";
    font-size:34px;

    /* ------------------------------------------------------------
       Sem esta cor o titulo some — 05/09/2026

       O body da loja e' escuro e o global.css define
       color: var(--color-white) nele. Este cartao e' branco, e o
       h1 nao declarava cor propria: herdava branco e ficava
       invisivel sobre branco.

       O <span> e o <p> ao lado nunca tiveram o problema porque
       cada um ja' declarava a sua. Era so' o h1 que dependia da
       heranca -- e heranca de um contexto escuro nao serve num
       cartao claro.
    ------------------------------------------------------------ */
    color:#111;
}

.admin-login-header p{
    color:#666;
    margin-bottom:30px;
}

.admin-login-field{
    margin-bottom:18px;
}

.admin-login-field label{
    display:block;
    margin-bottom:8px;
    font-size:13px;
    font-weight:700;
}

.admin-login-field input{
    width:100%;
    padding:15px 16px;
    border-radius:14px;
    border:1px solid #ddd;
    font-size:14px;
}

.admin-login-button{
    width:100%;
    margin-top:10px;
    padding:16px;
    border-radius:14px;
    border:none;
    background:#111;
    color:#fff;
    font-weight:700;
    cursor:pointer;
}

.admin-login-button:hover{
    opacity:.85;
}

.admin-login-forgot{
    display:block;
    margin-top:20px;
    text-align:center;
    color:#555;
    font-size:13px;
}

.admin-auth-page{
    min-height:100vh;
    background:#080808;
}

.admin-auth-container{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.admin-login-card{
    width:420px;
    max-width:90%;
    background:#fff;
    padding:42px;
    border-radius:28px;
}

.admin-login-brand{
    display:flex;
    justify-content:center;
    margin-bottom:30px;
}

.admin-login-logo{
    width:70px;
    height:70px;
    object-fit:contain;
}

.admin-login-form input{
    width:100%;
    box-sizing:border-box;
}

.admin-login-error {
    background: rgba(255, 0, 0, 0.08);
    border: 1px solid rgba(255, 0, 0, 0.25);
    color: #ff6b6b;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 14px;
    margin-bottom: 20px;
}

/* ------------------------------------------------------------
   O translateX(-20px) que morava aqui saiu — 05/09/2026

   O container ja' centraliza com flex. O transform empurrava o
   cartao 20px para a esquerda POR CIMA disso, e o resultado era
   um cartao visivelmente torto em qualquer largura.

   Nao ha' como isso ter sido intencional: centralizar e depois
   descentralizar de proposito nao resolve problema nenhum. E'
   ajuste de tentativa e erro que ficou.
------------------------------------------------------------ */

.admin-forbidden-page {
    min-height: 70vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.admin-forbidden-page span {
    font-size:120px;
    font-weight:900;
    color:#111;
}

.admin-forbidden-page h1 {
    font-size:42px;
    margin-bottom:15px;
}

.admin-forbidden-page p {
    color:#777;
    margin-bottom:30px;
}

.admin-forbidden-page a {
    background:#111;
    color:white;
    padding:14px 28px;
    border-radius:999px;
    text-decoration:none;
}

.admin-login-success {
    background: rgba(0, 200, 120, 0.10);
    border:1px solid rgba(0,200,120,0.25);
    color:#1ca86b;
    padding:14px 16px;
    border-radius:14px;
    font-size:14px;
    margin-bottom:20px;
}

.admin-logout-button {
    width:100%;
    background:transparent;
    border:none;
    color:#999;
    text-align:left;
    padding:14px 0;
    cursor:pointer;
    font-family:inherit;
    font-size:14px;
    transition:.3s;
}

.admin-logout-button:hover {
    color:#fff;
}


/* ================================================================
   WISC ADMIN — FILTROS E PAGINACAO DOS PEDIDOS
   Fase 10.7.13
================================================================ */

.admin-filtros{
    display:grid;
    grid-template-columns:minmax(0,1fr) 220px auto;
    gap:16px;
    align-items:end;
    margin-bottom:26px;
    padding:22px 24px;
    background:#fff;
    border:1px solid #e6e6e1;
    border-radius:20px;
}

.admin-filtros label{
    display:block;
    margin-bottom:8px;
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#777;
}

.admin-filtros input,
.admin-filtros select{
    width:100%;
    height:46px;
    padding:0 16px;
    border:1px solid #ddd;
    border-radius:12px;
    background:#fff;
    color:#111;
    font-size:.95rem;
    font-family:inherit;
    outline:none;
    transition:.2s ease;
}

.admin-filtros select{
    text-transform:capitalize;
    cursor:pointer;
}

.admin-filtros input:focus,
.admin-filtros select:focus{
    border-color:#111;
    box-shadow:0 0 0 3px rgba(0,0,0,.06);
}

.admin-filtro-acoes{
    display:flex;
    align-items:center;
    gap:12px;
}

.admin-filtro-button{
    height:46px;
    padding:0 26px;
    border:none;
    border-radius:12px;
    background:#111;
    color:#fff;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    cursor:pointer;
    transition:.2s ease;
}

.admin-filtro-button:hover{
    transform:translateY(-2px);
    opacity:.9;
}

.admin-filtro-limpar{
    color:#777;
    font-size:.85rem;
    font-weight:600;
    text-decoration:underline;
    text-underline-offset:3px;
    white-space:nowrap;
}

.admin-filtro-limpar:hover{
    color:#111;
}


/* ---------------- paginacao ---------------- */

.admin-paginacao{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    margin-top:26px;
}

.admin-paginacao a,
.admin-paginacao span{
    font-size:.86rem;
    font-weight:700;
}

.admin-paginacao a{
    padding:11px 20px;
    border:1px solid #ddd;
    border-radius:999px;
    background:#fff;
    color:#111;
    text-decoration:none;
    transition:.2s ease;
}

.admin-paginacao a:hover{
    background:#111;
    color:#fff;
    border-color:#111;
}

.admin-paginacao .desativado{
    padding:11px 20px;
    color:#bbb;
}

.admin-paginacao-info{
    color:#777;
}


@media(max-width:900px){

    .admin-filtros{
        grid-template-columns:1fr;
        gap:14px;
        padding:18px;
    }

    .admin-filtro-acoes{
        justify-content:space-between;
    }

    .admin-filtro-button{
        flex:1;
    }

    .admin-paginacao{
        gap:12px;
    }

    .admin-paginacao a,
    .admin-paginacao .desativado{
        padding:10px 14px;
        font-size:.8rem;
    }

}


/* ================================================================
   FASE 10.5.17 — matriz de estoque por cor

   A grade de tamanhos deixou de ser uma lista e virou uma matriz:
   um bloco por cor, cada um com suas linhas de tamanho.

   Sem separacao visual entre os blocos, quinze campos de estoque
   iguais viram um paredao onde e' facil digitar o numero na cor
   errada -- e o erro so' aparece no dia do drop, quando a peca que o
   sistema diz ter acaba nao existindo.

   Paleta clara, igual ao resto do .admin-form-card (fundo branco,
   texto #111, bordas rgba(0,0,0,...)).
================================================================ */

.admin-variant-color-block{
    margin-bottom:22px;
    padding:18px 18px 8px;
    border:1px solid rgba(0,0,0,.09);
    border-radius:22px;
    background:#fbfbf9;
}

.admin-variant-color-block:last-of-type{
    margin-bottom:8px;
}

.admin-variant-color-heading{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:16px;
    padding-bottom:13px;
    border-bottom:1px solid rgba(0,0,0,.08);
}

.admin-variant-color-heading strong{
    font-family:var(--font-title);
    font-size:.86rem;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#111;
}

/* A bolinha recebe o background por JS, a partir de data-color */
.admin-variant-color-dot{
    width:20px;
    height:20px;
    min-width:20px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.18);
    background:#d9d9d9;
    display:inline-block;
}

.admin-variant-color-badge{
    padding:4px 10px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.12);
    background:#fff;
    color:#666;
    font-size:.66rem;
    font-style:normal;
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.admin-variant-color-badge-off{
    border-color:rgba(190,60,60,.28);
    background:rgba(190,60,60,.07);
    color:#a33;
}

@media (max-width:430px){

    .admin-variant-color-block{
        padding:14px 13px 4px;
        border-radius:18px;
    }

    .admin-variant-color-heading{
        flex-wrap:wrap;
        gap:8px;
        margin-bottom:13px;
    }

}



/* ================================================================
   FASE 10.5.17 — correcoes do Bloco B

   1) O campo "ID variacao Bling" e' o unico input[type=text] dentro da
      linha de variante, e nao tinha regra de largura. Sem width:100% o
      navegador usa a largura padrao de um input (size=20, ~177px), que
      e' MAIOR que a coluna do grid.

      Isso nao so' ficava feio: o input transbordava a celula, esticava
      o documento inteiro e criava rolagem horizontal na pagina toda.
      Era a mesma causa do visual "cru" no desktop e do desencaixe das
      secoes 01 a 06 no mobile.

   2) O anel de cor da arte -- previa do seletor da loja dentro do
      admin.
================================================================ */

.admin-variant-row input[type="text"]{
    width:100%;
    min-width:0;
    height:34px;
    padding:0 10px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.12);
    background:#fff;
    color:#111;
    font-size:.74rem;
    text-align:center;
    outline:none;
}

.admin-variant-row input[type="text"]:focus{
    border-color:rgba(0,0,0,.34);
}

.admin-variant-row input[type="text"]::placeholder{
    color:#999;
    font-size:.68rem;
}

/* min-width:0 tambem no item do grid: sem isso um filho continua
   podendo empurrar a coluna para alem do 1fr. */
.admin-variant-row{
    min-width:0;
}

.admin-variant-grid > *{
    min-width:0;
}

/* --- anel da cor da arte --- */
.admin-color-ring{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:3px;
    border-radius:999px;
    background:#d9d9d9;
    line-height:0;
}

.admin-color-ring .admin-variant-color-dot{
    width:16px;
    height:16px;
    min-width:16px;
    border:1px solid rgba(0,0,0,.14);
}

/* --- aviso de gravacao --- */
.admin-form-sucesso{
    margin-bottom:20px;
    padding:16px 20px;
    display:flex;
    align-items:baseline;
    gap:14px;
    flex-wrap:wrap;
    border-radius:22px;
    background:#f0f7f1;
    border:1px solid rgba(30,110,60,.2);
    color:#1e6e3c;
}

.admin-form-sucesso strong{
    font-family:var(--font-title);
    font-size:.68rem;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.admin-form-sucesso span{
    line-height:1.5;
}


/* ================================================================
   PAINEL DE DEMANDA DA WISCRAL — Fase 10.5.19
================================================================ */

/*
   O aviso e' amarelo e vem antes dos numeros de proposito: ele existe
   para ser lido JUNTO com o total, e nao depois de a pessoa ja' ter
   formado opiniao sobre ele.
*/
.admin-wiscral-aviso{
    margin-bottom:24px;
    padding:18px 22px;

    border-radius:16px;
    background:#fdf8ee;
    border:1px solid rgba(160,120,20,.24);
    color:#6d5310;
}

.admin-wiscral-aviso strong{
    display:block;
    margin-bottom:6px;
    font-weight:800;
}

.admin-wiscral-aviso p{
    font-size:.9rem;
    line-height:1.65;
}

.admin-wiscral-aviso p strong{
    display:inline;
}

.admin-wiscral-periodos{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:22px;
}

.admin-wiscral-periodos a{
    padding:9px 16px;

    border:1px solid rgba(0,0,0,.12);
    border-radius:999px;

    font-size:.84rem;
    color:#444;
    text-decoration:none;
}

.admin-wiscral-periodos a.ativo{
    background:#111;
    border-color:#111;
    color:#fff;
}

.admin-wiscral-numeros{
    display:grid;
    /* minmax(0,...) para os cartoes poderem encolher em tela estreita */
    grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));
    gap:14px;
    margin-bottom:28px;
}

.admin-wiscral-numero{
    padding:20px 22px;
    border:1px solid rgba(0,0,0,.09);
    border-radius:16px;
    background:#fff;
    min-width:0;
}

.admin-wiscral-numero.destaque{
    background:#111;
    border-color:#111;
}

.admin-wiscral-numero span{
    display:block;
    margin-bottom:8px;

    font-size:.68rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#8a8a8a;
}

.admin-wiscral-numero strong{
    display:block;
    font-size:2rem;
    font-weight:900;
    line-height:1;
    color:#111;
}

.admin-wiscral-numero small{
    display:block;
    margin-top:8px;
    font-size:.78rem;
    color:#777;
}

.admin-wiscral-numero.destaque strong{ color:#fff; }
.admin-wiscral-numero.destaque span,
.admin-wiscral-numero.destaque small{ color:#b6b6b6; }

.admin-wiscral-mixes,
.admin-wiscral-listas{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
    gap:16px;
    margin-bottom:24px;
}

.admin-wiscral-mix,
.admin-wiscral-lista{
    padding:22px;
    border:1px solid rgba(0,0,0,.09);
    border-radius:16px;
    background:#fff;
    min-width:0;
}

.admin-wiscral-mix h2,
.admin-wiscral-lista h2{
    margin-bottom:16px;

    font-size:.74rem;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#111;
}

.admin-wiscral-mix ul{
    display:grid;
    gap:14px;
    list-style:none;
    padding:0;
}

.admin-wiscral-rotulo{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:6px;

    font-size:.88rem;
    color:#333;
}

.admin-wiscral-rotulo strong{ color:#111; }

.admin-wiscral-barra{
    height:8px;
    border-radius:999px;
    background:rgba(0,0,0,.07);
    overflow:hidden;
}

.admin-wiscral-barra span{
    display:block;
    height:100%;
    border-radius:999px;
    background:var(--color-green-deep);
}

.admin-wiscral-mix small{
    display:block;
    margin-top:5px;
    font-size:.76rem;
    color:#888;
}

.admin-wiscral-vazio{
    font-size:.86rem;
    color:#888;
}

.admin-wiscral-lista table{
    width:100%;
    border-collapse:collapse;
}

.admin-wiscral-lista th,
.admin-wiscral-lista td{
    padding:9px 8px;
    text-align:left;
    font-size:.86rem;
    border-bottom:1px solid rgba(0,0,0,.07);
}

.admin-wiscral-lista th{
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:#8a8a8a;
}


/* ----------------------------------------------------------------
   WISCRAL — tela estreita

   O teste em 390 px vazou. As causas foram tres, e todas da mesma
   familia de bug que ja' apareceu no provador:

   1) .admin-wiscral-rotulo e' flex, e item de flex nasce com
      min-width:auto -- ele se recusa a encolher abaixo da largura do
      proprio conteudo. Com rotulo longo ("Camiseta de modelagem
      ampla") ao lado do percentual, a linha empurrava o cartao para
      fora da tela.

   2) As tabelas de origem e de falhas nao tinham caixa de rolagem
      propria, entao esticavam o documento inteiro.

   3) Numero de 2rem em cartao de 190px cabe; em 390px de tela com
      padding dos dois lados, nao sobra.

   .admin-content tem overflow-x:hidden, entao o excesso nao virava
   barra de rolagem: virava conteudo CORTADO, que e' pior -- some sem
   avisar.
---------------------------------------------------------------- */

.admin-wiscral-rolagem{
    overflow-x:auto;
    /* -webkit-overflow-scrolling para rolagem com inercia no iOS */
    -webkit-overflow-scrolling:touch;
}

.admin-wiscral-nota{
    margin:-14px 0 26px;
    padding:13px 16px;

    border-radius:14px;
    background:rgba(0,0,0,.04);
    border:1px solid rgba(0,0,0,.08);

    font-size:.84rem;
    line-height:1.6;
    color:#555;
}

.admin-wiscral-nota strong{
    color:#111;
    font-weight:800;
}

@media (max-width: 720px){

    .admin-wiscral-aviso{
        padding:15px 16px;
    }

    .admin-wiscral-aviso p{
        font-size:.86rem;
    }

    /* Uma coluna, sempre. auto-fit ainda tentava duas em 430px. */
    .admin-wiscral-numeros,
    .admin-wiscral-mixes,
    .admin-wiscral-listas{
        grid-template-columns:minmax(0,1fr);
    }

    .admin-wiscral-numero{
        padding:16px 18px;
    }

    .admin-wiscral-numero strong{
        font-size:1.7rem;
    }

    .admin-wiscral-mix,
    .admin-wiscral-lista{
        padding:18px 16px;
    }

    /*
       O rotulo passa a quebrar em duas linhas quando nao couber, em
       vez de empurrar o percentual para fora. min-width:0 libera o
       encolhimento; o gap menor devolve espaco ao texto.
    */
    .admin-wiscral-rotulo{
        flex-wrap:wrap;
        gap:2px 10px;
    }

    .admin-wiscral-rotulo span{
        min-width:0;
        flex:1 1 auto;
    }

    .admin-wiscral-rotulo strong{
        flex:0 0 auto;
    }

    .admin-wiscral-periodos a{
        padding:8px 13px;
        font-size:.78rem;
    }

}


/* ================================================================
   BOTAO DE CONFIRMACAO DO QR — 08/09/2026

   Primeira versao reaproveitava a classe .admin-form-submit-button
   esperando que ela desse o preenchimento escuro. Nao deu: dentro
   deste cartao ela saiu branca sobre fundo branco, e o botao virou
   um texto em negrito. Ninguem aperta o que nao parece apertavel.

   Agora ele desenha o proprio visual, sem depender de heranca.

   E' apertado em pe', na bancada, com o celular numa mao e a caixa
   na outra. Por isso: largo, alto, escuro, e com o texto em caixa
   alta. Errar aqui custa uma caixa marcada como enviada em cima da
   mesa -- ele precisa parecer o que e'.
================================================================ */

.qr-reader-confirm-form {
    margin-top: 16px;
    margin-bottom: 4px;
}

.qr-reader-page .qr-reader-confirm-button {
    display: block;
    width: 100%;
    min-height: 56px;
    padding: 16px 26px;

    border: none;
    border-radius: 999px;
    cursor: pointer;

    background: #050505;
    color: #fff;

    font-family: var(--font-title, inherit);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;

    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.qr-reader-page .qr-reader-confirm-button:hover {
    background: #1a1a1a;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .24);
}

/*
 * O afundar no toque e' a unica confirmacao que o dedo recebe antes
 * de a pagina recarregar. Sem ele, numa conexao lenta, a pessoa nao
 * sabe se o toque pegou -- e aperta de novo.
 */
.qr-reader-page .qr-reader-confirm-button:active {
    transform: translateY(1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}

.qr-reader-page .qr-reader-confirm-button:focus-visible {
    outline: 3px solid #b39b62;
    outline-offset: 3px;
}

@media (min-width: 720px) {

    .qr-reader-page .qr-reader-confirm-button {
        width: auto;
        min-width: 340px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .qr-reader-page .qr-reader-confirm-button {
        transition: none;
    }
}


/* ================================================================
   O CARD DO QR NO PADRAO WISC — 08/09/2026

   O bloco existia com a paleta de rascunho do admin: roxo/indigo no
   selo e cinza-azulado no texto. Nada disso e' da marca -- a WISC e'
   preto, off-white, dourado e a borda quente.

   Alem da cor, o card nao dizia o que fazer. Tinha um QR, um link
   cru e uma frase avisando que a leitura ainda nao funcionava. Agora
   ele ensina os tres passos e oferece as duas portas: o celular
   lendo o codigo, ou um clique para quem ja' esta' no computador.

   As regras vem depois das originais no arquivo, entao vencem sem
   precisar de !important.
================================================================ */

/*
 * O CARD PRECISA PARECER UM CARD — 08/09/2026
 *
 * Este bloco ficava solto sobre o fundo da pagina, enquanto os
 * vizinhos ("Pagamento", "Fiscal / Bling") sao cartoes brancos. Numa
 * pagina de cartoes, o unico bloco sem cartao nao le' como "diferente",
 * le' como "inacabado".
 *
 * Os valores sao copiados de .admin-detail-card de proposito: o
 * objetivo aqui e' desaparecer no conjunto, nao se destacar.
 */
.internal-qr-card {
  gap: 20px;

  margin-top: 28px;
  padding: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), #fff);
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.055);
}

/* O selo deixa de ser roxo e vira dourado sobre claro. */
.internal-qr-status {
  background: rgba(179, 155, 98, 0.16);
  color: #7a6634;
  font-family: var(--font-title, inherit);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 9px 14px;
}

/*
 * A moldura do QR ganha a borda quente da marca e um fundo off-white.
 * O QR em si continua em branco puro dentro dela: leitor de codigo
 * precisa de contraste, e fundo creme atras do padrao pode atrapalhar
 * em luz fraca -- que e' justamente a luz de uma bancada a noite.
 */
.internal-qr-image-wrap {
  border: 1px solid #d8d6d1;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
}

/*
 * O ">" e' obrigatorio aqui.
 *
 * Sem ele esta regra pegava TODO <strong> dentro do bloco -- inclusive
 * os que estao no meio das frases dos passos ("confirme o inicio da
 * separacao"). O resultado era a frase se partindo, com um pedaco
 * virando titulo em caixa alta no meio da linha.
 *
 * Seletor de descendente e' generoso demais para um estilo de rotulo.
 */
.internal-qr-info > strong {
  font-family: var(--font-title, inherit);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #050505;
}

/* Dentro dos passos, negrito e' so' negrito. */
.internal-qr-passos strong {
  font-weight: 700;
  color: #050505;
}

/* --- os tres passos ------------------------------------------- */

.internal-qr-passos {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.internal-qr-passos li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: start;

  font-size: .88rem;
  line-height: 1.45;
  color: #2b2b2b;
}

/*
 * O numero num circulo preto. E' a mesma marcacao dos passos do
 * manual em PDF -- quem le' os dois reconhece que sao a mesma coisa.
 */
.internal-qr-passos li > span:first-child {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;

  border-radius: 50%;
  background: #050505;
  color: #fff;

  font-family: var(--font-title, inherit);
  font-size: .72rem;
  font-weight: 800;
}

/* --- o atalho para quem ja' esta' no computador ---------------- */

.internal-qr-abrir {
  justify-self: start;
  margin-top: 6px;
  padding: 12px 22px;

  border-radius: 999px;
  background: #050505;
  color: #fff;
  text-decoration: none;

  font-family: var(--font-title, inherit);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;

  transition: background .2s ease, transform .18s ease;
}

.internal-qr-abrir:hover {
  background: #1a1a1a;
  transform: translateY(-1px);
}

.internal-qr-abrir:focus-visible {
  outline: 3px solid #b39b62;
  outline-offset: 3px;
}

/* --- o endereco cru, escondido ate' alguem pedir --------------- */

/*
 * O link do QR e' longo e feio, e serve para um caso raro: mandar
 * para alguem por mensagem. Aberto por padrao, ele competia com os
 * passos pela atencao. Fechado, continua a um clique.
 */
.internal-qr-link {
  margin-top: 4px;
}

.internal-qr-link summary {
  cursor: pointer;
  font-size: .8rem;
  color: #6b6b6b;
  padding: 4px 0;
}

.internal-qr-link summary:hover {
  color: #050505;
}

.internal-qr-link code {
  margin-top: 8px;
  background: #f2f1ee;
  border: 1px solid #e6e4df;
  color: #2b2b2b;
}

.internal-qr-link small {
  display: block;
  margin-top: 6px;
  color: #6b6b6b;
}

@media (prefers-reduced-motion: reduce) {

  .internal-qr-abrir {
    transition: none;
  }

  .internal-qr-abrir:hover {
    transform: none;
  }
}


/* ================================================================
   O AVISO DE ENVIO BLOQUEADO — 08/09/2026

   Vermelho de propósito, e no mesmo lugar onde o botao de confirmar
   apareceria. Quem chega ali com a caixa na mao esta' procurando o
   botao; o aviso precisa ocupar o campo de visao dele, nao ficar num
   canto discreto.

   E traz um caminho: o link para a tela do pedido. Aviso que diz
   "nao pode" sem dizer "faca assim" transfere o problema em vez de
   resolver.
================================================================ */

.qr-reader-bloqueio {
    margin-top: 16px;
    padding: 18px 20px;

    border-radius: 14px;
    border-left: 3px solid #8c2f2f;
    background: #faf1f1;

    display: grid;
    gap: 8px;
}

.qr-reader-bloqueio strong {
    font-family: var(--font-title, inherit);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8c2f2f;
}

.qr-reader-bloqueio p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.5;
    color: #2b2b2b;
}

.qr-reader-bloqueio a {
    justify-self: start;
    margin-top: 4px;
}

/* ==================================================================
   EMISSÃO DA NF-e — Fase 5 · 09/09/2026

   Dois atos com pesos diferentes, e o visual precisa dizer isso
   antes de a pessoa ler:

     Gerar       bloco claro, botão comum. Reversível.
     Transmitir  barra vermelha, aviso, botão escuro e largo.
                 Não se desfaz.

   O bloco vermelho reaproveita o mesmo desenho do
   .qr-reader-bloqueio, que já é a linguagem da casa para "pare e
   leia antes de agir".
================================================================== */

.admin-nfe-emissao {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #e6e4df;

    display: grid;
    gap: 10px;
}

.admin-nfe-emissao > .admin-eyebrow {
    font-family: var(--font-title, inherit);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6b6b6b;
}

.admin-nfe-emissao > .admin-muted {
    margin: 0;
    font-size: .88rem;
    line-height: 1.55;
    color: #5c5c5c;
}

/* ---- a linha vermelha ---- */

.admin-nfe-linha-vermelha {
    margin-top: 6px;
    padding: 18px 20px;

    border-radius: 14px;
    border-left: 3px solid #8c2f2f;
    background: #faf1f1;

    display: grid;
    gap: 10px;
}

/* O ">" é essencial: sem ele, o <strong> que está DENTRO do
   parágrafo ("não pode mais ser apagada") também viraria eyebrow
   maiúsculo no meio da frase. Mesmo tropeço do .internal-qr-info,
   em 08/09. */
.admin-nfe-linha-vermelha > strong {
    font-family: var(--font-title, inherit);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8c2f2f;
}

.admin-nfe-linha-vermelha p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.55;
    color: #2b2b2b;
}

.admin-nfe-linha-vermelha p strong {
    font-weight: 700;
    color: #8c2f2f;
}

.admin-nfe-linha-vermelha .admin-bling-actions {
    margin-top: 4px;
}

.admin-nfe-transmitir-button {
    display: block;
    width: 100%;
    min-height: 54px;
    padding: 15px 26px;

    border: none;
    border-radius: 999px;
    cursor: pointer;

    background: #050505;
    color: #fff;

    font-family: var(--font-title, inherit);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;

    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

/* @media (hover: hover) para não deixar o estado "grudado" depois do
   toque no celular. Mesma correção do catálogo, em 07/09. */
@media (hover: hover) {
    .admin-nfe-transmitir-button:hover {
        background: #1a1a1a;
        box-shadow: 0 14px 30px rgba(0, 0, 0, .24);
    }
}

.admin-nfe-transmitir-button:active {
    transform: translateY(1px);
}

/* 390px e 430px: o botão já é largura total, e o bloco precisa
   respirar menos nas laterais para o texto não ficar espremido. */
@media (max-width: 460px) {
    .admin-nfe-linha-vermelha {
        padding: 16px 15px;
    }

    .admin-nfe-transmitir-button {
        letter-spacing: .1em;
        font-size: .74rem;
    }
}

/* ------------------------------------------------------------------
   O BOTÃO DE GERAR — 10/09/2026

   Mesma família do "Transmitir", peso diferente de propósito:

     Gerar       contorno escuro. Reversível — cria um rascunho.
     Transmitir  preenchido escuro. Não se desfaz.

   A hierarquia visual precisa dizer qual dos dois é o irreversível
   antes de a pessoa ler o texto.
------------------------------------------------------------------ */

.admin-nfe-gerar-button {
    display: inline-block;
    min-height: 48px;
    padding: 13px 30px;

    border: 1.5px solid #050505;
    border-radius: 999px;
    cursor: pointer;

    background: transparent;
    color: #050505;

    font-family: var(--font-title, inherit);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;

    transition: background .18s ease, color .18s ease;
}

@media (hover: hover) {
    .admin-nfe-gerar-button:hover {
        background: #050505;
        color: #fff;
    }
}

.admin-nfe-gerar-button:active {
    transform: translateY(1px);
}

/* ------------------------------------------------------------------
   AS PENDÊNCIAS DAS OITO CONFERÊNCIAS

   Dourado, e não vermelho: o rascunho existe e é recuperável. O
   vermelho fica reservado para a linha que não tem volta.
------------------------------------------------------------------ */

.admin-nfe-pendencias {
    padding: 16px 18px;

    border-radius: 14px;
    border-left: 3px solid #b39b62;
    background: #faf7ef;

    display: grid;
    gap: 8px;
}

.admin-nfe-pendencias > strong {
    font-family: var(--font-title, inherit);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7a6535;
}

.admin-nfe-pendencias ul {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 5px;
}

.admin-nfe-pendencias li {
    font-size: .88rem;
    line-height: 1.5;
    color: #2b2b2b;
}

@media (max-width: 460px) {
    .admin-nfe-gerar-button {
        display: block;
        width: 100%;
        letter-spacing: .1em;
    }

    .admin-nfe-pendencias {
        padding: 14px 14px;
    }
}


/* ==================================================================
   A CONFIRMACAO DE TROCA DE RASTREIO — Fase B1 · 13/09/2026

   Existe por causa de uma ARMADILHA DE ESPECIFICIDADE, e vale
   registrar porque ela pega de novo.

   O seletor .admin-status-form label (0,1,1) deixa todo rotulo deste
   formulario em CAIXA ALTA, 0.64rem e letter-spacing .16em. Isso e'
   certo para rotulo curto ("Transportadora"), e errado para FRASE.

   A primeira versao deste elemento usava class="admin-status-note",
   achando que herdaria a fonte de paragrafo. Nao herda:
   .admin-status-note e' (0,1,0) e PERDE para o seletor de cima. A
   frase de confirmacao sairia em maiusculas, minuscula e espacada,
   estourando a largura em 390px.

   Por isso o seletor abaixo qualifica o label: .admin-status-form
   label.admin-rastreio-confirma tem (0,2,1) e ganha.

   O flex-wrap importa no celular: em 390px a frase ocupa tres linhas,
   e o checkbox precisa ficar ancorado na primeira, nao centralizado
   no meio do bloco -- por isso align-items: flex-start.
================================================================== */
.admin-status-form label.admin-rastreio-confirma {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  /* desfaz o rotulo-etiqueta e volta a ser texto de leitura */
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.55;
  color: #666;

  max-width: 360px;
  cursor: pointer;
}

.admin-status-form label.admin-rastreio-confirma input[type="checkbox"] {
  /* 18px e' o menor tamanho em que o dedo acerta sem zoom, e o
     margin-top alinha o quadrado com a primeira linha do texto, e nao
     com o topo da caixa. */
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 3px 0 0;
  accent-color: #111;
  cursor: pointer;
}

/*
   O <span> e' o segundo e ultimo flex item, e e' ele que precisa
   poder encolher. min-width: 0 porque flex item nao encolhe abaixo do
   seu conteudo minimo por padrao -- sem isso, uma palavra longa
   empurraria a caixa de selecao para fora do card em 390px.
*/
.admin-status-form label.admin-rastreio-confirma > span {
  min-width: 0;
  flex: 1;
}

.admin-status-form label.admin-rastreio-confirma strong {
  /* codigo de rastreio nao quebra no meio: ou cabe na linha, ou pula
     para a proxima inteiro. Meio codigo em cada linha se le' errado e
     se copia errado. */
  white-space: nowrap;
  font-weight: 700;
  color: #111;
}