/* =========================================================
   Centauras — Tema "Aura" (claro, elegante, astral)
   ========================================================= */

/* PALETA */
:root{
  --bg-0:#fffefc;          /* base quase branca */
  --bg-1:#fff8f0;          /* pêssego bem claro */
  --bg-2:#ffeedd;          /* luz suave p/ gradiente */
  --ink:#2a211b;           /* texto principal */
  --ink-soft:#6b5c51;      /* texto secundário */
  --line:#ece7e2;          /* bordas suaves */

  --accent:#ff8c55;        /* laranja pêssego (cta) */
  --accent-700:#e66f38;    /* hover */
  --accent-100:#ffe6d6;    /* foco */
  --brand:#9b5b34;         /* terracota discreta */

  --radius:16px;
  --shadow:0 10px 30px rgba(17,12,10,.08);
}

/* BASE */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
     radial-gradient(900px 600px at 10% 0%, var(--bg-2) 0%, transparent 60%),
     radial-gradient(900px 600px at 90% 10%, var(--bg-1) 0%, transparent 60%),
     linear-gradient(180deg, var(--bg-0) 0%, #fff 40%, var(--bg-0) 100%);
  background-attachment: fixed;
}

/* LAYOUT */
.wrap{max-width: 980px; margin:48px auto 80px; padding:0 20px}
/*.header{display:flex; align-items:center; gap:12px; margin-bottom:8px}*/
.header .logo{height:120px}
h1{margin:0 0 6px; font-weight:800; letter-spacing:.2px; font-size:38px}
.lead{margin:0 0 18px; color:var(--ink-soft)}
.card {
  margin-bottom: 20px;
}
/* CARDS */
.card, #meta{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
}

/* BARRA DE TÍTULO DOS CARDS */
.card .card-title{
  font-size:16px; font-weight:800; color:var(--ink);
  display:flex; align-items:center; gap:8px; margin:0 0 12px;
}
.card .card-sub{font-size:13px; color:var(--ink-soft); margin:-6px 0 14px}

/* FORM */
.form-card{padding:24px}
form{
  /**/
}
label{
  font-size:12px; color:var(--ink-soft); font-weight:600; margin:0 0 6px; display:block;
}
input, select{
  width:100%; padding:12px 13px; font-size:15px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow: inset 0 1px 0 rgba(17,12,10,.03);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input::placeholder{color:#a89c92}
input:focus, select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-100);
  background:#fffefb;
}

/* BOTÕES */
button{
  width: 100%;
  appearance:none; border:0; border-radius:12px; padding:12px 16px;
  font-weight:700; color:#fff; cursor:pointer;
  background:linear-gradient(180deg, var(--accent), var(--accent-700));
  box-shadow:0 6px 18px rgba(230,111,56,.25);
  transition:filter .15s ease, transform .05s ease;
}
button:hover{filter:brightness(1.05)}
button:active{transform:translateY(1px)}
button.secondary{
  background:#fff; color:var(--ink);
  border:1px solid var(--line); box-shadow:none;
}

/* GRID DE CARDS */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}

/* TABELAS */
.tbl{width:100%; border-collapse:collapse; font-size:14px}
.tbl th, .tbl td{padding:12px 10px; border-bottom:1px solid var(--line)}
.tbl th{font-size:12px; font-weight:800; color:var(--ink-soft); text-transform:none}
.tbl tr:nth-child(odd) td{background:#fff}
.tbl tr:nth-child(even) td{background:#fffdfa}

/* TIPOS AUXILIARES */
.mono{font-family: ui-monospace, Menlo, Consolas, monospace}
.hint{font-size:12px; color:var(--ink-soft)}
.tc{text-align:center}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff4ec; color:var(--brand);
  border:1px solid var(--line); border-radius:999px; padding:4px 10px; font-size:11px; font-weight:700
}

/* LOADING OVERLAY */
.loading-overlay{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(255,255,255,.55); border-radius:inherit; backdrop-filter:blur(2px)
}
.loading-overlay .spinner{
  width:40px; height:40px; border:4px solid rgba(0,0,0,.15); border-top-color:var(--accent);
  border-radius:50%; animation:spin .8s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}

/* RESPONSIVO */
@media (max-width: 900px){ form{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 620px){ form{grid-template-columns:repeat(2,1fr)} h1{font-size:30px} }
@media (max-width: 420px){ form{grid-template-columns:1fr} .grid{grid-template-columns:1fr} }

.tc {
  text-align: center;
}
.campos-row{
  display: grid;
  /*grid-template-columns: 6fr/1;*/

  grid-template-columns:repeat(6,1fr);
  align-items:end;

  gap: 12px;
  margin: 8px 0 16px;
}
/* bloco dos botões */
.button-row{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 8px 0 16px;
}
.button-row button{
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 400;
}

/* estilos (se já tiver, mantém) */
.btn-primary{
  background: linear-gradient(180deg, var(--accent), var(--accent-700));
  color: #fff; border: 0; font-weight: 700;
}
.btn-secondary{
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); font-weight: 700;
}
#btn-export {
  display: none;
}
#rodape {
  padding: 20px 0;
  font-size: 14px;
  opacity: 0.8;
}