@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Poppins:wght@600;700&display=swap');

/* =========================================================
   RQ-504-01 — CSS ENXUTO (60/30/10) + TEMAS
   Só o que o index.html usa
   ========================================================= */

/* ---------------------------------------------------------
   TOKENS (CLARO) + VARIANTES DE TEMA
   --------------------------------------------------------- */
:root{
  /* 60% (fundo) / 30% (superfícies) / 10% (acentos) */
  --bg:#F6F8FB;               /* 60 */
  --surface:#FFFFFF;          /* 30 */
  --ink:#0F1E3D;
  --muted:#5C6B84;
  --border:#E2E8F0;

  --navy-900:#0E3554;
  --navy-800:#15476f;
  --navy-700:#1c5b8e;
  --red-600:#E1262D;
  --red-700:#cb0f16;

  --g-navy:linear-gradient(180deg,var(--navy-900) 0%,var(--navy-800) 55%,var(--navy-700) 100%);
  --g-red:linear-gradient(180deg,#ff5a60 0%,var(--red-600) 50%,var(--red-700) 100%);
  --accent:var(--navy-700);
  --focus-color:#2563eb;

  --radius-xl:18px;
  --radius-lg:14px;
  --radius-md:12px;
  --shadow-1:0 2px 10px rgba(14,53,84,.08);
  --shadow-2:0 10px 30px rgba(14,53,84,.12);
  --ring:0 0 0 3px rgba(28,91,142,.28);

  --ff-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ff-title:"Poppins",var(--ff-ui);
  --fs-sm:.9rem; --fs-md:1rem; --fs-lg:1.125rem; --fs-xl:1.35rem;

  --container:1360px;
  --aside:360px;
  --gap:24px;
  --logo-size:100px;

  /* Controles */
  --control-h:44px;
  --control-pad-x:14px;

  color-scheme:light;
}

/* ESCURO (preto+dourado) */
html[data-theme="escuro"]{
  --bg:#0a0a0b; --surface:#111214; --ink:#F2F1EA; --muted:#e5be5b; --border:#2a2a2d;
  --accent:#D4AF37; --focus-color:#F5D76E;
  --g-navy:linear-gradient(180deg,#0b0b0e 0%,#111217 55%,#16181d 100%);
  --g-red:linear-gradient(180deg,#f6e27a 0%,#d4af37 50%,#b88900 100%);
  color-scheme:dark;
}
/* MARINHO */
html[data-theme="marinho"]{
  --bg:#0e1b2a; --surface:#10253f; --ink:#e6f1ff; --muted:#a8c0d9; --border:#1a3457;
  --accent:#60a5fa; --focus-color:#60a5fa;
  --g-navy:linear-gradient(180deg,#0f2a49 0%,#14365e 55%,#18467b 100%);
  color-scheme:dark;
}
/* SÉPIA */
html[data-theme="sepia"]{
  --bg:#fbf4e6; --surface:#fffaf0; --ink:#3f2f1e; --muted:#7a6a55; --border:#e9dcc5;
  --accent:#9c6b3c; --focus-color:#c98a50;
  --g-navy:linear-gradient(180deg,#9c6b3c 0%,#825a32 55%,#6c4a29 100%);
  color-scheme:light;
}

/* ---------------------------------------------------------
   BASE / ACESSIBILIDADE
   --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--ff-ui);
  font-size:var(--fs-md);
  line-height:1.55;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(28,91,142,.08), transparent 60%),
    radial-gradient(900px 500px at 100% 0, rgba(14,53,84,.06), transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.sr-only.sr-only-focusable:focus{
  position:static!important; width:auto; height:auto; margin:0; overflow:visible; clip:auto; white-space:normal;
}

.container{max-width:var(--container); margin-inline:auto; padding-inline:32px}
.noscript{margin:0; padding:12px 16px; background:#ffe7e8; color:#8a1220; font-weight:700; text-align:center}

/* Tipografia elegante */
h1,h2,h3,legend{font-family:var(--ff-title); letter-spacing:.2px}
legend{font-weight:700; font-size:var(--fs-lg); color:var(--ink)}

/* ---------------------------------------------------------
   TOPBAR
   --------------------------------------------------------- */
.topbar{position:sticky; top:0; z-index:50; background:var(--g-navy); color:#fff; box-shadow:var(--shadow-2); backdrop-filter:saturate(1.15) blur(4px)}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; padding-block:12px}
.brand{display:flex; align-items:center; gap:12px}
.brand img{width:var(--logo-size); height:var(--logo-size); object-fit:contain; filter:drop-shadow(0 2px 8px rgba(0,0,0,.28))}
.brand-text{display:flex; flex-direction:column; gap:2px}
.brand-title{font:700 var(--fs-lg)/1.1 var(--ff-title); color:#fff}
.actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.btn-group{display:flex; gap:8px}

/* ---------------------------------------------------------
   BOTÕES
   --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:1px solid transparent;
  font-weight:600; font-size:.92rem; transition:.2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:none; box-shadow:var(--ring)}

.btn--primary{background:var(--g-red); color:#fff; border:0}
.btn--primary:hover{filter:brightness(.98)}
.btn--secondary{background:#ffffff18; color:#fff; border-color:#ffffff30}
.btn--secondary:hover{background:#ffffff28}

/* Botões no conteúdo (herdam tema) */
.conteudo .btn{background:var(--surface); border:1px solid var(--border); color:var(--ink)}
.conteudo .btn--primary{background:var(--g-red); color:#fff; border-color:transparent}
.conteudo .btn--secondary:hover{background:color-mix(in srgb, var(--surface) 92%, var(--border))}

/* Botão remover (linhas de tabela) */
.remover{
  background:#dc3545; color:#fff; border:0; border-radius:10px;
  padding:6px 10px; font-weight:700; cursor:pointer;
}
.remover:hover{filter:brightness(.95)}

/* ---------------------------------------------------------
   LAYOUT
   --------------------------------------------------------- */
.layout{padding-block:28px}
.layout>.container{
  display:grid; grid-template-columns:var(--aside) 1fr; gap:var(--gap);
  align-items:start; min-height:calc(100svh - 90px);
}
@media (max-width:1100px){
  .layout>.container{grid-template-columns:1fr}
}

/* Aside (lista de relatórios) */
.lista-relatorios{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-2); padding:18px; height:fit-content; position:sticky; top:96px; color:var(--ink)
}
.aside-head{display:grid; gap:10px; margin-bottom:12px}
.lista-relatorios h2{margin:0; font:700 var(--fs-xl)/1.2 var(--ff-title); color:var(--ink)}
.search-group{display:grid; grid-template-columns:1fr auto; gap:8px}
#filtroLista{
  border:1px solid var(--border); border-radius:12px; padding:10px 12px;
  background:var(--surface); color:var(--ink);
}
#listaRelatorios{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:10px}
#listaRelatorios li{
  background:var(--surface); color:var(--ink); border:1px solid var(--border); border-radius:14px;
  padding:10px 12px; display:flex; flex-direction:column; gap:6px; transition:.18s ease;
  box-shadow:inset 0 0 0 1px rgba(28,91,142,.08), 0 8px 22px rgba(14,53,84,.10);
}
#listaRelatorios li:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(14,53,84,.16)}

/* Conteúdo */
.conteudo{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-2); padding:28px; color:var(--ink)
}

/* ---------------------------------------------------------
   FIELDSETS / FORM
   --------------------------------------------------------- */
fieldset{
  border:1px solid var(--border); border-radius:var(--radius-xl);
  background:var(--surface); padding:24px; margin:0 0 var(--gap);
  box-shadow:var(--shadow-1);
}

/* Grid de formulário:
   — Desktop: 2 colunas (12 -> 6/6 por .field)
   — Mobile: 1 coluna (12)
*/
.grid{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:22px; row-gap:18px}
.field{display:grid; gap:6px; grid-column:span 6}
.field label{color:var(--muted); font-weight:600; font-size:var(--fs-sm)}
@media (max-width:1024px){.field{grid-column:span 12}}

/* Controles padrão (altura e padding uniformes) */
input[type="text"],
input[type="number"],
input[type="date"],
input:not([type]),
select,
textarea{
  width:100%;
  height:var(--control-h);
  padding:0 var(--control-pad-x);
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  color:var(--ink);
  transition:border-color .2s ease, box-shadow .2s ease;
}
textarea{min-height:calc(var(--control-h) * 2); padding-top:10px; padding-bottom:10px}

input::placeholder,textarea::placeholder{color:color-mix(in srgb, var(--muted) 70%, transparent)}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid color-mix(in srgb, var(--focus-color) 28%, transparent);
  outline-offset:2px; border-color:var(--accent); box-shadow:none;
}

/* Select com seta (sempre visível) + placeholder “Selecione…” */
select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:2.25rem;
}
/* cor de placeholder quando o option vazio está selecionado */
select:has(option[value=""]:checked){ color:color-mix(in srgb, var(--muted) 70%, transparent); }
select:required:invalid{ color:color-mix(in srgb, var(--muted) 70%, transparent); }
option[value=""]{ color:color-mix(in srgb, var(--muted) 70%, transparent); }

/* Nº da Ficha de Produção — compacto
   (suporta id malformado do HTML com '#')
*/
[id="#ordemProducao"],
#ordemProducao,
[name="#ordemProducao"],
.input--short{
  width:14ch; min-width:12ch; max-width:18ch; justify-self:start;
}
@media (max-width:1024px){
  [id="#ordemProducao"], #ordemProducao, [name="#ordemProducao"], .input--short{
    width:100%; max-width:100%;
  }
}

/* Number: remove spinners para visual consistente */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
input[type="number"]{ -moz-appearance:textfield }

/* ---------------------------------------------------------
   TABELAS (Produtos / Ensaios)
   --------------------------------------------------------- */
table{
  width:100%; border-collapse:separate; border-spacing:0; margin-top:10px;
  background:var(--surface); border-radius:12px; overflow:hidden; box-shadow:var(--shadow-1);
  border:1px solid var(--border);
}
caption{padding:0}
th,td{padding:10px; text-align:left; border-bottom:1px solid var(--border); vertical-align:middle}
th{background:color-mix(in srgb, var(--surface) 80%, var(--border)); font-weight:700}
tr:last-child td{border-bottom:none}
tbody tr:nth-child(2n) td{background:color-mix(in srgb, var(--surface) 92%, var(--border))}
tbody tr:hover td{background:color-mix(in srgb, var(--surface) 86%, var(--border))}
td .remover{ white-space: nowrap }

#tabelaProdutos input,
#tabelaProdutos select,
#tabelaEnsaios input,
#tabelaEnsaios select{
  height:var(--control-h); width:100%;
}

