/* ==========================================================================
   DF.com.vc — Identidade visual complementar
   Segundo Turno • Leandro Grass 13 + Lula 13

   IMPORTANTE:
   carregar este arquivo DEPOIS do CSS principal.
   ========================================================================== */

:root {
  /* =========================================================
     PALETA DF.com.vc
     ========================================================= */

  --df-red: #c41624;
  --df-red-dark: #98151f;

  --df-orange: #ff943e;
  --df-orange-dark: #e87527;

  --df-blue: #183774;
  --df-blue-dark: #10295c;

  --df-cream: #f3e8b5;
  --df-cream-light: #fffaf0;

  /* ---------------------------------------------------------
     Compatibilidade com os tokens existentes
     --------------------------------------------------------- */

  --verde: var(--df-red);
  --verde-ink: var(--df-red-dark);

  --teal: var(--df-orange);
  --amarelo: var(--df-cream);

  --vinho: var(--df-red);
  --azulao: var(--df-blue);
  --roxo: var(--df-red);
  --laranja: var(--df-orange);
  --ceu: #49659a;

  /* superfícies */

  --bg: #f7f3e7;
  --card: #ffffff;

  --ink: #17264a;
  --text: #17264a;
  --muted: #62697a;

  --hairline: #e4ddc8;

  /* formas */

  --radius-sm: 9px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* sombras inspiradas no deslocamento da marca */

  --shadow-sm:
    0 2px 0 rgba(196, 22, 36, .10),
    0 4px 0 rgba(24, 55, 116, .06);

  --shadow:
    0 3px 0 rgba(196, 22, 36, .13),
    0 7px 0 rgba(24, 55, 116, .08);

  --shadow-lg:
    0 5px 0 rgba(196, 22, 36, .14),
    0 12px 24px rgba(24, 55, 116, .14);

  --ring: 0 0 0 3px rgba(255, 148, 62, .30);

  /* faixa proprietária DF.com.vc */

  --stripe: linear-gradient(
    90deg,
    var(--df-orange) 0 28%,
    var(--df-red) 28% 62%,
    var(--df-blue) 62% 82%,
    var(--df-cream) 82% 100%
  );
}


/* ==========================================================================
   FUNDO / BASE
   ========================================================================== */

body {
  background:
    linear-gradient(
      180deg,
      #fffaf0 0,
      #f7f3e7 260px,
      #f5f3ed 100%
    );
  color: var(--ink);
}

::selection {
  background: var(--df-orange);
  color: var(--df-blue-dark);
}

a {
  color: var(--df-red);
}


/* ==========================================================================
   TOPBAR
   ========================================================================== */

#topbar {
  background: var(--df-blue);
  color: #fff;
  border-bottom: none;
  box-shadow: 0 3px 0 var(--df-red);
}

#topbar::after {
  height: 4px;
  bottom: -4px;
  background: linear-gradient(
    90deg,
    var(--df-orange) 0 33%,
    var(--df-red) 33% 67%,
    var(--df-cream) 67% 82%,
    var(--df-blue) 82%
  );
}

.brand {
  color: #fff;
}

.brand-name b {
  color: var(--df-orange);
}

.chip {
  color: var(--df-blue-dark);
  background: var(--df-cream);
}

.icon-btn {
  background: rgba(255,255,255,.12);
}

.icon-btn:hover {
  background: var(--df-red);
}

.bell-badge {
  background: var(--df-orange);
  color: var(--df-blue-dark);
}


/* ==========================================================================
   TÍTULOS
   ========================================================================== */

.page-title,
.greeting {
  color: var(--df-blue);
}

.greeting .accent {
  color: var(--df-red);
}

.page-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 5px;
  margin-top: 7px;

  background: var(--df-orange);

  border-radius: 2px;
  box-shadow:
    4px 3px 0 var(--df-red),
    8px 6px 0 var(--df-blue);
}


/* ==========================================================================
   IDENTIDADE / TIME
   ========================================================================== */

.team-strip {
  color: var(--df-blue);
  background: var(--df-cream-light);

  border: 1px solid #e8dcae;
  border-left: 5px solid var(--df-red);

  box-shadow:
    3px 3px 0 rgba(196,22,36,.10),
    6px 6px 0 rgba(24,55,116,.06);
}

.team-strip::before {
  background: linear-gradient(
    90deg,
    var(--df-orange) 0 34%,
    var(--df-red) 34% 67%,
    var(--df-blue) 67%
  );
}


/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
  background: #fff;

  border: 1px solid #e6dfcc;
  border-radius: var(--radius);

  box-shadow:
    0 2px 0 rgba(196,22,36,.05),
    0 5px 0 rgba(24,55,116,.04);
}

