:root{
  /* Paleta oficial da marca — extraída direto do logo (COIN-01.png) em
     10/07/2026: azul-marinho sólido + dourado em degradê. Antes era um azul
     genérico que não tinha relação nenhuma com a identidade visual real. */
  --coin-primary: #1b426e;
  --coin-primary-dark: #12314f;
  --coin-primary-soft: #eaf1f8;

  --coin-gold: #cca95d;
  --coin-gold-light: #eed579;
  --coin-gold-dark: #b28948;

  --coin-bg: #edf3f9;
  --coin-surface: #ffffff;
  --coin-border: #d8e2ee;

  --coin-text: #1f2a37;
  --coin-text-muted: #617284;

  --coin-danger: #b42318;
  --coin-success: #137a3b;
  --coin-warning: #b8860b;

  --coin-radius-sm: 12px;
  --coin-radius-md: 14px;
  --coin-radius-lg: 18px;

  --coin-shadow: 0 10px 24px rgba(15,34,57,.08);
  --coin-shadow-strong: 0 18px 40px rgba(15,34,57,.14);

  --coin-font: 'Inter', 'Segoe UI', Arial, Helvetica, sans-serif;

  --coin-sidebar-w: 64px;
  --coin-sidebar-w-expandido: 248px;
  --coin-header-h: 64px;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; font-family: var(--coin-font); color: var(--coin-text); background: var(--coin-bg); }

.coin-btn{
  font-family: var(--coin-font);
  border: none;
  border-radius: var(--coin-radius-sm);
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s ease, opacity .15s ease;
  background: var(--coin-primary);
  color: #fff;
}
.coin-btn:hover{ filter: brightness(0.95); }
.coin-btn:disabled{ opacity: .6; cursor: not-allowed; filter: none; }
.coin-btn.primary{ background: var(--coin-primary); color: #fff; }
.coin-btn.danger{ background: var(--coin-danger); color: #fff; }
.coin-btn.success{ background: var(--coin-success); color: #fff; }
.coin-btn.warning{ background: var(--coin-warning); color: #fff; }
.coin-btn.dark{ background: #1f2a37; color: #fff; }
.coin-btn.gold{ background: var(--coin-gold-dark); color: #fff; }
.coin-btn.ghost{ background: transparent; color: var(--coin-primary); border: 1px solid var(--coin-border); }
.coin-btn.ghost.danger-text{ color: var(--coin-danger); }
.coin-btn.ghost.warning-text{ color: var(--coin-warning); }

.coin-card{
  background: var(--coin-surface);
  border: 1px solid var(--coin-border);
  border-radius: var(--coin-radius-md);
  box-shadow: var(--coin-shadow);
  padding: 20px;
}

.coin-input{
  font-family: var(--coin-font);
  border: 1px solid var(--coin-border);
  border-radius: var(--coin-radius-sm);
  padding: 8px 12px;
  font-size: 14px;
  width: 100%;
}

.coin-btn.sm{ padding: 4px 10px; font-size: 12px; }
.coin-table{ width:100%; border-collapse: collapse; font-size: 14px; }
.coin-table th{
  position: sticky; top:0;
  background: var(--coin-primary);
  color: #fff;
  text-align:left; padding: 11px 12px;
  border-bottom: 2px solid var(--coin-primary);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.coin-table td{ padding: 10px 12px; border-bottom: 1px solid var(--coin-border); }
.coin-table tr:hover td{ background: #f8fbff; }

/* Cores condicionais do Controle Cadastral — replicam o WebApp original */
td.g20-ok{ background:#d9f2df !important; }
td.g20-no{ background:#f6d6d6 !important; }
td.g20-other{ background:#fff2cc !important; }

.coin-cc-nohscroll table.coin-table{ table-layout: fixed; width: 100%; }
.coin-cc-nohscroll table.coin-table td, .coin-cc-nohscroll table.coin-table th{
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.coin-modal-backdrop{
  position: fixed; inset:0; background: rgba(15,34,57,.35);
  display:flex; align-items:center; justify-content:center; z-index: 4000;
}
.coin-modal{
  background: var(--coin-surface); border-radius: var(--coin-radius-lg);
  box-shadow: var(--coin-shadow-strong); width: min(92vw, 480px); padding: 22px;
}

.coin-toast-wrap{ position: fixed; bottom: 20px; right: 20px; z-index: 5000; display:flex; flex-direction:column; gap:8px; }
.coin-toast{
  background: var(--coin-text); color: #fff; padding: 12px 16px; border-radius: var(--coin-radius-sm);
  box-shadow: var(--coin-shadow-strong); font-size: 14px; opacity: 0; transform: translateY(6px);
  transition: all .2s ease;
}
.coin-toast.show{ opacity:1; transform: translateY(0); }
.coin-toast.error{ background: var(--coin-danger); }