.table-actions{margin-top:10px; display:flex; gap:8px}

/* ---------------------------------------------------------
   CHECKBOXES NBR (wrap simples)
   --------------------------------------------------------- */
.nbr-options{
  margin-top:15px; display:flex; flex-wrap:wrap; gap:15px; align-items:center;
  background:color-mix(in srgb, var(--surface) 96%, var(--border));
  padding:10px; border-radius:8px; border:1px solid var(--border)
}
.nbr-options p{margin:0}
.nbr-options label{display:flex; align-items:center; gap:6px; font-size:14px}

/* ---------------------------------------------------------
   ARIA LIVE (toasts simples, caso usados)
   --------------------------------------------------------- */
#ariaLive{position:fixed; inset-inline:0; top:78px; display:grid; place-items:center; pointer-events:none; padding:0 16px; z-index:60}
#ariaLive>.toast{
  pointer-events:auto; background:var(--surface); color:var(--ink);
  border:1px solid var(--border); border-radius:12px; padding:10px 14px; box-shadow:var(--shadow-2); max-width:560px
}

/* ---------------------------------------------------------
   RODAPÉ
   --------------------------------------------------------- */
.rodape{margin-top:28px; padding:16px 0 22px; color:#fff; background:var(--g-navy); box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.rodape small{display:block; text-align:center; opacity:.92}

/* ---------------------------------------------------------
   PRINT (limpo)
   --------------------------------------------------------- */
@media print{
  body{background:#fff}
  .topbar,.lista-relatorios,.actions,.btn{display:none!important}
  .conteudo, fieldset{border-color:#bbb; box-shadow:none}
  th{background:#eee!important; color:#000!important}
}

/* ---------------------------------------------------------
   PRINT — extras e utilitários
   --------------------------------------------------------- */
@page{
  size: A4;
  margin: 14mm;
}
@media print{
  *{ -webkit-print-color-adjust:exact; print-color-adjust:exact }
  .no-print{ display:none !important }
  .only-print{ display:block !important }

  .page-break{ page-break-before:always; break-before:page }
  .avoid-break{ page-break-inside:avoid; break-inside:avoid }

  table{ border:1px solid #bbb }
  thead{ display:table-header-group }
  tr, td, th{ break-inside:avoid }
}

/* ---------------------------------------------------------
   PLACEHOLDER / ESTADOS / ACESSIBILIDADE
   --------------------------------------------------------- */
:where(input,select,textarea)::placeholder{
  color: color-mix(in srgb, var(--muted) 70%, transparent);
  opacity: 1;
}
:where(input,select,textarea):disabled{
  background: color-mix(in srgb, var(--surface) 92%, var(--border));
  color: color-mix(in srgb, var(--muted) 55%, transparent);
  cursor: not-allowed;
}
:where(input,select,textarea)[aria-invalid="true"],
:where(input,select,textarea).is-invalid{
  border-color:#e11d48;
  outline-color:#e11d48;
}

/* ---------------------------------------------------------
   SELECT — compat e “Selecione…” evidente
   --------------------------------------------------------- */
select::-ms-expand{ display:none }
@media print{
  select{
    background-image:none !important;
    padding-right: var(--control-pad-x) !important;
  }
}
select:has(option[value=""]:checked){ color:color-mix(in srgb, var(--muted) 70%, transparent) }
select:required:invalid{ color:color-mix(in srgb, var(--muted) 70%, transparent) }
option[value=""]{ color:color-mix(in srgb, var(--muted) 70%, transparent) }

/* ---------------------------------------------------------
   CONTROLES — alinhamento e tamanhos consistentes
   --------------------------------------------------------- */
:where(input[type="text"], input[type="number"], input[type="date"], input:not([type]), select, textarea){
  height: var(--control-h);
  padding-inline: var(--control-pad-x);
  border-radius: 12px;
}
textarea{
  min-height: calc(var(--control-h) * 2);
  padding-block: 10px;
}

/* Reutilizável para inputs curtos */
.input--short{ width:14ch; min-width:12ch; max-width:18ch }

/* Numeric sem setas */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
input[type="number"]{ -moz-appearance:textfield }

/* ---------------------------------------------------------
   RESPONSIVO TABELAS
   --------------------------------------------------------- */
@media (max-width: 640px){
  th, td{ padding: 8px }
  .table-actions{ gap: 6px }
}

/* ---------------------------------------------------------
   MOTION REDUZIDO
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important }
  .btn:hover{ transform:none }
}

/* ---------------------------------------------------------
   UTILITÁRIOS
   --------------------------------------------------------- */
.hidden{ display:none !important }
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.mt-0{ margin-top:0 } .mt-1{ margin-top:.25rem } .mt-2{ margin-top:.5rem } .mt-3{ margin-top:.75rem }
.mb-0{ margin-bottom:0 } .mb-1{ margin-bottom:.25rem } .mb-2{ margin-bottom:.5rem } .mb-3{ margin-bottom:.75rem }

/* ---------------------------------------------------------
   AJUSTE ESPECÍFICO — “Nº da Ficha de Produção” MENOR
   --------------------------------------------------------- */
[id="#ordemProducao"],
#ordemProducao,
[name="#ordemProducao"]{
  width:14ch; min-width:12ch; max-width:18ch; justify-self:start;
}
@media (max-width:1024px){
  [id="#ordemProducao"], #ordemProducao, [name="#ordemProducao"]{
    width:100%; max-width:100%;
  }
}

fieldset {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

legend {
  font-weight: bold;
  padding: 0 10px;
  color: #2c3e50;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 15px;
}

.field {
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 5px;
  font-weight: 500;
}

input, select, textarea {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}