a.card:hover {
  transform: translateY(-2px);

  border-color: rgba(196,22,36,.25);

  box-shadow:
    0 3px 0 rgba(196,22,36,.10),
    0 8px 0 rgba(24,55,116,.07);
}

.card h3 {
  color: var(--df-blue);
}


/* ==========================================================================
   KPIs
   ========================================================================== */

.kpi {
  border-top: 5px solid var(--df-red);
}

.kpi:nth-child(4n+2) {
  border-top-color: var(--df-orange);
}

.kpi:nth-child(4n+3) {
  border-top-color: var(--df-blue);
}

.kpi:nth-child(4n+4) {
  border-top-color: var(--df-cream);
}

.kpi .num {
  color: var(--df-blue);
}

.kpi .lbl {
  color: #656979;
}


/* ==========================================================================
   BOTÕES
   ========================================================================== */

.btn {
  background: var(--df-red);
  color: #fff;

  border-radius: 9px;

  box-shadow:
    0 4px 0 var(--df-red-dark),
    3px 7px 0 rgba(24,55,116,.12);
}

.btn:hover {
  background: #d51a2a;
  filter: none;
}

.btn:active {
  transform: translateY(3px);

  box-shadow:
    0 1px 0 var(--df-red-dark);
}


/* botão secundário */

.btn.secondary {
  background: var(--df-blue);

  box-shadow:
    0 4px 0 var(--df-blue-dark),
    3px 7px 0 rgba(196,22,36,.10);
}

.btn.secondary:hover {
  background: #214686;
}


/* destaque */

.btn.warn {
  background: var(--df-orange);
  color: var(--df-blue-dark);

  box-shadow:
    0 4px 0 var(--df-orange-dark),
    3px 7px 0 rgba(24,55,116,.10);
}


/* perigo */

.btn.danger {
  background: var(--df-red);
  box-shadow: 0 4px 0 var(--df-red-dark);
}


/* botão neutro */

.btn.ghost {
  background: var(--df-cream-light);
  color: var(--df-blue);

  border: 1px solid #e1d5aa;

  box-shadow: 0 3px 0 #ddd1a6;
}


/* ==========================================================================
   FORMULÁRIOS
   ========================================================================== */

label.field {
  color: var(--df-blue);
}

label.field input,
label.field select,
label.field textarea {
  background: #fff;
  border-color: #ddd6c4;
}

label.field input:focus,
label.field select:focus,
label.field textarea:focus {
  border-color: var(--df-orange);
  box-shadow: var(--ring);
}


/* ==========================================================================
   CHIPS / FILTROS / ABAS
   ========================================================================== */

.chips button {
  color: var(--df-blue);
  border-color: #ddd6c4;
  background: #fff;
}

.chips button:hover {
  border-color: var(--df-red);
}

.chips button.active {
  background: var(--df-red);
  border-color: var(--df-red);
  color: #fff;
}

.tabs a {
  color: var(--df-blue);
}

.tabs a.active {
  background: var(--df-red);
  border-color: var(--df-red);
  color: #fff;
}


/* ==========================================================================
   BOTTOM NAV
   ========================================================================== */

#bottomnav {
  background: #fffdf8;
  border-top-color: #e4ddc8;

  box-shadow:
    0 -3px 0 rgba(24,55,116,.04);
}

#bottomnav a {
  color: #777b88;
}

#bottomnav a.active {
  color: var(--df-red);
  border-top-color: var(--df-orange);
}

#bottomnav a.active svg {
  stroke: var(--df-red);
}


/* ==========================================================================
   STATUS / BADGES
   ========================================================================== */

.b-ASSUMIDA {
  background: #e7ecf6;
  color: var(--df-blue);
  border-color: #becae1;
}

.b-EM_ANDAMENTO,
.b-PENDENTE_APROVACAO,
.b-PENDING {
  background: #fff0d9;
  color: #824512;
  border-color: #f0c78e;
}

.b-ENVIADA {
  background: var(--df-orange);
  color: var(--df-blue-dark);
}

.b-REJEITADA,
.b-FINISHED,
.b-CANCELLED,
.b-FAILED {
  background: var(--df-red);
  color: #fff;
}


/* ==========================================================================
   ALERTAS
   ========================================================================== */

.alert.ok {
  background: #edf1e4;
  color: #35523d;
  border-color: #70895f;
}

.alert.warn {
  background: #fff0d9;
  color: #78420f;
  border-color: var(--df-orange);
}

