/* ==========================================================
   Lab · tema escuro
   Cores principais ficam aqui em cima. Para mudar o azul,
   troque --primaria e --primaria-2.
   ========================================================== */
:root {
  color-scheme: dark;
  --fundo: #080b12;
  --fundo-2: #0d121c;
  --cartao: #111827;
  --cartao-2: #161f31;
  --campo: #0b101a;
  --texto: #e8edf5;
  --sutil: #8a96a8;
  --borda: rgba(148, 163, 184, .13);
  --borda-forte: rgba(148, 163, 184, .24);
  --primaria: #3d7bff;
  --primaria-2: #22c3ee;
  --primaria-esc: #2f63d6;
  --brilho: rgba(61, 123, 255, .35);
  --ok: #22c55e;
  --alerta: #f5a524;
  --perigo: #f04f5f;
  --raio: 16px;
  --raio-p: 11px;
  --sombra: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px -12px rgba(0,0,0,.6);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fundo); scroll-padding-top: 90px; }
body {
  margin: 0; min-height: 100vh; color: var(--texto);
  background:
    radial-gradient(900px 420px at 85% -120px, rgba(61,123,255,.16), transparent 70%),
    radial-gradient(700px 360px at -10% -80px, rgba(34,195,238,.08), transparent 70%),
    var(--fundo);
  background-attachment: fixed;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}
a { color: #7fa8ff; text-decoration: none; }
a:hover { color: #a9c4ff; }
h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin: .3rem 0 1rem; }
h2 { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; margin: 1.6rem 0 .7rem; }
h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .6rem; }
main { max-width: 1120px; margin: 0 auto; padding: 1.2rem 1rem 3rem; }
::selection { background: var(--brilho); }

/* ---------------------------------------------------- topo */
.topo {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .6rem 1rem;
  background: rgba(8, 11, 18, .78);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--borda);
}
.topo a { color: var(--texto); }
.marca { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; }
.marca img { width: 30px; height: 30px; border-radius: 9px; box-shadow: 0 0 18px var(--brilho); }
.topo nav {
  display: flex; gap: .2rem; flex: 1; overflow-x: auto; scrollbar-width: none;
  padding: .25rem; background: rgba(255,255,255,.03); border: 1px solid var(--borda); border-radius: 13px;
  max-width: max-content;
}
.topo nav::-webkit-scrollbar { display: none; }
.topo nav a {
  padding: .45rem .85rem; border-radius: 9px; white-space: nowrap;
  color: var(--sutil); font-weight: 600; font-size: .93rem; transition: color .15s, background .15s;
}
.topo nav a:hover { color: var(--texto); background: rgba(255,255,255,.05); }
.topo nav a.ativo {
  color: #fff; background: linear-gradient(135deg, var(--primaria), var(--primaria-esc));
  box-shadow: 0 4px 14px -4px var(--brilho);
}
.conta { display: flex; align-items: center; gap: .75rem; font-size: .9rem; margin-left: auto; }
.conta > a {
  display: flex; align-items: center; gap: .45rem; font-weight: 600;
}
.conta > a::before {
  content: attr(data-inicial); display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; font-size: .8rem; font-weight: 800;
  background: linear-gradient(135deg, var(--primaria), var(--primaria-2)); color: #fff;
}
.conta form { margin: 0; }
button.link { background: none; border: 0; color: var(--sutil); cursor: pointer; font: inherit; padding: 0; }
button.link:hover { color: var(--texto); }

/* ---------------------------------------------------- blocos */
.cartao {
  background: linear-gradient(180deg, var(--cartao-2), var(--cartao));
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 1.1rem 1.15rem; margin-bottom: .9rem; box-shadow: var(--sombra);
}
.cabeca { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; }
.cabeca h1 { margin-bottom: .7rem; }
.sutil { color: var(--sutil); font-size: .88rem; }
.vazio { text-align: center; color: var(--sutil); padding: 2.4rem 1rem; }
.centro { text-align: center; max-width: 420px; margin: 3rem auto; }

