/* NOBRA | Sistema de Pedidos — paleta do manual de identidade */
:root {
  --grafite: #17232F;
  --grafite-2: #22313F;
  --dourado: #C6A15B;
  --dourado-escuro: #A8843F;
  --offwhite: #F6F3EC;
  --cinza: #5E6871;
  --linha: #E3DED3;
  --branco: #FFFFFF;
  --ok: #2F7D5B;
  --erro: #B4412E;
  --alerta: #B7861F;
  --raio: 10px;
  --sombra: 0 1px 2px rgba(23,35,47,.06), 0 4px 16px rgba(23,35,47,.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--offwhite);
  color: var(--grafite);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.2; }
h1 { font-size: 1.45rem; font-weight: 700; }
h2 { font-size: 1.1rem; font-weight: 600; }
h3 { font-size: .95rem; font-weight: 600; }
.muted { color: var(--cinza); }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
[hidden] { display: none !important; }

/* Topo */
.topo { background: var(--grafite); color: var(--offwhite); position: sticky; top: 0; z-index: 10; }
.topo-inner { max-width: 1180px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 20px; min-height: 60px; flex-wrap: wrap; }
.marca { display: flex; align-items: baseline; gap: 10px; }
.marca-nome { font-weight: 700; letter-spacing: .18em; font-size: 1.15rem; }
.marca-nome::after { content: ""; display: inline-block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid var(--dourado); margin-left: 6px; vertical-align: 2px; }
.marca-sub { color: var(--dourado); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.menu { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.menu button { background: none; border: 0; color: #C9CED3; font: inherit; font-size: .9rem; padding: 8px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.menu button:hover { color: var(--offwhite); background: var(--grafite-2); }
.menu button.ativo { color: var(--grafite); background: var(--dourado); font-weight: 600; }
.usuario { display: flex; align-items: center; gap: 12px; font-size: .88rem; color: #C9CED3; margin-left: auto; }
.btn-link { background: none; border: 0; color: var(--dourado); font: inherit; cursor: pointer; padding: 4px; text-decoration: underline; }

/* Conteúdo */
.conteudo { max-width: 1180px; margin: 0 auto; padding: 24px 16px 64px; }
.carregando { color: var(--cinza); }
.cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.cabecalho p { margin: 0; }

.cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px; margin-bottom: 16px; }
.cartao > h2 { padding-bottom: 10px; border-bottom: 1px solid var(--linha); margin-bottom: 16px; }

/* Formulários */
.grade { display: grid; gap: 14px; grid-template-columns: repeat(12, 1fr); }
.c12 { grid-column: span 12; } .c8 { grid-column: span 8; } .c6 { grid-column: span 6; }
.c4 { grid-column: span 4; } .c3 { grid-column: span 3; } .c2 { grid-column: span 2; }
label { display: block; font-size: .8rem; font-weight: 600; color: var(--cinza); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; }
label .req { color: var(--dourado-escuro); }
input, select, textarea {
  width: 100%; font: inherit; color: var(--grafite);
  background: var(--branco); border: 1px solid #CFC9BC; border-radius: 8px;
  padding: 10px 12px; min-height: 42px;
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--dourado); outline-offset: 0; border-color: var(--dourado); }
input[readonly] { background: var(--offwhite); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 600; border-radius: 8px; padding: 10px 18px; min-height: 42px; cursor: pointer; border: 1px solid transparent; }
.btn-primario { background: var(--grafite); color: var(--offwhite); }
.btn-primario:hover { background: var(--grafite-2); }
.btn-dourado { background: var(--dourado); color: var(--grafite); }
.btn-dourado:hover { background: var(--dourado-escuro); color: var(--branco); }
.btn-secundario { background: var(--branco); color: var(--grafite); border-color: #CFC9BC; }
.btn-secundario:hover { border-color: var(--grafite); }
.btn-perigo { background: none; color: var(--erro); border-color: transparent; padding: 6px 10px; min-height: 0; }
.btn:disabled { opacity: .55; cursor: wait; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }

/* Login */
.login { max-width: 400px; margin: 8vh auto 0; }
.login .cartao { padding: 28px; }
.login p.slogan { color: var(--cinza); margin-top: -4px; margin-bottom: 20px; }
.login .btn { width: 100%; margin-top: 18px; }
.erro-box { background: #FBEDEA; color: var(--erro); border-radius: 8px; padding: 10px 12px; margin-top: 14px; font-size: .9rem; }

/* Itens do pedido */
.itens-cab, .item { display: grid; grid-template-columns: 1fr 190px 110px 140px 130px 40px; gap: 10px; align-items: end; }
.itens-cab { font-size: .75rem; font-weight: 600; color: var(--cinza); text-transform: uppercase; letter-spacing: .04em; padding: 0 0 6px; }
.item { padding: 10px 0; border-top: 1px solid var(--linha); }
.item label { display: none; }
.item .item-total { font-weight: 600; padding-bottom: 10px; }
.item .remover { align-self: center; }

.resumo { display: grid; gap: 6px; max-width: 360px; margin-left: auto; }
.resumo div { display: flex; justify-content: space-between; }
.resumo .total { border-top: 1px solid var(--linha); padding-top: 8px; font-size: 1.2rem; font-weight: 700; }

/* Sucesso */
.sucesso { text-align: center; padding: 40px 20px; }
.sucesso .numero { font-size: 2.4rem; font-weight: 700; color: var(--grafite); }
.selo { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.selo-ok { background: #E3F1EA; color: var(--ok); }
.selo-alerta { background: #FBF1DC; color: var(--alerta); }

/* Tabelas */
.tabela-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cinza); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
td { padding: 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
tr.clicavel { cursor: pointer; }
tr.clicavel:hover td { background: #FBF9F4; }
td select { min-height: 34px; padding: 4px 8px; width: auto; }
.vazio { text-align: center; color: var(--cinza); padding: 32px 10px; }

.status { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: #ECE8DE; color: var(--grafite); }
.status-recebido { background: #ECE8DE; }
.status-confirmado { background: #E4ECF4; color: #2C5578; }
.status-faturado { background: #F5ECD9; color: #8A6420; }
.status-entregue { background: #E3F1EA; color: var(--ok); }
.status-cancelado { background: #F5E3E0; color: var(--erro); text-decoration: line-through; }

/* Filtros */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 16px; }
.filtros > div { min-width: 150px; flex: 1; }
.filtros > div.estreito { flex: 0 0 auto; }
.periodos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.periodos button { font: inherit; font-size: .85rem; background: var(--branco); border: 1px solid #CFC9BC; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.periodos button.ativo { background: var(--grafite); color: var(--offwhite); border-color: var(--grafite); }

/* Painel */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.kpi { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px; box-shadow: var(--sombra); }
.kpi .rotulo { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cinza); font-weight: 600; }
.kpi .valor { font-size: 1.55rem; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .detalhe { font-size: .8rem; color: var(--cinza); }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.barras { display: grid; gap: 10px; }
.barra-linha { display: grid; grid-template-columns: minmax(110px, 30%) 1fr auto; gap: 10px; align-items: center; font-size: .9rem; }
.barra-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-trilho { background: #EEEAE0; border-radius: 4px; height: 12px; overflow: hidden; }
.barra-preenchida { background: var(--dourado); height: 100%; border-radius: 4px; }
.barra-valor { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.barra-valor small { font-weight: 400; color: var(--cinza); }

.colunas-dia { display: flex; align-items: flex-end; gap: 4px; height: 160px; padding-top: 10px; }
.coluna-dia { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 6px; }
.coluna-dia .col { width: 100%; background: var(--grafite); border-radius: 3px 3px 0 0; min-height: 2px; }
.coluna-dia:hover .col { background: var(--dourado); }
.eixo-dias { display: flex; justify-content: space-between; font-size: .75rem; color: var(--cinza); margin-top: 6px; }

/* Modal */
.modal { border: 0; border-radius: 12px; padding: 0; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: 0 20px 60px rgba(23,35,47,.3); color: var(--grafite); }
.modal::backdrop { background: rgba(23,35,47,.55); }
.modal-corpo { padding: 24px; }
.detalhes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; font-size: .92rem; margin-bottom: 16px; }
.detalhes dt { font-size: .75rem; text-transform: uppercase; color: var(--cinza); font-weight: 600; letter-spacing: .04em; margin-top: 8px; }
.detalhes dd { margin: 0; }

/* Avisos */
.avisos { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 100; width: min(460px, calc(100vw - 32px)); }
.aviso { background: var(--grafite); color: var(--offwhite); padding: 12px 16px; border-radius: 8px; box-shadow: var(--sombra); font-size: .92rem; border-left: 4px solid var(--dourado); }
.aviso.erro { border-left-color: #E07A66; }

/* Celular */
@media (max-width: 860px) {
  .topo { position: static; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .duas-colunas { grid-template-columns: 1fr; }
  .c8, .c6, .c4, .c3, .c2 { grid-column: span 12; }
  .itens-cab { display: none; }
  .item { grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 0; }
  .item label { display: block; }
  .item .campo-produto { grid-column: span 2; }
  .item .campo-embalagem { grid-column: span 2; }
  .item .item-total { padding: 0; align-self: center; }
  .item .remover { justify-self: end; }
  .usuario { width: 100%; justify-content: space-between; padding-bottom: 8px; }
  .menu { order: 3; width: 100%; flex: none; padding-bottom: 8px; }
  .detalhes { grid-template-columns: 1fr; }
}