/* Identidade feminina premium — Calculadora de Revenda */

:root {
  --f-bg: #fcf7f5;
  --f-surface: #ffffff;
  --f-rose: #b87a91;
  --f-rose-soft: #f5e7ec;
  --f-plum: #512d42;
  --f-plum-hover: #70415a;
  --f-text: #483542;
  --f-muted: #806d79;
  --f-border: #eadce2;
  --f-gold: #c8a46c;
  --f-shadow: 0 12px 35px rgba(81, 45, 66, .07);
}

/* Fundo e tipografia */

body:not(.admin-page) {
  background:
    radial-gradient(
      ellipse at 95% 0%,
      rgba(242, 220, 228, .75),
      transparent 42%
    ),
    var(--f-bg);
  color: var(--f-text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

body:not(.admin-page) .wrap {
  max-width: 1280px;
}

/* Cabeçalho */

body:not(.admin-page) .head {
  background: linear-gradient(
    125deg,
    #512d42 0%,
    #75455e 68%,
    #a36d83 100%
  );
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 18px 38px rgba(81,45,66,.16);
}

body:not(.admin-page) .head h1 {
  color: #fff;
  font-size: clamp(25px, 3vw, 38px);
  letter-spacing: -.035em;
  line-height: 1.15;
}

body:not(.admin-page) .eyebrow {
  color: #f6dfe7;
  letter-spacing: .14em;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

/* Cards */

body:not(.admin-page) .card {
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: 22px;
  box-shadow: var(--f-shadow);
}

body:not(.admin-page) .card h2,
body:not(.admin-page) .step h2 {
  color: var(--f-plum);
  letter-spacing: -.025em;
}

body:not(.admin-page) .sub {
  color: var(--f-muted);
}

/* Modos de cálculo */

body:not(.admin-page) .modetabs {
  gap: 12px;
}

body:not(.admin-page) .modetab {
  background: #fff;
  border: 1px solid var(--f-border);
  border-radius: 18px;
  box-shadow: 0 5px 16px rgba(81,45,66,.04);
  transition: transform .18s ease,
              box-shadow .18s ease,
              border-color .18s ease;
}

body:not(.admin-page) .modetab:hover {
  transform: translateY(-2px);
  border-color: var(--f-rose);
  box-shadow: var(--f-shadow);
}

body:not(.admin-page) .modetab.active,
body:not(.admin-page) .modetab.selected,
body:not(.admin-page) .modetab[aria-selected="true"] {
  background: var(--f-rose-soft);
  border-color: var(--f-rose);
  box-shadow: 0 0 0 2px rgba(184,122,145,.12);
}

body:not(.admin-page) .mt-t {
  color: var(--f-plum);
  font-weight: 700;
}

body:not(.admin-page) .mt-s {
  color: var(--f-muted);
}

/* Campos */

body:not(.admin-page) input:not([type="checkbox"]):not([type="radio"]),
body:not(.admin-page) select,
body:not(.admin-page) textarea {
  border: 1px solid var(--f-border);
  border-radius: 12px;
  background: #fff;
  color: var(--f-text);
  accent-color: var(--f-rose);
}

body:not(.admin-page) input:focus,
body:not(.admin-page) select:focus,
body:not(.admin-page) textarea:focus {
  outline: 2px solid rgba(184,122,145,.35);
  outline-offset: 1px;
  border-color: var(--f-rose);
}

body:not(.admin-page) input::placeholder,
body:not(.admin-page) textarea::placeholder {
  color: #aa97a2;
}

/* Botões principais */

body:not(.admin-page) button {
  transition: background-color .18s ease,
              transform .18s ease,
              box-shadow .18s ease;
}

body:not(.admin-page) button:focus-visible,
body:not(.admin-page) .modetab:focus-visible {
  outline: 3px solid var(--f-gold);
  outline-offset: 3px;
}

body:not(.admin-page) .add-row,
body:not(.admin-page) .tmpl {
  border-radius: 12px;
  border-color: var(--f-rose);
  color: var(--f-plum);
}

body:not(.admin-page) .add-row:hover,
body:not(.admin-page) .tmpl:hover {
  background: var(--f-rose-soft);
}

/* Upload de planilhas e notas */

body:not(.admin-page) .drop {
  border: 2px dashed #d8afbe;
  border-radius: 18px;
  background: #fdf7f9;
  transition: background .2s ease,
              border-color .2s ease;
}

body:not(.admin-page) .drop:hover {
  background: var(--f-rose-soft);
  border-color: var(--f-rose);
}

/* Tabelas */

body:not(.admin-page) table {
  border-collapse: separate;
  border-spacing: 0;
}

body:not(.admin-page) th {
  background: #f8eef2;
  color: var(--f-plum);
  font-size: 12px;
  font-weight: 700;
}

body:not(.admin-page) td {
  border-bottom-color: var(--f-border);
}

body:not(.admin-page) tbody tr:hover {
  background: #fdf8fa;
}

/* Login */

body:not(.admin-page) .gate {
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(216,158,181,.23),
      transparent 40%
    ),
    linear-gradient(145deg, #fdf7f9, #f3e4eb);
}

body:not(.admin-page) .gate-box {
  background: #fff;
  border: 1px solid var(--f-border);
  border-radius: 24px;
  box-shadow: 0 25px 70px rgba(81,45,66,.13);
}

body:not(.admin-page) .gate-box h2 {
  color: var(--f-plum);
}

body:not(.admin-page) .gt {
  color: var(--f-rose);
}

/* Responsividade */

@media (max-width: 768px) {
  body:not(.admin-page) .head {
    padding: 24px 20px;
    border-radius: 18px;
  }

  body:not(.admin-page) .modetabs {
    gap: 9px;
  }

  body:not(.admin-page) .modetab {
    border-radius: 14px;
  }

  body:not(.admin-page) .card {
    border-radius: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.admin-page) *,
  body:not(.admin-page) *::before,
  body:not(.admin-page) *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ==========================================
   AJUSTES VISUAIS V2
   Cabeçalho, botões e identidade rosé
   ========================================== */

/* BOTÕES DO CABEÇALHO */

body:not(.admin-page) .head {
  position: relative;
  padding-bottom: 78px;
}

body:not(.admin-page) #logoutBtn,
body:not(.admin-page) #adminBtn {
  position: absolute;
  bottom: 24px;
  top: auto;
  width: auto;
  min-height: 40px;
  padding: 10px 18px;
  border-radius: 11px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  box-shadow: none;
}

body:not(.admin-page) #logoutBtn {
  right: 32px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.5);
}

body:not(.admin-page) #logoutBtn:hover {
  background: rgba(255,255,255,.12);
  border-color: #fff;
}

