/* ── VARIÁVEIS DE DESIGN ── */
:root {
  --azul:        #1A5276;
  --azul-claro:  #D6EAF8;
  --azul-medio:  #B5D4F4;
  --ambar:       #FAC775;
  --ambar-bg:    #FAEEDA;
  --ambar-dark:  #633806;
  --verde:       #EAF3DE;
  --verde-borda: #3B6D11;
  --verde-texto: #27500A;
  --vermelho:    #FCEBEB;
  --verm-borda:  #A32D2D;
  --verm-texto:  #791F1F;
  --laranja:     #EF9F27;
  --cinza-bg:    #F2F3F4;
  --cinza-borda: #CCCCCC;
  --texto:       #1a1a1a;
  --texto-muted: #888780;
  --branco:      #ffffff;

  --radius:  6px;
  --shadow:  0 1px 4px rgba(0,0,0,0.08);
  --font:    'Arial', sans-serif;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); font-size: 14px; color: var(--texto); background: #f5f6fa; }

/* ── LOGIN ── */
.login-body        { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--azul); }
.login-container   { background: var(--branco); border-radius: var(--radius); padding: 2.5rem; width: 100%; max-width: 380px; box-shadow: var(--shadow); }
.login-logo        { font-size: 1.8rem; font-weight: bold; color: var(--azul); text-align: center; margin-bottom: .25rem; }
.login-subtitle    { font-size: .8rem; color: var(--texto-muted); text-align: center; margin-bottom: 1.5rem; }
.login-form        { display: flex; flex-direction: column; gap: 1rem; }

/* ── FORMULÁRIOS ── */
.form-group        { display: flex; flex-direction: column; gap: .3rem; }
.form-group label  { font-size: .85rem; font-weight: bold; color: var(--texto); }
input, select, textarea {
  border: 1px solid var(--cinza-borda); border-radius: var(--radius);
  padding: .5rem .75rem; font-size: .9rem; font-family: var(--font);
  width: 100%; transition: border-color .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--azul);
}