/* ---------------------------------------------------- botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: 1px solid var(--borda-forte); background: rgba(255,255,255,.04); color: var(--texto);
  padding: .62rem 1.1rem; border-radius: var(--raio-p); font: inherit; font-weight: 700; font-size: .93rem;
  cursor: pointer; text-align: center; line-height: 1.2; transition: transform .1s, background .15s, border-color .15s, box-shadow .15s;
}
.btn:hover { background: rgba(255,255,255,.08); border-color: rgba(148,163,184,.4); color: var(--texto); }
.btn:active { transform: scale(.97); }
.btn.primario {
  background: linear-gradient(135deg, var(--primaria) 0%, #3a6cf0 60%, var(--primaria-esc) 100%);
  border-color: transparent; color: #fff; box-shadow: 0 6px 20px -6px var(--brilho), 0 1px 0 rgba(255,255,255,.18) inset;
}
.btn.primario:hover { box-shadow: 0 8px 26px -6px rgba(61,123,255,.6), 0 1px 0 rgba(255,255,255,.2) inset; background: linear-gradient(135deg, #4d87ff, var(--primaria)); }
.btn.ok { background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.4); color: #6ee79a; }
.btn.ok:hover { background: rgba(34,197,94,.22); }
.btn.perigo { background: rgba(240,79,95,.14); border-color: rgba(240,79,95,.45); color: #ff8a96; }
.btn.perigo:hover { background: rgba(240,79,95,.24); }
.btn.pequeno { padding: .4rem .75rem; font-size: .85rem; border-radius: 9px; }
.btn.largo { width: 100%; }
.btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; }

/* ---------------------------------------------------- formulários */
.form label, .filtros label { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; font-size: .86rem; color: #c3ccda; margin-bottom: .9rem; }
input, select, textarea {
  font: inherit; font-weight: 400; padding: .62rem .75rem; border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p); background: var(--campo); color: var(--texto); width: 100%; min-height: 2.65rem;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: #5d687a; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px rgba(61,123,255,.22); }
select {
  appearance: none; -webkit-appearance: none; padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%238a96a8' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center;
}
select option { background: #111827; color: var(--texto); }
input[type=checkbox] { accent-color: var(--primaria); width: 1.1rem; height: 1.1rem; }
textarea { resize: vertical; }
fieldset { border: 0; padding: 0; margin: 0 0 .7rem; }
legend { font-weight: 800; color: #7fa8ff; margin-bottom: .6rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 1rem; }
.grade.tres { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.acoes { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .5rem; }
.estreito { max-width: 540px; }
.check { flex-direction: row !important; align-items: center; gap: .55rem !important; font-weight: 500 !important; color: var(--texto) !important; }
.check input { width: 1.1rem; min-height: 0; }

.filtros { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.2rem; }
.filtros input, .filtros select { width: auto; flex: 1 1 170px; }
.filtros input[type=search] {
  flex: 2 1 260px; padding-left: 2.4rem;
  background: var(--campo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a96a8' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat .85rem center;
}

.linha-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1rem; }
.linha-form h3 { width: 100%; }
.linha-form label { flex: 1 1 180px; margin-bottom: 0; }
.linha-form .check { flex: 1 1 100%; padding: .2rem 0; }
.linha-form .sutil { padding-bottom: .7rem; }
.inativo { opacity: .5; }

/* ---------------------------------------------------- avisos */
.aviso { padding: .8rem 1rem; border-radius: var(--raio-p); margin-bottom: .9rem; border: 1px solid; font-size: .93rem; }
.aviso.ok { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.3); color: #86efac; }
.aviso.erro { background: rgba(240,79,95,.1); border-color: rgba(240,79,95,.35); color: #fda4ae; }
.aviso.alerta { background: rgba(245,165,36,.1); border-color: rgba(245,165,36,.32); color: #fcd34d; }
.aviso.alerta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.txt-perigo { color: var(--perigo); }
.txt-alerta { color: var(--alerta); }

/* ---------------------------------------------------- números do topo */
.resumo { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: 1.2rem; }
.num {
  --cor: var(--primaria);
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--cartao-2), var(--cartao));
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 1rem 1.1rem 1rem; color: var(--texto); display: flex; flex-direction: column; gap: .15rem;
  box-shadow: var(--sombra); transition: transform .15s, border-color .15s;
}
.num::before {
  content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--cor), transparent 80%);
}
.num::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--cor) 28%, transparent), transparent 70%);
}
.num:hover { transform: translateY(-2px); border-color: var(--borda-forte); color: var(--texto); }
.num b { font-size: 2.6rem; line-height: 1; font-weight: 800; letter-spacing: -.04em; color: var(--cor); position: relative; }
.num span { font-size: .82rem; color: var(--sutil); font-weight: 600; position: relative; }
.num.perigo { --cor: var(--perigo); }
.num.alerta { --cor: var(--alerta); }
.num.ok { --cor: var(--ok); }
.num:not(.perigo):not(.alerta):not(.ok) b { color: #fff; }
.num.sel { border-color: color-mix(in srgb, var(--cor) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cor) 50%, transparent), 0 10px 30px -10px color-mix(in srgb, var(--cor) 45%, transparent); }