body:not(.admin-page) #adminBtn {
  right: 142px;
  background: #f5e7ec;
  color: #512d42;
  border: 1px solid #f5e7ec;
}

body:not(.admin-page) #adminBtn:hover {
  background: #fff;
  color: #512d42;
}

/* PALETA DOS BOTÕES DE AÇÃO */

body:not(.admin-page) button:not(#logoutBtn):not(#adminBtn) {
  accent-color: #b87a91;
}

/* BOTÕES DE CÁLCULO E AÇÕES */

body:not(.admin-page) button[type="submit"],
body:not(.admin-page) #gateBtn {
  background: #512d42;
  color: #fff;
  border-color: #512d42;
  border-radius: 12px;
}

body:not(.admin-page) button[type="submit"]:hover,
body:not(.admin-page) #gateBtn:hover {
  background: #70415a;
}

/* MARCADORES NUMERADOS DAS ETAPAS */

body:not(.admin-page) .step > span:first-child,
body:not(.admin-page) .step .num,
body:not(.admin-page) .step .step-num,
body:not(.admin-page) .step .badge {
  background: #85445e;
  color: #fff;
  border-color: #85445e;
}

/* SELEÇÃO DE MARKETPLACES */

body:not(.admin-page) .marketplaces label,
body:not(.admin-page) .marketplace,
body:not(.admin-page) .marketplace-chip,
body:not(.admin-page) .channel-chip {
  accent-color: #b87a91;
}

body:not(.admin-page) input[type="checkbox"],
body:not(.admin-page) input[type="radio"] {
  accent-color: #a96582;
}

/* BARRAS E DESTAQUES */

body:not(.admin-page) progress {
  accent-color: #b87a91;
}

body:not(.admin-page) ::selection {
  background: #f2dce4;
  color: #512d42;
}

/* LINKS */

body:not(.admin-page) a {
  color: #85445e;
}

body:not(.admin-page) a:hover {
  color: #512d42;
}

/* RESPONSIVIDADE */

@media (max-width: 600px) {
  body:not(.admin-page) .head {
    padding-bottom: 132px;
  }

  body:not(.admin-page) #adminBtn {
    left: 20px;
    right: auto;
    bottom: 76px;
  }

  body:not(.admin-page) #logoutBtn {
    left: 20px;
    right: auto;
    bottom: 24px;
  }
}

/* =========================================
   CORREÇÃO V3 — REMOVER VERDE E AMARELO
   ========================================= */

