/* Propostas AE — estilo (mobile primeiro) */
:root {
  --verm: #EC2F33; --verm-esc: #C8232A; --verm-claro: #FDECEC;
  --tinta: #1F2328; --suave: #5E6672; --linha: #E3E6EA; --fundo: #F5F6F8; --card: #fff;
  --verde: #1A7F4B; --verde-claro: #E7F5EE; --amarelo: #9A6700; --amarelo-claro: #FFF6DB;
  --azul: #1F5FBF; --raio: 12px; --sombra: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.45 var(--fonte); color: var(--tinta); background: var(--fundo); padding-bottom: env(safe-area-inset-bottom); }
a { color: var(--azul); text-decoration: none; }
h1 { font-size: 1.35rem; margin: .2rem 0 1rem; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
h3 { font-size: .95rem; margin: 0 0 .5rem; }
small, .mudo { color: var(--suave); }
.mudo { font-size: .85rem; }

/* Topo */
.topo { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--linha);
  padding: calc(env(safe-area-inset-top) + 8px) 14px 8px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: 8px; color: var(--tinta); font-weight: 700; }
.marca img { width: 30px; height: 30px; border-radius: 8px; }
.menu { display: flex; gap: 4px; overflow-x: auto; flex: 1; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu a { padding: 7px 11px; border-radius: 8px; color: var(--suave); white-space: nowrap; font-weight: 500; font-size: .92rem; }
.menu a.ativo { background: var(--verm-claro); color: var(--verm-esc); }
.menu a.sair { margin-left: auto; }
@media (max-width: 720px) { .topo { padding-bottom: 4px; } .menu { flex-basis: 100%; order: 3; margin: 0 -14px; padding: 0 10px 4px; } .menu a.sair { margin-left: 0; } }

.conteudo { max-width: 1180px; margin: 0 auto; padding: 16px 14px 120px; }

/* Cards e grade */
.card { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; box-shadow: var(--sombra); margin-bottom: 14px; }
.grade { display: grid; gap: 12px; grid-template-columns: repeat(12, 1fr); }
.grade > * { grid-column: span 12; }
@media (min-width: 720px) {
  .c2 { grid-column: span 2; } .c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; }
  .c6 { grid-column: span 6; } .c8 { grid-column: span 8; } .c9 { grid-column: span 9; }
}
.linha-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.entre { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Formulários */
label { display: block; font-size: .8rem; font-weight: 600; color: var(--suave); margin-bottom: 4px; }
input[type=text], input[type=password], input[type=email], input[type=date], input[type=number], input[type=url], select, textarea {
  width: 100%; font: inherit; font-size: 16px; /* evita zoom no iPhone */ color: var(--tinta);
  background: #fff; border: 1px solid #CDD2D8; border-radius: 9px; padding: 9px 11px; min-height: 42px; }
textarea { min-height: 84px; resize: vertical; line-height: 1.4; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(236,47,51,.25); border-color: var(--verm); }
input[readonly] { background: var(--fundo); }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: .92rem; font-weight: 400; color: var(--tinta); margin: 6px 0; }
.check input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--verm); }
.dica { font-size: .78rem; color: var(--suave); margin-top: 3px; }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 600; font-size: .92rem;
  border: 1px solid #CDD2D8; background: #fff; color: var(--tinta); border-radius: 9px; padding: 9px 14px; min-height: 42px; cursor: pointer; }
