:root {
  --marinho: #1F3A5F;
  --marinho-escuro: #16294a;
  --areia: #F4F6F9;
}
body { background: var(--areia); }
.bg-marinho { background: var(--marinho) !important; }
.text-marinho { color: var(--marinho) !important; }
.btn-marinho { background: var(--marinho); color: #fff; border-color: var(--marinho); }
.btn-marinho:hover { background: var(--marinho-escuro); color: #fff; }

/* ---- layout com menu lateral ---- */
.sidebar { width: 240px; min-height: 100vh; display: flex; flex-direction: column; position: sticky; top: 0; }
.sidebar .nav-link { color: rgba(255,255,255,.8); border-radius: .5rem; }
.sidebar .nav-link i { width: 1.4rem; display: inline-block; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar .nav-link.active { background: rgba(255,255,255,.16); color: #fff; }
.conteudo { padding: 1.25rem; max-width: 1500px; }
@media (max-width: 991.98px) { .sidebar { min-height: auto; position: static; } .conteudo { padding: 1rem; } }

/* ---- tiles ---- */
.tile { display: block; background: #fff; border-radius: .75rem; padding: 1rem 1.1rem; border-left: 5px solid var(--marinho);
        box-shadow: 0 1px 3px rgba(0,0,0,.06); text-decoration: none; color: inherit; height: 100%; }
a.tile:hover { box-shadow: 0 3px 10px rgba(0,0,0,.10); color: inherit; }
.tile-rotulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; }
.tile-valor { font-size: 1.6rem; font-weight: 700; color: var(--marinho); line-height: 1.2; }
.tile-sub { font-size: .8rem; color: #6c757d; }
.tile-mini .tile-valor { font-size: 1.25rem; }

/* ---- funil ---- */
.funil { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; }
.funil-etapa { text-align: center; padding: .6rem .3rem; border-radius: .5rem; background: var(--areia); text-decoration: none; color: inherit; }
a.funil-etapa:hover { background: #e6ecf4; }
.funil-nome { font-size: .72rem; text-transform: uppercase; color: #6c757d; letter-spacing: .03em; }
.funil-qtd { font-size: 1.5rem; font-weight: 700; color: var(--marinho); }
.funil-valor { font-size: .8rem; color: #444; }
@media (max-width: 767.98px) { .funil { grid-template-columns: repeat(3, 1fr); } }

/* ---- tabelas ---- */
.tabela-ranking td { border: 0; padding: .3rem .25rem; }
.cor-cliente { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .4rem; vertical-align: baseline; background: #999; }
.cor-blue { background: #4a90d9; } .cor-teal { background: #20a8a0; } .cor-purple { background: #8e6bc4; } .cor-orange { background: #f0932b; }
.cor-cyan { background: #22b8cf; } .cor-lime { background: #9acd32; } .cor-pink { background: #e75480; } .cor-brown { background: #a0522d; }
.cor-amber { background: #f2b530; } .cor-deep_orange { background: #e8590c; } .cor-light_green { background: #82c91e; } .cor-yellow { background: #e6c500; }
.cor-green { background: #3cb371; } .cor-grey { background: #999; } .cor-red { background: #d64545; }

.badge.etapa { font-weight: 600; }
.etapa-propostas { background: #dfe9f5; color: #1F3A5F; } .etapa-negociacao { background: #fff1cc; color: #7a5a00; }
.etapa-pedido { background: #d4edda; color: #155724; } .etapa-faturamento { background: #ffe0cc; color: #8a3b00; }
.etapa-finalizados { background: #e2e3e5; color: #383d41; } .etapa-perdidas { background: #f8d7da; color: #721c24; }
.badge.etiqueta { background: #eef2f7; color: #444; font-weight: 500; }
.historico li { padding: .25rem 0; border-bottom: 1px dashed #e3e3e3; }

/* ---- cadastro (clientes / contatos) ---- */
.campo-sugestoes { position: relative; }
.sugestoes { position: absolute; z-index: 1050; left: 0; right: 0; top: 100%; max-height: 22rem; overflow-y: auto; }
.form-cadastro .form-label { font-size: .8rem; margin-bottom: .1rem; color: #555; }
.form-cadastro .btn { white-space: nowrap; flex-shrink: 0; }

/* ---- login ---- */
.login-card { width: 100%; max-width: 420px; border-radius: 1rem; }

/* ---- upload ---- */
.upload-card { border-top: 4px solid var(--marinho); }

/* ---- TV ---- */
body.tv { background: #0f1722; color: #fff; padding: 1.25rem 1.5rem; font-size: 1.05rem; }
.tv-topo { display: flex; justify-content: space-between; font-size: 1.3rem; margin-bottom: 1rem; }
.tv-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.tile-tv { background: #172234; border-left-color: #4a90d9; }
.tile-tv .tile-valor { color: #fff; font-size: 2.4rem; } .tile-tv .tile-rotulo, .tile-tv .tile-sub { color: #9fb0c8; }
.tv-grade { display: grid; grid-template-columns: 1.4fr 1.4fr 1fr 1fr; gap: 1rem; margin-top: 1rem; }
body.tv .card { background: #172234; border: 0; }
.funil-tv .funil-etapa { background: #0f1722; } .funil-tv .funil-qtd { color: #fff; } .funil-tv .funil-valor { color: #9fb0c8; }
@media (max-width: 1200px) { .tv-grade { grid-template-columns: 1fr 1fr; } .tv-tiles { grid-template-columns: repeat(2, 1fr); } }