/* ===========================
   core.css — base + controles compartilhados
   Usado por base_auth.html e base_app.html
   =========================== */

/* Tokens */
:root{
  --c-navy:#052450;
  --c-navy-dark:#0b2a55;
  --c-text:#0e2a56;
  --c-orange:#ffa31a;
  --c-red:#e6453a;
  --c-bg:#f7faff;
  --c-muted:#20274e;
  --c-line:#d6dee8;
  --radius:18px;
  --shadow:0 10px 30px rgba(6,27,66,.10);

  /* Controles compartilhados */
  --control-h:52px;
}

/* Reset básico */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-text);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
a{ color:inherit; text-decoration:none }
a:hover{ text-decoration:underline }
:focus-visible{ outline:2px solid var(--c-orange); outline-offset:2px }

/* Utilitários */
.muted{ color:#7b8896 }
.inline{ color:var(--c-navy); font-weight:700 }

/* Botões padrão */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--c-navy);
  color:#fff;
  border:0;
  padding:12px 16px;
  border-radius:14px;
  font-weight:700;
  cursor:pointer;
}
.btn:hover{ background:var(--c-navy-dark) }

/* Tamanho sincronizado com inputs */
.btn-lg{
  height:var(--control-h);
  width:100%;
  font-size:16px;
  border-radius:14px;
}

/* Campos de formulário com ícone (padrão único) */
.input{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--c-line);
  border-radius:14px;
  padding:0 14px;
  background:#fff;
  height:var(--control-h);
}
.input .icon{
  display:inline-flex;
  width:20px;
  height:20px;
  color:var(--c-navy-dark);
}
.input .icon svg{
  display:block;
  width:20px;
  height:20px;
}
.input input,
.input select,
.input textarea{
  flex:1;
  height:100%;
  font-size:16px;
  border:0;
  outline:0;
  background:transparent;
}

/* Tabelas, badges e status básicos compartilhados */
.table{ width:100%; border-collapse:collapse; background:#fff; border-radius:16px; overflow:hidden; box-shadow:var(--shadow) }
.table th, .table td{ padding:12px 14px; border-bottom:1px solid var(--c-line); text-align:left }
.table th{ background:#f5f8ff; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:#4f5d78 }

.status{ padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px }
.status.ok{ background:#e8f6ee; color:#16794b }
.status.late{ background:#fff1e0; color:#8a4b00 }
.status.blocked{ background:#ffe9e7; color:#a1221b }

/* Grid utilitário para cards/KPIs compartilhado */
.kpi-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
@media (max-width:1200px){ .kpi-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:900px){ .kpi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:600px){ .kpi-grid{ grid-template-columns:1fr } }

/* Cartão simples reutilizável (opcional nos dois fluxos) */
.kpi{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:16px;
  padding:16px;
  box-shadow:var(--shadow);
}
.kpi .value{ font-size:28px; font-weight:800; color:var(--c-navy-dark) }
.kpi .label{ color:#7b8896; font-weight:600 }