/* ============================================================
   AVA JH Instituto — Design System Global
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ========================
   DESIGN TOKENS
   ======================== */
:root {
  /* Cores Primárias — Verde JH Instituto */
  --primary:         #4a7c59;
  --primary-dark:    #3a6448;
  --primary-light:   #5d9470;
  --primary-subtle:  #eaf3ed;
  --primary-border:  #c0dbc9;

  /* Cores Secundárias */
  --secondary:       #6ba07a;
  --accent:          #8dc08d;
  --accent-light:    #c8e6c9;

  /* Superfícies */
  --surface:         #ffffff;
  --surface-2:       #f4f7f5;
  --background:      #f0f4f1;

  /* Texto */
  --text-primary:    #1a2e1c;
  --text-secondary:  #3d5440;
  --text-muted:      #7a8e7c;
  --text-inverse:    #ffffff;

  /* Bordas */
  --border:          #dce8de;
  --border-light:    #eef4ef;

  /* Estados */
  --success:         #2e7d32;
  --success-bg:      #e8f5e9;
  --warning:         #e65100;
  --warning-bg:      #fff3e0;
  --error:           #c62828;
  --error-bg:        #ffebee;
  --info:            #1565c0;
  --info-bg:         #e3f2fd;

  /* Tipografia */
  --font:            'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Espaçamentos */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* Bordas */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-full: 9999px;

  /* Sombras */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.09), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.1),  0 4px 8px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.13);
  --shadow-primary: 0 4px 20px rgba(74,124,89,0.3);

  /* Transições */
  --t:      0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* Sidebar */
  --sidebar-w: 264px;
}

/* ========================
   RESET
   ======================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--background);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: var(--font); }
ul, ol { list-style: none; }

/* ========================
   SCROLLBAR
   ======================== */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ========================
   ANIMAÇÕES
   ======================== */
@keyframes fadeIn    { from { opacity:0; transform:translateY(8px);  } to { opacity:1; transform:translateY(0);  } }
@keyframes fadeInUp  { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0);  } }
@keyframes fadeInL   { from { opacity:0; transform:translateX(-24px);} to { opacity:1; transform:translateX(0);  } }
@keyframes fadeInR   { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:translateX(0);  } }
@keyframes spin      { to { transform: rotate(360deg); } }
@keyframes pulse     { 0%,100% { opacity:1; } 50% { opacity:.5; } }
@keyframes shimmer   {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.anim-fade   { animation: fadeIn  0.4s ease both; }
.anim-up     { animation: fadeInUp 0.5s ease both; }

/* ========================
   TIPOGRAFIA
   ======================== */
h1 { font-size: 2.25rem;  font-weight: 800; line-height: 1.2; }
h2 { font-size: 1.75rem;  font-weight: 700; line-height: 1.3; }
h3 { font-size: 1.375rem; font-weight: 700; line-height: 1.4; }
h4 { font-size: 1.125rem; font-weight: 600; }
h5 { font-size: 1rem;     font-weight: 600; }

/* ========================
   BOTÕES
   ======================== */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  font-size: .875rem; font-weight: 600;
  transition: all var(--t);
  white-space: nowrap; cursor: pointer;
  border: 2px solid transparent;
  line-height: 1;
}
.btn-primary {
  background: var(--primary); color: #fff;
  box-shadow: var(--shadow-primary);
}
.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(74,124,89,.38);
}
.btn-outline {
  background: transparent; color: var(--primary);
  border-color: var(--primary);
}
.btn-outline:hover { background: var(--primary-subtle); }
.btn-ghost {
  background: transparent; color: var(--text-secondary);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text-primary); }