.alert.err {
  background: #fae5e5;
  color: var(--df-red-dark);
  border-color: var(--df-red);
}


/* ==========================================================================
   TABELAS
   ========================================================================== */

table.tbl th {
  background: var(--df-blue);
  color: #fff;
}

table.tbl td {
  border-bottom-color: #ece6d7;
}

table.tbl tr:nth-child(even) td {
  background: #fffdf8;
}


/* ==========================================================================
   MISSÕES / TIMELINE
   ========================================================================== */

.timeline-item {
  border-left-color: var(--df-red);
}

.timeline-item::before {
  background: var(--df-orange);
  border-color: #fff;
  box-shadow:
    0 0 0 2px var(--df-red);
}

.mission-instructions {
  background: #fff7e7;
  border-left-color: var(--df-orange);
}


/* ==========================================================================
   CONTEÚDO RICO
   ========================================================================== */

.rich h1,
.rich h2,
.rich h3 {
  color: var(--df-blue);
}

.rich a {
  color: var(--df-red);
}

.rich blockquote {
  border-left-color: var(--df-orange);
  background: #fff4dc;
}


/* ==========================================================================
   PAGINAÇÃO
   ========================================================================== */

.pager {
  background: #fffdf8;
}

.pg-btn {
  color: var(--df-blue);
}

.pg-btn:hover:not(:disabled) {
  background: var(--df-cream);
}


/* ==========================================================================
   WYSIWYG
   ========================================================================== */

.wysiwyg-toolbar {
  background: #f5f0e3;
}

.wy-btn {
  color: var(--df-blue);
}

.wy-btn:hover {
  background: var(--df-cream);
}


/* ==========================================================================
   TOAST
   ========================================================================== */

#toast {
  background: var(--df-blue);

  border-bottom: 4px solid var(--df-red);

  box-shadow:
    4px 5px 0 rgba(196,22,36,.35),
    8px 10px 20px rgba(24,55,116,.18);
}


/* ==========================================================================
   RANKING
   ========================================================================== */

.rk-1 {
  background: var(--df-red);
  color: #fff;
  box-shadow: 0 4px 0 var(--df-red-dark);
}

.rk-2 {
  background: var(--df-blue);
  color: #fff;
  box-shadow: 0 4px 0 var(--df-blue-dark);
}

.rk-3 {
  background: var(--df-orange);
  color: var(--df-blue-dark);
  box-shadow: 0 4px 0 var(--df-orange-dark);
}


/* ==========================================================================
   LOGIN / AUTENTICAÇÃO
   ========================================================================== */

.auth-box {
  border-color: #e5ddc7;
  border-top: 6px solid var(--df-red);

  box-shadow:
    5px 5px 0 rgba(196,22,36,.10),
    10px 10px 0 rgba(24,55,116,.06),
    0 18px 35px rgba(24,55,116,.08);
}

.auth-box h1 {
  color: var(--df-blue);
}

.auth-switch a {
  color: var(--df-red);
}


/* ==========================================================================
   COMPARTILHAMENTO
   ========================================================================== */

.share-row .ghost {
  color: var(--df-blue);
}

.share-row .ghost:hover {
  border-color: var(--df-orange);
  background: #fffaf0;
}


/* ==========================================================================
   MODAL
   ========================================================================== */

.push-overlay {
  background: rgba(16,41,92,.62);
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

#app-footer .barra {
  background: linear-gradient(
    90deg,
    var(--df-orange) 0 30%,
    var(--df-red) 30% 67%,
    var(--df-blue) 67% 84%,
    var(--df-cream) 84%
  );

  height: 7px;
}

#app-footer p {
  color: var(--df-blue);
}

#app-footer a {
  color: var(--df-red);
}


/* ==========================================================================
   LOGO
   ========================================================================== */

.brand-logo-img {
  width: min(330px, 92%);
}


/* ==========================================================================
   DETALHE GRÁFICO DF.com.vc
   Usar opcionalmente:
   <span class="df-accent"></span>
   ========================================================================== */

.df-accent {
  display: inline-block;
  width: 42px;
  height: 9px;

  background: var(--df-orange);

  box-shadow:
    5px 4px 0 var(--df-red),
    10px 8px 0 var(--df-blue);

  margin: 5px 10px 8px 0;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

  #view {
    padding: 12px;
  }

  .page-title {
    font-size: 1.35rem;
  }

  .greeting {
    font-size: 1.32rem;
  }

  .card {
    padding: 14px;
  }

  .btn {
    min-height: 48px;
  }
}


/* ==========================================================================
   ACESSIBILIDADE
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}