/* ---------------------------------------------------- lista de trabalhos */
.lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: .9rem; }
.trabalho { margin: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; transition: border-color .15s, transform .15s; }
.trabalho:hover { border-color: var(--borda-forte); }
.trabalho.atrasado { border-color: rgba(240,79,95,.45); box-shadow: 0 0 0 1px rgba(240,79,95,.15), 0 10px 30px -14px rgba(240,79,95,.5); }
.trabalho .corpo { display: block; color: inherit; padding: 1rem 1.15rem .7rem; flex: 1; }
.trabalho .corpo:hover h3 { color: #a9c4ff; }
.trabalho h3 { margin: .5rem 0 .15rem; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.trabalho h3 small { font-weight: 500; color: var(--sutil); font-size: .85rem; }
.trabalho p { margin: .2rem 0; }
.trabalho .tipo { font-weight: 600; color: #d4dbe6; }
.trabalho .prazo { margin-top: .6rem; font-size: .9rem; }
.linha1 { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.id { color: var(--sutil); font-weight: 700; font-size: .82rem; letter-spacing: .02em; }
.status-rapido { display: flex; gap: .5rem; align-items: flex-end; }
.trabalho .status-rapido { border-top: 1px solid var(--borda); padding: .65rem 1.15rem; background: rgba(0,0,0,.18); }
.trabalho .status-rapido select { min-height: 2.2rem; padding: .35rem 2rem .35rem .6rem; font-size: .9rem; background-position: right .65rem center; }
.cartao.status-rapido label { flex: 1; display: flex; flex-direction: column; gap: .35rem; font-weight: 600; font-size: .86rem; color: #c3ccda; }

/* ---------------------------------------------------- selos de status */
.selo {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .76rem; font-weight: 700; padding: .28rem .65rem; border-radius: 999px; white-space: nowrap;
  border: 1px solid; background: color-mix(in srgb, currentColor 13%, transparent); border-color: color-mix(in srgb, currentColor 30%, transparent);
}
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.st-0 { color: #a5b4c8; }  /* Recebido */
.st-1 { color: #6ea2ff; }  /* Em design (CAD) */
.st-2 { color: #b48cff; }  /* Fresagem */
.st-3 { color: #ffb65c; }  /* Cerâmica / Acabamento */
.st-4 { color: #4fd8f0; }  /* Prova na clínica */
.st-5 { color: #4ee08a; }  /* Pronto */
.st-6 { color: #7d8797; }  /* Entregue */
.st-6::before { box-shadow: none; }

/* ---------------------------------------------------- detalhes */
.detalhes { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.4rem; margin: 1rem 0 0; }
.detalhes dt { color: var(--sutil); font-size: .9rem; }
.detalhes dd { margin: 0; font-weight: 600; }
.obs { margin-top: 1.1rem; border-top: 1px solid var(--borda); padding-top: .8rem; }
.obs p { white-space: pre-wrap; margin: .3rem 0 0; color: #d4dbe6; }
.historico { list-style: none; padding: 0; }
.historico li { padding: .7rem 1.15rem; border-bottom: 1px solid var(--borda); position: relative; }
.historico li:last-child { border-bottom: 0; }
ul.historico.cartao { padding: 0; }
.zona-perigo {
  margin-top: 2.2rem; padding: 1rem 1.15rem; border: 1px dashed rgba(240,79,95,.4); border-radius: var(--raio);
  background: rgba(240,79,95,.04); display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between;
}
.zona-perigo label { margin: 0; }

/* ---------------------------------------------------- estoque */
.grupo { padding: .9rem 0 .3rem; overflow: hidden; }
.grupo h2 { margin-top: 0; padding: 0 1.15rem; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { padding: .65rem .8rem; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: middle; }
.tabela th { font-size: .72rem; color: var(--sutil); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr { transition: background .12s; }
.tabela tbody tr:hover { background: rgba(255,255,255,.025); }
.tabela tr.baixo { background: rgba(245,165,36,.07); }
.dir { text-align: right !important; white-space: nowrap; }
form.inline { display: inline; margin: 0; }
.saldo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.grande { font-size: 3.2rem; display: block; line-height: 1; font-weight: 800; letter-spacing: -.04em; margin: .2rem 0; }
.movs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .9rem; }
.movs .cartao { margin: 0; }
.movs .btn { width: 100%; }
.acoes.esquerda { justify-content: flex-start; }

/* ---------------------------------------------------- login */
.caixa-login {
  max-width: 380px; margin: 12vh auto 0; padding: 2rem 1.7rem;
  background: linear-gradient(180deg, var(--cartao-2), var(--cartao));
  border: 1px solid var(--borda); border-radius: 22px;
  box-shadow: 0 30px 80px -30px rgba(61,123,255,.35), var(--sombra);
}
.caixa-login .logo { width: 52px; height: 52px; border-radius: 15px; display: block; margin-bottom: 1rem; box-shadow: 0 0 30px var(--brilho); }
.caixa-login h1 { margin-bottom: .2rem; }
.caixa-login label { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; font-size: .86rem; color: #c3ccda; margin: .9rem 0; }
.caixa-login .btn { margin-top: .5rem; padding: .8rem; }

/* ---------------------------------------------------- casos e etapas */
.botoes { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .7rem; }
.etapas { display: flex; gap: .5rem; overflow-x: auto; margin: 0 0 .9rem; padding-bottom: .2rem; scrollbar-width: none; }
.etapas::-webkit-scrollbar { display: none; }
.etapa {
  display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; min-width: 150px;
  padding: .6rem .85rem; border-radius: 14px; border: 1px solid var(--borda);
  background: var(--cartao); color: var(--texto);
}
.etapa:hover { border-color: var(--borda-forte); color: var(--texto); }
.etapa .n {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none;
  font-weight: 800; font-size: .85rem; background: rgba(255,255,255,.06); color: var(--sutil);
}
.etapa .txt { display: flex; flex-direction: column; line-height: 1.25; }
.etapa small { color: var(--sutil); font-size: .76rem; }
.etapa.feita .n { background: rgba(34,197,94,.16); color: #6ee79a; }
.etapa.atual { border-color: color-mix(in srgb, var(--primaria) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--primaria) 40%, transparent), 0 8px 24px -12px var(--brilho); }
.etapa.atual .n { background: linear-gradient(135deg, var(--primaria), var(--primaria-2)); color: #fff; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; margin: .35rem 0 .2rem !important; }
.chip { font-size: .76rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; background: rgba(61,123,255,.13); color: #9dbcff; border: 1px solid rgba(61,123,255,.28); }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.galeria figure { margin: 0; }
.galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; border: 1px solid var(--borda); background: var(--campo); }
.galeria figcaption { font-size: .74rem; color: var(--sutil); margin-top: .3rem; display: flex; justify-content: space-between; gap: .3rem; }
.apagar-foto summary { list-style: none; color: #ff8a96; cursor: pointer; }
.apagar-foto summary::-webkit-details-marker { display: none; }
.apagar-foto[open] summary { color: var(--sutil); }
.apagar-foto form { margin-top: .3rem; }
.grupo-fotos { font-size: .82rem; color: var(--sutil); text-transform: uppercase; letter-spacing: .06em; margin: .2rem 0 .5rem; }
.envio-fotos { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--borda); padding-top: .9rem; }
.envio-fotos input[type=file] { flex: 1 1 200px; min-height: 0; padding: .5rem; }
input[type=file]::file-selector-button {
  font: inherit; font-weight: 700; font-size: .85rem; color: var(--texto); cursor: pointer;
  background: rgba(255,255,255,.07); border: 1px solid var(--borda-forte); border-radius: 9px; padding: .4rem .8rem; margin-right: .7rem;
}
.nota { display: flex; gap: .5rem; padding: .7rem; }
.nota input { flex: 1; }
.parecidos { border-color: rgba(245,165,36,.4); }
.parecido { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .6rem 0; border-top: 1px solid var(--borda); }
.check.destaque { background: rgba(245,165,36,.08); border: 1px solid rgba(245,165,36,.3); border-radius: var(--raio-p); padding: .7rem .8rem; color: #fcd34d !important; }
.so-cel { display: none; }
.cartao.sem-borda-int { padding: .3rem 0; overflow: hidden; }

/* ---------------------------------------------------- celular */
@media (max-width: 640px) {
  html { scroll-padding-top: 150px; }
  main { padding: .9rem .8rem 2.5rem; }
  .topo { gap: .55rem .8rem; padding: .55rem .8rem .6rem; }
  .topo nav { order: 3; flex-basis: 100%; max-width: none; }
  .topo nav a { flex: 1; text-align: center; padding: .5rem .6rem; }
  .resumo { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .num { padding: .9rem .95rem; }
  .num b { font-size: 2.3rem; }
  .lista { grid-template-columns: 1fr; }
  .tabela th, .tabela td { padding: .55rem .5rem; font-size: .9rem; }
  .grupo .tabela th:first-child, .grupo .tabela td:first-child { padding-left: 1.15rem; }
  .grupo .tabela td:last-child { padding-right: 1rem; }
  .grupo .tabela td:last-child a.btn { display: none; }   /* no celular, toque na cor para abrir */
  .grupo .tabela th { font-size: .66rem; letter-spacing: .05em; }
  .acoes .btn { flex: 1; }
  .so-pc { display: none; }
  .so-cel { display: inline; }
  .sem-borda-int .tabela td:first-child, .sem-borda-int .tabela th:first-child { padding-left: 1rem; }
  .sem-borda-int .tabela td:last-child { padding-right: 1rem; }
  .galeria { grid-template-columns: repeat(3, 1fr); gap: .45rem; }
  .galeria figcaption { flex-direction: column; gap: 0; }
  .cabeca .botoes { width: 100%; }
  .cabeca .botoes .btn { flex: 1; }
  h1 { font-size: 1.4rem; }
}