.btn-danger { background: var(--error); color: #fff; }
.btn-danger:hover { background: #b71c1c; }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #1b5e20; }

.btn-sm  { padding: var(--sp-2) var(--sp-3); font-size: .8125rem; border-radius: var(--r-sm); }
.btn-lg  { padding: var(--sp-4) var(--sp-8); font-size: 1rem;     border-radius: var(--r-lg); }
.btn-xl  { padding: var(--sp-5) var(--sp-10); font-size: 1rem; border-radius: var(--r-lg); }
.btn-full { width: 100%; justify-content: center; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }

.btn-loading {
  position: relative; color: transparent !important; pointer-events: none;
}
.btn-loading::after {
  content: ''; position: absolute;
  width: 16px; height: 16px;
  top: 50%; left: 50%; margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* ========================
   BADGES
   ======================== */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px var(--sp-2);
  border-radius: var(--r-full);
  font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.badge-primary { background: var(--primary-subtle); color: var(--primary-dark); }
.badge-success { background: var(--success-bg);  color: var(--success); }
.badge-warning { background: var(--warning-bg);  color: var(--warning); }
.badge-error   { background: var(--error-bg);    color: var(--error); }
.badge-info    { background: var(--info-bg);     color: var(--info); }
.badge-muted   { background: var(--surface-2);   color: var(--text-muted); }

/* ========================
   PROGRESS BARS
   ======================== */
.progress-bar {
  width: 100%; height: 8px;
  background: var(--border-light);
  border-radius: var(--r-full); overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: var(--r-full);
  transition: width 1.2s ease;
}
.progress-bar.sm { height: 5px; }
.progress-bar.lg { height: 12px; }

/* ========================
   CARDS GENÉRICO
   ======================== */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--t), transform var(--t);
}
.card:hover { box-shadow: var(--shadow-md); }
.card-body   { padding: var(--sp-6); }
.card-header {
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: space-between;
}
.card-footer {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border-light);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: space-between;
}

/* ========================
   AVATAR
   ======================== */
.avatar {
  border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; background: var(--primary-subtle); color: var(--primary);
}
.avatar img { width:100%; height:100%; object-fit:cover; }
.av-xs  { width:28px;  height:28px;  font-size:.7rem; }
.av-sm  { width:34px;  height:34px;  font-size:.8rem; }
.av-md  { width:40px;  height:40px;  font-size:.9rem; }
.av-lg  { width:48px;  height:48px;  font-size:1rem;  }
.av-xl  { width:64px;  height:64px;  font-size:1.25rem; }
.av-2xl { width:80px;  height:80px;  font-size:1.5rem; }

/* ========================
   FORMULÁRIOS
   ======================== */
.form-group { display:flex; flex-direction:column; gap:var(--sp-2); }
.form-label {
  font-size: .8125rem; font-weight: 600; color: var(--text-secondary);
}
.form-input {
  width: 100%; padding: var(--sp-3) var(--sp-4);
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  font-size: .9375rem; color: var(--text-primary);
  background: var(--surface);
  transition: border-color var(--t), box-shadow var(--t);
  outline: none;
}
.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(74,124,89,.12);
}
.form-input::placeholder { color: var(--text-muted); }
.form-input.error  { border-color: var(--error); }
.form-error { font-size: .8125rem; color: var(--error); }
.form-help  { font-size: .8125rem; color: var(--text-muted); }

textarea.form-input { resize: vertical; min-height: 96px; }

select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a7c59' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  padding-right: var(--sp-8);
}

/* ========================
   TABELAS
   ======================== */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-light);
  background: var(--surface);
}
table { width:100%; border-collapse: collapse; }
thead th {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}
tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-light);
  font-size: .875rem; color: var(--text-primary);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--t); }
tbody tr:hover td { background: var(--primary-subtle); }

/* ========================
   MODAIS
   ======================== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: var(--sp-4);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
}
.modal-overlay.open { opacity:1; visibility:visible; }
.modal {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  width:100%; max-width:540px; max-height:90vh; overflow-y:auto;
  transform: scale(.92) translateY(16px);
  transition: transform var(--t);
}
.modal-overlay.open .modal { transform: scale(1) translateY(0); }
.modal-header {
  padding: var(--sp-6);
  border-bottom: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-body   { padding: var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-4); }
.modal-footer {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border-light);
  display: flex; justify-content: flex-end; gap: var(--sp-3);
  background: var(--surface-2);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.modal-close {
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); font-size:20px; transition: all var(--t);
}
.modal-close:hover { background:var(--surface-2); color:var(--text-primary); }

/* ========================
   TOASTS
   ======================== */