/* ── BOTÕES ── */
.btn             { padding: .5rem 1rem; border-radius: var(--radius); border: 1px solid var(--cinza-borda); cursor: pointer; font-size: .9rem; font-family: var(--font); background: var(--branco); color: var(--texto); transition: background .15s; }
.btn:hover       { background: var(--cinza-bg); }
.btn-primary     { background: var(--azul); color: var(--branco); border-color: var(--azul); }
.btn-primary:hover { background: #154360; }
.btn-block       { width: 100%; }
.btn-sm          { padding: .3rem .7rem; font-size: .8rem; }

/* ── ALERTAS ── */
.alert           { padding: .65rem .9rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: .875rem; }
.alert-error     { background: var(--vermelho); border: 1px solid var(--verm-borda); color: var(--verm-texto); }
.alert-success   { background: var(--verde);    border: 1px solid var(--verde-borda); color: var(--verde-texto); }
.alert-warning   { background: var(--ambar-bg); border: 1px solid var(--ambar);      color: var(--ambar-dark); }

/* ── LAYOUT PRINCIPAL ── */
.main-header     { background: var(--azul); color: var(--branco); padding: .75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; }
.main-header .brand { font-size: 1.1rem; font-weight: bold; }
.main-nav        { background: var(--branco); border-bottom: 2px solid var(--azul-claro); padding: 0 1.5rem; display: flex; gap: 0; }
.main-nav a      { display: block; padding: .75rem 1rem; font-size: .875rem; color: var(--texto); text-decoration: none; border-bottom: 3px solid transparent; }
.main-nav a:hover, .main-nav a.active { border-bottom-color: var(--azul); color: var(--azul); font-weight: bold; }
.main-content    { padding: 1.5rem; max-width: 1400px; margin: 0 auto; }

/* ── CARDS / BLOCOS KPI ── */
.card            { background: var(--branco); border-radius: var(--radius); border: 1px solid var(--cinza-borda); padding: 1rem; box-shadow: var(--shadow); }
.kpi-grid        { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; }
.kpi-card        { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: var(--radius); padding: .75rem 1rem; text-align: center; }
.kpi-card .kpi-label { font-size: .75rem; color: var(--texto-muted); margin-bottom: .25rem; }
.kpi-card .kpi-value { font-size: 1.6rem; font-weight: bold; }
.kpi-card .kpi-pct   { font-size: .75rem; color: var(--texto-muted); }
.kpi-card.verde  { background: var(--verde);    border-color: var(--verde-borda); }
.kpi-card.verm   { background: var(--vermelho); border-color: var(--verm-borda); }
.kpi-card.ambar  { background: var(--ambar-bg); border-color: var(--ambar); }

/* ── TABELAS ── */
.table-wrapper   { overflow-x: auto; }
table            { width: 100%; border-collapse: collapse; font-size: .875rem; }
th               { background: var(--azul); color: var(--branco); padding: .6rem .75rem; text-align: left; font-weight: bold; }
td               { padding: .55rem .75rem; border-bottom: 1px solid var(--cinza-borda); }
tr:nth-child(even) td { background: var(--cinza-bg); }
tr:hover td      { background: var(--azul-claro); }
.col-acao        { border-left: 1px solid var(--cinza-borda); width: 90px; text-align: center; }

/* ── BADGES SLA ── */
.badge           { display: inline-block; padding: .2rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: bold; }
.badge-ok        { background: #C0DD97; border: 1px solid var(--verde-borda); color: var(--verde-texto); }
.badge-atraso    { background: #F7C1C1; border: 1px solid var(--verm-borda); color: var(--verm-texto); }

/* ── SEPARADORES DE GRUPO (tabelas de lotes) ── */
.group-header-azul  { background: var(--azul-medio); color: var(--azul); font-weight: bold; padding: .4rem .75rem; font-size: .8rem; }
.group-header-ambar { background: var(--ambar); color: var(--ambar-dark); font-weight: bold; padding: .4rem .75rem; font-size: .8rem; }

/* ── KANBAN ── */
.kanban-board    { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: 1rem; }
.kanban-col      { min-width: 160px; flex: 1; }
.kanban-col-header { background: var(--cinza-bg); border: 1px solid var(--cinza-borda); border-radius: var(--radius); padding: .45rem .6rem; text-align: center; font-size: .8rem; font-weight: bold; margin-bottom: .5rem; }
.kanban-card     { border-radius: var(--radius); border: 1px solid var(--cinza-borda); padding: .55rem .65rem; margin-bottom: .5rem; font-size: .8rem; }
.kanban-card.verde  { background: var(--verde);    border-color: var(--verde-borda); }
.kanban-card.verm   { background: var(--vermelho); border-color: var(--verm-borda); }
.kanban-card.neutro { background: var(--cinza-bg); border-color: var(--cinza-borda); }
.kanban-card .card-lote    { font-weight: bold; display: flex; align-items: center; gap: 8px; }
.kanban-card .card-produto { font-size: .75rem; color: var(--texto-muted); }
.kanban-card hr  { border: none; border-top: 1px solid var(--cinza-borda); margin: .35rem 0; }
.kanban-card .card-tempo   { font-size: .78rem; }
.bolinha-acumulado { width: 10px; height: 10px; border-radius: 50%; background: var(--laranja); display: inline-block; flex-shrink: 0; }

/* ── MODAIS ── */
.modal-overlay   { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1000; align-items: center; justify-content: center; }
.modal-overlay.active { display: flex; }
.modal           { background: var(--branco); border-radius: var(--radius); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
.modal-header    { padding: .85rem 1.25rem; border-bottom: 1px solid var(--cinza-borda); font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
.modal-body      { padding: 1.25rem; display: flex; flex-direction: column; gap: .85rem; }
.modal-footer    { padding: .85rem 1.25rem; border-top: 1px solid var(--cinza-borda); display: flex; justify-content: flex-end; gap: .5rem; }
.modal-close     { cursor: pointer; font-size: 1.1rem; background: none; border: none; color: var(--texto-muted); }
.form-row        { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.calc-box        { background: var(--cinza-bg); border: 1px solid var(--cinza-borda); border-radius: var(--radius); padding: .6rem .85rem; font-size: .85rem; }
.calc-alerta     { background: var(--vermelho); border: 1px solid var(--verm-borda); border-radius: var(--radius); padding: .5rem .85rem; font-size: .85rem; color: var(--verm-texto); }

/* ── BANNER DE AVISOS (carregamento mês) ── */
.banner          { padding: .75rem 1.25rem; border-radius: var(--radius); margin-bottom: 1rem; display: flex; align-items: center; gap: .75rem; }
.banner-ambar    { background: var(--ambar-bg); border: 1px solid var(--ambar); color: var(--ambar-dark); }
.banner a        { font-weight: bold; }

/* ── FILTROS ── */
.filtros         { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: var(--radius); padding: .75rem 1rem; display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: 1rem; }
.filtros .form-group { margin: 0; }
.filtros label   { font-size: .78rem; }

/* ── RESPONSIVO ── */
@media (max-width: 768px) {
  .main-nav        { overflow-x: auto; flex-wrap: nowrap; }
  .kanban-board    { flex-direction: column; }
  .kanban-col      { min-width: 100%; }
  .form-row        { grid-template-columns: 1fr; }
  .kpi-grid        { grid-template-columns: 1fr 1fr; }
  .filtros         { flex-direction: column; }
  table th:not(:first-child):not(:last-child) { display: none; }
  td:not(:first-child):not(:last-child)       { display: none; }
}