.btn:hover { background: var(--fundo); }
.btn-pri { background: var(--verm); border-color: var(--verm); color: #fff; }
.btn-pri:hover { background: var(--verm-esc); }
.btn-peq { min-height: 32px; padding: 5px 10px; font-size: .82rem; }
.btn-perigo { color: #B42318; }
.btn-link { border: 0; background: none; color: var(--azul); padding: 4px 6px; min-height: 0; font-weight: 500; }

/* Avisos e etiquetas */
.aviso { padding: 11px 14px; border-radius: 10px; margin-bottom: 14px; font-size: .92rem; }
.aviso-ok { background: var(--verde-claro); color: var(--verde); }
.aviso-erro { background: #FEF3F2; color: #B42318; }
.aviso-alerta { background: var(--amarelo-claro); color: var(--amarelo); }
.tag { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--fundo); color: var(--suave); text-transform: uppercase; letter-spacing: .02em; }
.tag-rascunho { background: #EEF1F4; }
.tag-enviada { background: #E8F0FD; color: var(--azul); }
.tag-ganha { background: var(--verde-claro); color: var(--verde); }
.tag-perdida, .tag-cancelada { background: #FEF3F2; color: #B42318; }
.tag-alerta { background: var(--amarelo-claro); color: var(--amarelo); }

/* Tabelas */
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th { text-align: left; font-size: .75rem; color: var(--suave); text-transform: uppercase; letter-spacing: .03em; padding: 8px; border-bottom: 1px solid var(--linha); }
.tabela td { padding: 9px 8px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Lista de propostas */
.lista-prop { display: grid; gap: 10px; }
.prop { display: grid; gap: 4px; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 13px 14px; color: var(--tinta); box-shadow: var(--sombra); }
.prop:hover { border-color: #C9CED4; }
.prop .t { font-weight: 650; }
.prop .valores { display: flex; gap: 14px; flex-wrap: wrap; font-size: .88rem; color: var(--suave); }
.prop .valores b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filtros input { max-width: 260px; }
.filtros select { max-width: 170px; }

/* Cotação: itens */
.item { border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; margin-bottom: 12px; background: #fff; box-shadow: var(--sombra); }
.item-topo { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.item-topo .n { width: 64px; flex: none; }
.item-topo select { flex: 1; min-width: 0; }
.item .grade { gap: 10px; }
.item-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--linha); }
.item-res div { font-size: .78rem; color: var(--suave); }
.item-res b { display: block; font-size: .98rem; color: var(--tinta); font-variant-numeric: tabular-nums; }
.item-res .lucro b { color: var(--verde); }
.item-res .ruim b { color: #B42318; }
.preco-auto { font-size: .78rem; color: var(--suave); margin-top: 3px; }
.preco-auto button { font-size: .78rem; padding: 0 4px; }
.manual input { border-color: var(--azul); background: #F5F9FF; }

/* Resumo fixo */
.resumo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; border-top: 1px solid var(--linha);
  box-shadow: 0 -4px 16px rgba(16,24,40,.08); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
.resumo-in { max-width: 1180px; margin: 0 auto; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.resumo .k { font-size: .72rem; color: var(--suave); text-transform: uppercase; letter-spacing: .03em; }
.resumo .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.resumo .total .v { font-size: 1.2rem; }
.resumo .lucro .v { color: var(--verde); }
.resumo .mais { display: contents; }
.resumo .acoes { margin-left: auto; display: flex; gap: 8px; }
@media (max-width: 720px) {
  .resumo-in { gap: 6px 14px; }
  .resumo .mais { display: none; }
  .resumo.aberto .mais { display: contents; }
  .resumo .acoes { width: 100%; margin: 4px 0 0; }
  .resumo .acoes .btn { flex: 1; }
}
.painel-detalhe { font-size: .9rem; }
.painel-detalhe .tabela td { padding: 6px 8px; }

/* Login */
.login { max-width: 380px; margin: 8vh auto; }
.login .logo { display: block; margin: 0 auto 18px; width: 220px; max-width: 70%; }

.oculto { display: none !important; }
.sel-textos .check { padding: 8px 10px; border: 1px solid var(--linha); border-radius: 9px; margin: 0 0 6px; }
.sel-textos .check.fora { opacity: .45; }
.sel-textos .check small { display: block; }
.logos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.logos label { border: 2px solid var(--linha); border-radius: 10px; padding: 12px; cursor: pointer; background: #fff; text-align: center; color: var(--tinta); }
.logos img { max-width: 100%; height: 60px; object-fit: contain; display: block; margin: 0 auto 8px; }
.logos input { margin-right: 4px; }

/* Ajustes de celular */
@media (max-width: 719px) {
  .c2, .c3 { grid-column: span 6; }
  .item-topo { flex-wrap: wrap; }
  .item-topo select { order: 5; flex-basis: 100%; }
  .item-topo .n { margin-right: auto; }
  .stats { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .stats > .card { padding: 10px; grid-column: auto !important; }
  .stats .grande { font-size: 1rem !important; }
  .stats .mudo { font-size: .72rem; }
}
.rolagem .tabela { min-width: 620px; }