#toastContainer {
  position: fixed; top:var(--sp-5); right:var(--sp-5);
  z-index: 2000; display:flex; flex-direction:column; gap:var(--sp-2);
}
.toast {
  background: var(--surface); border-radius:var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-4) var(--sp-5);
  display:flex; align-items:center; gap:var(--sp-3);
  min-width:300px; max-width:400px;
  animation: fadeInR .3s ease;
  border-left: 4px solid var(--primary);
  font-size:.875rem; font-weight:500;
}
.toast-success { border-left-color: var(--success); }
.toast-error   { border-left-color: var(--error); }
.toast-warning { border-left-color: var(--warning); }

/* ========================
   UTILIDADES
   ======================== */
.flex  { display:flex; }
.flex-col { display:flex; flex-direction:column; }
.items-center { align-items:center; }
.items-start  { align-items:flex-start; }
.justify-between { justify-content:space-between; }
.justify-center  { justify-content:center; }
.gap-1 { gap:var(--sp-1); }
.gap-2 { gap:var(--sp-2); }
.gap-3 { gap:var(--sp-3); }
.gap-4 { gap:var(--sp-4); }
.gap-6 { gap:var(--sp-6); }
.gap-8 { gap:var(--sp-8); }
.flex-1 { flex:1; }
.flex-shrink-0 { flex-shrink:0; }
.w-full { width:100%; }
.hidden { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.text-center { text-align:center; }
.text-right  { text-align:right; }
.text-xs  { font-size:.75rem; }
.text-sm  { font-size:.875rem; }
.text-lg  { font-size:1.125rem; }
.text-xl  { font-size:1.25rem; }
.text-2xl { font-size:1.5rem; }
.text-muted    { color:var(--text-muted); }
.text-secondary{ color:var(--text-secondary); }
.text-primary-c{ color:var(--primary); }
.text-success  { color:var(--success); }
.text-error    { color:var(--error); }
.font-medium   { font-weight:500; }
.font-semibold { font-weight:600; }
.font-bold     { font-weight:700; }
.font-extrabold{ font-weight:800; }
.mt-2 { margin-top:var(--sp-2); }
.mt-4 { margin-top:var(--sp-4); }
.mt-6 { margin-top:var(--sp-6); }
.mb-4 { margin-bottom:var(--sp-4); }
.mb-6 { margin-bottom:var(--sp-6); }
.p-4  { padding:var(--sp-4); }
.p-6  { padding:var(--sp-6); }

/* ========================
   LOGIN — LAYOUT
   ======================== */
.login-layout {
  display: flex; min-height: 100vh;
}

/* HERO (esquerdo) */
.login-hero {
  flex: 0 0 58%;
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #2a4d38 0%, #3d6b49 45%, #5d9470 100%);
}
.login-hero-photo {
  position: absolute; bottom: 0; right: 0;
  height: 92%; width: auto;
  object-fit: contain; object-position: bottom right;
  z-index: 1; pointer-events: none;
}
.login-hero-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(
    105deg,
    rgba(30,60,38,.75) 0%,
    rgba(42,77,56,.5)  40%,
    rgba(42,77,56,.1)  70%,
    transparent        100%
  );
}
.login-hero-content {
  position: relative; z-index: 3;
  height: 100%; display: flex; flex-direction: column;
  padding: var(--sp-10) var(--sp-10);
  color: #fff;
}
.login-logo-row {
  display:flex; align-items:center; gap:var(--sp-3);
  animation: fadeInL .6s ease;
}
.login-logo-row img {
  width:50px; height:50px; object-fit:contain;
  filter: brightness(0) invert(1);
}
.login-logo-row strong { display:block; font-size:1.125rem; font-weight:800; }
.login-logo-row span   { display:block; font-size:.7rem; opacity:.7; text-transform:uppercase; letter-spacing:.08em; }
.hero-main-text { margin-top: auto; animation: fadeInUp .8s .2s ease both; }
.hero-tag {
  display:inline-block;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-4);
  font-size: .75rem; font-weight:600;
  text-transform: uppercase; letter-spacing:.08em;
  margin-bottom: var(--sp-4);
  backdrop-filter: blur(8px);
}
.hero-main-text h1 {
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-weight: 800; color: #fff; line-height:1.2;
  margin-bottom: var(--sp-4);
}
.hero-main-text h1 em { font-style:normal; color: var(--accent-light); }
.hero-main-text p {
  font-size: 1.0625rem; line-height:1.7;
  color: rgba(255,255,255,.82); max-width:420px;
}
.hero-stats {
  display: flex; align-items:center; gap:var(--sp-6);
  margin-top: var(--sp-8); padding: var(--sp-5) var(--sp-6);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r-xl);
  backdrop-filter: blur(12px);
  animation: fadeInUp 1s .4s ease both;
  width: fit-content;
}
.h-stat { display:flex; flex-direction:column; align-items:center; gap:2px; }
.h-stat strong { font-size:1.6rem; font-weight:800; color:#fff; }
.h-stat span   { font-size:.7rem; color:rgba(255,255,255,.7); font-weight:500; }
.h-divider     { width:1px; height:40px; background:rgba(255,255,255,.25); }

/* PAINEL DIREITO */
.login-panel {
  flex:1; display:flex; align-items:center; justify-content:center;
  padding: var(--sp-8) var(--sp-6);
  background: #fff; overflow-y:auto;
}
.login-box {
  width:100%; max-width:420px;
  animation: fadeInR .55s ease;
}
.login-box-header { text-align:center; margin-bottom:var(--sp-8); }
.login-box-logo {
  width:68px; height:68px; object-fit:contain;
  margin: 0 auto var(--sp-4);
}
.login-box-header h2 {
  font-size:1.625rem; font-weight:800; color:var(--text-primary);
  margin-bottom:var(--sp-2);
}
.login-box-header p { font-size:.9rem; color:var(--text-muted); }

.login-form { display:flex; flex-direction:column; gap:var(--sp-5); }
.label-row { display:flex; align-items:center; justify-content:space-between; }
.forgot-link {
  font-size:.8125rem; color:var(--primary); font-weight:600;
  transition:color var(--t);
}
.forgot-link:hover { color:var(--primary-dark); }
.input-icon-wrap { position:relative; display:flex; align-items:center; }
.input-icon {
  position:absolute; left:var(--sp-3); font-size:16px;
  opacity:.45; pointer-events:none; line-height:1;
}
.input-icon-wrap .form-input { padding-left:2.6rem; }
.show-pass {
  position:absolute; right:var(--sp-3); font-size:15px;
  color:var(--text-muted); padding:4px; border-radius:4px;
  transition:color var(--t); line-height:1;
}
.show-pass:hover { color:var(--primary); }

.login-alert {
  display:flex; align-items:center; gap:var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--error-bg);
  border: 1px solid #f5c6c6;
  border-radius: var(--r-md);
  color: var(--error); font-size:.875rem; font-weight:500;
}

/* CREDENCIAIS DEMO */
.demo-box {
  margin-top:var(--sp-6); padding:var(--sp-4);
  background:var(--surface-2);
  border-radius:var(--r-lg);
  border:1px dashed var(--border);
}
.demo-box-title {
  font-size:.7rem; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.07em;
  margin-bottom:var(--sp-3);
}
.demo-row {
  display:flex; align-items:center; justify-content:space-between;
  padding: var(--sp-2) var(--sp-3); border-radius:var(--r-sm);
  cursor:pointer; transition:background var(--t); gap:var(--sp-3);
}
.demo-row:hover { background:var(--primary-subtle); }
.demo-role { font-size:.8rem; font-weight:600; color:var(--text-secondary); white-space:nowrap; }
.demo-email {
  font-size:.75rem; color:var(--primary); font-family:monospace;
  background:var(--primary-subtle); padding:2px 6px; border-radius:4px;
}

.login-footer {
  text-align:center; font-size:.75rem; color:var(--text-muted);
  margin-top:var(--sp-6);
}

/* Responsivo login */
@media (max-width:900px) { .login-hero { display:none; } }
@media (max-width:480px) {
  .login-panel { padding:var(--sp-6) var(--sp-4); align-items:flex-start; }
}