/* Números das etapas */
body:not(.admin-page) .step .num,
body:not(.admin-page) .step .number,
body:not(.admin-page) .step .step-number,
body:not(.admin-page) .step .step-num,
body:not(.admin-page) .step .n,
body:not(.admin-page) .num {
  background: #85445e !important;
  color: #fff !important;
  border-color: #85445e !important;
}

/* Chips de marketplaces — estilos selecionados */
body:not(.admin-page) .marketplaces label,
body:not(.admin-page) .marketplace-chip,
body:not(.admin-page) .channel-chip,
body:not(.admin-page) .channels label,
body:not(.admin-page) .channel,
body:not(.admin-page) .mk label {
  background: #f5e7ec !important;
  color: #512d42 !important;
  border: 1px solid #d9b5c4 !important;
  border-radius: 999px !important;
}

/* Checkbox rosé */
body:not(.admin-page) input[type="checkbox"] {
  accent-color: #a96582 !important;
}

/* Botões de exportação e PDF */
body:not(.admin-page) .export-btn,
body:not(.admin-page) .pdf-btn,
body:not(.admin-page) .btn-export,
body:not(.admin-page) .btn-pdf {
  background: #f5e7ec !important;
  color: #512d42 !important;
  border-color: #e4c6d1 !important;
}

/* Ações desabilitadas */
body:not(.admin-page) button:disabled {
  background: #f1e8ec !important;
  color: #a18b96 !important;
  border-color: #eadce2 !important;
  opacity: .75;
}

/* Detalhes e elementos interativos */
body:not(.admin-page) summary::marker {
  color: #b87a91;
}
/* MARKETPLACES — NOVA IDENTIDADE FEMININA */

/* Botões não selecionados */
body:not(.admin-page) .pill {
  background: #fff !important;
  color: #75455e !important;
  border: 1px solid #e5c7d2 !important;
  border-radius: 999px !important;
  transition: all 0.2s ease;
}

/* Botões selecionados */
body:not(.admin-page) .pill.on {
  background: #85445e !important;
  color: #fff !important;
  border-color: #85445e !important;
  box-shadow: 0 3px 10px rgba(133, 68, 94, 0.15);
}

/* Hover */
body:not(.admin-page) .pill:hover {
  border-color: #b87a91 !important;
  transform: translateY(-1px);
}

/* Checkbox dos marketplaces */
body:not(.admin-page) .pill input[type="checkbox"] {
  accent-color: #f2dce4 !important;
}

/* Caso os checks sejam ícones ou elementos internos */
body:not(.admin-page) .pill.on input[type="checkbox"] {
  accent-color: #dca5ba !important;
}

/* Compatibilidade com a paleta antiga */
body:not(.admin-page) {
  --petrol: #85445e;
  --ink: #512d42;
}


/* ======================================
   CABEÇALHO PREMIUM — AÇÕES DA CONTA
   ====================================== */

body:not(.admin-page) .head {
  position: relative;
  min-height: 165px;
  padding: 32px;
  padding-right: 310px;
  padding-bottom: 32px;
}

/* Container dos botões */
body:not(.admin-page) .header-actions {
  position: absolute;
  right: 28px;
  top: 28px;

  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Estilo compartilhado */
body:not(.admin-page) .header-actions .header-btn {
  position: static !important;
  min-height: 42px;
  padding: 10px 15px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: all .2s ease;
}

/* Botão administrativo */
body:not(.admin-page) .header-actions #adminBtn {
  position: static !important;
  background: #f5e7ec;
  color: #512d42;
  border: 1px solid #f5e7ec;
}

body:not(.admin-page) .header-actions #adminBtn:hover {
  background: #fff;
  transform: translateY(-1px);
}

/* Botão sair */
body:not(.admin-page) .header-actions #logoutBtn {
  position: static !important;
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.45);
}

body:not(.admin-page) .header-actions #logoutBtn:hover {
  background: rgba(255,255,255,.18);
  border-color: #fff;
}

/* Tablet */
@media (max-width: 1000px) {
  body:not(.admin-page) .head {
    padding-right: 32px;
    padding-bottom: 90px;
  }

  body:not(.admin-page) .header-actions {
    top: auto;
    bottom: 24px;
    left: 32px;
    right: 32px;
    justify-content: flex-start;
  }
}

/* Celular */
@media (max-width: 600px) {
  body:not(.admin-page) .head {
    min-height: auto;
    padding: 24px 20px 100px;
  }

  body:not(.admin-page) .header-actions {
    left: 20px;
    right: 20px;
    bottom: 20px;
    gap: 8px;
  }

  body:not(.admin-page) .header-actions .header-btn {
    font-size: 12px;
    padding: 10px 12px;
  }
}