/* ============================================================
   CMC Supervisor v2.0 — Components
   ============================================================ */

/* ─── Card ─── */
.card { background:var(--surface); border-radius:var(--radius); border:1px solid var(--gray-border); padding:var(--space-7); margin-bottom:var(--space-5); animation:fadeIn .3s var(--ease); }
.card-title { font-size:var(--text-sm); font-weight:600; text-transform:uppercase; letter-spacing:.6px; color:var(--text-3); margin-bottom:var(--space-6); }

/* ─── Inputs ─── */
label { display:block; font-size:var(--text-base); font-weight:500; color:var(--text); margin-bottom:var(--space-2); }
label .required { color:var(--red); margin-left:2px; }
input[type="text"],input[type="email"],input[type="password"],input[type="date"],select,textarea { width:100%; border:1px solid var(--gray-border); border-radius:var(--radius-sm); padding:11px 13px; font-family:var(--font-sans); font-size:var(--text-base); color:var(--text); background:var(--gray); outline:none; transition:border-color var(--duration),background var(--duration),box-shadow var(--duration); margin-bottom:var(--space-6); }
input:focus,select:focus,textarea:focus { border-color:var(--azul-md); background:var(--white); box-shadow:0 0 0 3px rgba(46,117,182,.1); }
input.error,select.error,textarea.error { border-color:var(--red); background:var(--red-lt); }
textarea { resize:vertical; min-height:80px; }

/* ─── Botões ─── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3); padding:13px var(--space-7); border-radius:var(--radius-sm); font-family:var(--font-sans); font-size:var(--text-base); font-weight:600; cursor:pointer; border:none; transition:opacity var(--duration),transform .1s,box-shadow var(--duration); line-height:1; }
.btn:active { transform:scale(.98); opacity:.9; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn-primary { background:var(--azul); color:var(--white); }
.btn-primary:hover:not(:disabled) { background:var(--azul-dark); box-shadow:var(--shadow-md); }
.btn-success { background:var(--verde); color:var(--white); }
.btn-danger { background:var(--red); color:var(--white); }
.btn-outline { background:transparent; border:1.5px solid var(--gray-border); color:var(--text-2); }
.btn-outline:hover:not(:disabled) { border-color:var(--azul-md); color:var(--azul); }
.btn-row { display:flex; gap:var(--space-4); margin-top:var(--space-3); }
.btn-row .btn { flex:1; }
.btn-full { width:100%; padding:15px; font-size:15px; }
.btn .spinner { width:16px; height:16px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .6s linear infinite; }

/* ─── Pills ─── */
.pill { display:inline-block; padding:3px 10px; border-radius:var(--radius-full); font-size:var(--text-xs); font-weight:600; }
.pill-ok { background:var(--verde-lt); color:var(--verde); }
.pill-warn { background:var(--amber-lt); color:var(--amber); }
.pill-bad { background:var(--red-lt); color:var(--red); }
.pill-info { background:var(--azul-lt); color:var(--azul); }

/* ─── Chips ─── */
.chips-wrap { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-3); }
.chip { display:inline-flex; align-items:center; gap:var(--space-2); background:var(--azul-lt); border:1px solid #B5D4F4; border-radius:var(--radius-full); padding:5px 10px 5px 12px; font-size:13px; font-weight:500; color:var(--azul); animation:chipIn .2s var(--ease); }
.chip-remove { background:none; border:none; color:var(--azul-md); font-size:var(--text-base); cursor:pointer; padding:0; line-height:1; border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; }
.chip-remove:hover { background:rgba(31,78,121,.15); }
.chip-count { font-size:var(--text-sm); color:var(--text-3); margin-top:2px; }

/* ─── Toast ─── */
.toast { position:fixed; top:20px; right:20px; padding:14px 20px; border-radius:var(--radius-sm); font-size:var(--text-base); font-weight:500; color:var(--white); z-index:9999; animation:slideUp .3s var(--ease); box-shadow:var(--shadow-lg); max-width:360px; }
.toast-success { background:var(--verde); }
.toast-error { background:var(--red); }
.toast-info { background:var(--azul); }

/* ─── Modal ─── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(4px); z-index:1000; display:flex; align-items:center; justify-content:center; padding:var(--space-7); animation:fadeIn .2s var(--ease); }
.modal { background:var(--surface); border-radius:var(--radius-lg); width:100%; max-width:500px; max-height:90vh; overflow-y:auto; padding:var(--space-9); animation:slideUp .3s var(--ease); box-shadow:var(--shadow-lg); }
.modal-title { font-size:var(--text-lg); font-weight:600; margin-bottom:var(--space-7); }

/* ─── Login ─── */
.login-container { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--space-7); background:linear-gradient(135deg,var(--azul-dark) 0%,var(--azul) 50%,var(--azul-md) 100%); }
.login-box { background:var(--surface); border-radius:var(--radius-lg); padding:var(--space-12); width:100%; max-width:400px; box-shadow:var(--shadow-lg); animation:slideUp .5s var(--ease); }
.login-logo { text-align:center; margin-bottom:var(--space-9); }
.login-logo h1 { font-size:var(--text-xl); color:var(--azul); }
.login-logo p { font-size:var(--text-sm); color:var(--text-3); margin-top:var(--space-1); }