/* ============================================================
   Projetos Meio Ambiente — Design System (UX / responsivo)
   Fonte única de verdade para tipografia, cores, componentes
   e responsividade. Carregado por TODAS as páginas.
   ============================================================ */

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

:root{
  /* ---- Marca (verde único — consolida os ~9 tons antigos) ---- */
  --brand-700:#075c2d;   /* títulos / hover            */
  --brand-600:#0f6b35;   /* cor primária               */
  --brand-500:#168344;   /* gradiente / CTA            */
  --brand-100:#cdead7;
  --brand-50 :#e4f3e9;   /* fundos suaves / chips      */

  /* compat: aliases usados em estilos antigos */
  --green:#0f6b35;
  --green-2:#168344;
  --green2:#168344;
  --soft:#e4f3e9;

  /* ---- Neutros ---- */
  --bg:#f4f7f5;
  --card:#ffffff;
  --text:#101828;
  --muted:#667085;
  --border:#e5e7eb;
  --border-strong:#d0d5dd;

  /* ---- Estados ---- */
  --success:#067647;  --success-bg:#e7f6ee;
  --warning:#b54708;  --warning-bg:#fdf2e3;
  --danger:#b42318;   --danger-bg:#fdeceb;
  --info:#1d4ed8;     --info-bg:#e7eefc;

  /* ---- Tipografia (fluida: encolhe sozinha no mobile) ---- */
  --font:'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;
  --fs-h1:clamp(1.6rem, 4.5vw, 2rem);
  --fs-h2:clamp(1.25rem, 3vw, 1.5rem);
  --fs-h3:1.0625rem;
  --fs-body:1rem;        /* 16px — evita o zoom automático do iOS nos inputs */
  --fs-small:0.8125rem;

  /* ---- Espaçamento ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-8:48px;

  /* ---- Raios / sombras ---- */
  --radius-sm:9px;
  --radius:14px;
  --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow:0 8px 22px rgba(16,24,40,.08);
  --shadow-lg:0 18px 40px rgba(16,24,40,.16);
}

/* ============================================================
   BASE — tipografia, reset leve, acessibilidade
   ============================================================ */
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
}
button, input, select, textarea{ font-family:var(--font); }

/* iOS dá zoom no campo quando a fonte é < 16px. Garante 16px nos inputs. */
input, select, textarea{ font-size:max(16px, 1rem); }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--brand-500);
  outline-offset:2px;
}
img{ max-width:100%; height:auto; }
*{ box-sizing:border-box; }

/* ============================================================
   LAYOUT — área de conteúdo das páginas internas
   (combina com a sidebar fixa de app-sidebar.css)
   ============================================================ */
.ds-page{
  max-width:1180px;
  margin:0 auto;
  padding:32px;
}
.ds-page-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:24px;
}
.ds-page-header h1{
  margin:0;
  font-size:var(--fs-h1);
  font-weight:800;
  color:var(--brand-700);
  letter-spacing:-.01em;
}
.ds-page-header p{ margin:6px 0 0; color:var(--muted); }
.ds-page-header__actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ============================================================
   BOTÕES
   ============================================================ */
.ds-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:11px 18px;
  border:1px solid transparent; border-radius:var(--radius-sm);
  font-size:0.9375rem; font-weight:700; line-height:1;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background .15s, border-color .15s, transform .15s, box-shadow .15s, opacity .15s;
}
.ds-btn:active{ transform:translateY(1px); }
.ds-btn:disabled{ opacity:.55; cursor:not-allowed; }
.ds-btn--primary{ background:var(--brand-600); color:#fff; }
.ds-btn--primary:hover{ background:var(--brand-700); }
.ds-btn--secondary{ background:#fff; color:var(--brand-700); border-color:var(--border-strong); }
.ds-btn--secondary:hover{ border-color:var(--brand-500); background:var(--brand-50); }
.ds-btn--danger{ background:var(--danger); color:#fff; }
.ds-btn--danger:hover{ filter:brightness(.93); }
.ds-btn--ghost{ background:transparent; color:var(--brand-700); }
.ds-btn--ghost:hover{ background:var(--brand-50); }
.ds-btn--sm{ min-height:36px; padding:8px 12px; font-size:0.875rem; }
.ds-btn--block{ width:100%; }

/* ============================================================
   CARDS
   ============================================================ */
.ds-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:24px;
}
.ds-card__title{ margin:0 0 14px; font-size:var(--fs-h3); font-weight:700; color:var(--text); }

/* ============================================================
   MÉTRICAS / KPI
   ============================================================ */
.ds-metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:18px;
  margin-bottom:24px;
}
.ds-metric{
  background:var(--card);
  border:1px solid var(--border);
  border-left:5px solid var(--brand-500);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:20px 22px;
}
.ds-metric h3{ margin:0; font-size:0.875rem; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:8px; }
.ds-metric strong{ display:block; margin-top:8px; font-size:2rem; font-weight:800; color:var(--text); }
.ds-metric small{ color:var(--muted); font-size:var(--fs-small); }

/* ============================================================
   TABELAS
   ============================================================ */
.ds-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius); }
.ds-table{ width:100%; border-collapse:collapse; }
.ds-table th, .ds-table td{ padding:13px 14px; text-align:left; border-bottom:1px solid var(--border); }
.ds-table thead th{
  font-size:var(--fs-small); font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.03em; background:#fafbfc;
}
.ds-table tbody tr:hover{ background:var(--brand-50); }
.ds-table tbody tr:last-child td{ border-bottom:0; }

/* ============================================================
   FORMULÁRIOS
   ============================================================ */
.ds-form-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; }
.ds-field{ display:flex; flex-direction:column; gap:6px; }
.ds-label{ font-size:0.875rem; font-weight:600; color:var(--text); }
.ds-input, .ds-select, .ds-textarea{
  width:100%; padding:11px 13px;
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  background:#fff; color:var(--text);
  transition:border-color .15s, box-shadow .15s;
}
.ds-input:focus, .ds-select:focus, .ds-textarea:focus{
  outline:0; border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(22,131,68,.15);
}
.ds-textarea{ min-height:110px; resize:vertical; }
.ds-input:disabled, .ds-select:disabled, .ds-textarea:disabled{ background:#f5f6f7; color:var(--muted); }
.ds-help{ font-size:var(--fs-small); color:var(--muted); }
.ds-error{ font-size:var(--fs-small); color:var(--danger); }
.ds-field--invalid .ds-input, .ds-field--invalid .ds-select, .ds-field--invalid .ds-textarea{
  border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-bg);
}

/* ============================================================
   BADGES / STATUS
   ============================================================ */
.ds-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:999px;
  font-size:var(--fs-small); font-weight:700; line-height:1.5;
  background:#eef1f4; color:#3a4452;
}
.ds-badge--success{ background:var(--success-bg); color:var(--success); }
.ds-badge--warning{ background:var(--warning-bg); color:var(--warning); }
.ds-badge--danger{ background:var(--danger-bg); color:var(--danger); }
.ds-badge--info{ background:var(--info-bg); color:var(--info); }
.ds-badge--dot::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }

/* ============================================================
   ALERTAS
   ============================================================ */
.ds-alert{
  display:flex; gap:10px; align-items:flex-start;
  padding:13px 16px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:#fff; font-size:0.9375rem;
}
.ds-alert--success{ background:var(--success-bg); border-color:#bfe5cf; color:#0a5132; }
.ds-alert--warn{ background:var(--warning-bg); border-color:#f3d7ab; color:#7a3608; }
.ds-alert--danger{ background:var(--danger-bg); border-color:#f3c2bd; color:#8a1c14; }
.ds-alert--info{ background:var(--info-bg); border-color:#c3d3f7; color:#1a3a9c; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.ds-empty{ text-align:center; padding:48px 24px; color:var(--muted); }
.ds-empty .ds-empty__icon{ font-size:42px; }
.ds-empty h3{ margin:12px 0 6px; color:var(--text); }
.ds-list-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 16px; background:#f8faf9; border-top:1px solid var(--border);
  color:var(--muted); font-size:.875rem; font-weight:700;
}
.ds-list-toggle--table{ display:table-row; }
.ds-list-toggle--table td{ padding:0!important; background:#f8faf9!important; }
.ds-list-toggle button{
  border:1px solid #b7dbc5; background:var(--brand-50); color:var(--brand-700);
  border-radius:8px; min-height:34px; padding:6px 12px; cursor:pointer; font-weight:800;
}
.ds-list-toggle button:hover{ background:#dff3e7; }

/* ============================================================
   MODAL
   ============================================================ */
.ds-modal{
  position:fixed; inset:0; z-index:11000;
  display:none; align-items:center; justify-content:center;
  padding:18px; background:rgba(16,24,40,.5);
}
.ds-modal.open{ display:flex; }
.ds-modal__box{
  background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  width:100%; max-width:540px; max-height:90vh; overflow:auto; padding:26px;
}
.ds-modal__title{ margin:0 0 16px; font-size:var(--fs-h2); font-weight:800; color:var(--brand-700); }
.ds-modal__footer{ display:flex; justify-content:flex-end; gap:10px; margin-top:22px; flex-wrap:wrap; }

/* ============================================================
   AUTENTICAÇÃO (login / registro / ativar-conta)
   layout split-screen que vira coluna única no mobile
   ============================================================ */
.ds-auth{ min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; }
.ds-auth__brand{
  background:linear-gradient(135deg,var(--brand-700),var(--brand-500));
  color:#fff; padding:clamp(36px,6vw,70px);
  display:flex; flex-direction:column; justify-content:center;
}
.ds-auth__brand h1{ font-size:clamp(1.9rem,4vw,2.6rem); margin:0 0 16px; }
.ds-auth__brand p{ font-size:1.0625rem; line-height:1.6; max-width:560px; opacity:.95; }
.ds-auth__panel{ display:flex; align-items:center; justify-content:center; padding:clamp(24px,5vw,48px); }
.ds-auth__card{ background:#fff; width:100%; max-width:430px; padding:clamp(26px,4vw,38px); border-radius:var(--radius-lg); box-shadow:var(--shadow); }

/* ============================================================
   UTILITÁRIOS
   ============================================================ */
.ds-stack-v{ display:flex; flex-direction:column; gap:16px; }
.ds-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.ds-row--between{ justify-content:space-between; }
.ds-spacer{ flex:1; }
.ds-muted{ color:var(--muted); }
.ds-text-small{ font-size:var(--fs-small); }
.ds-hidden{ display:none !important; }
.ds-mt-0{ margin-top:0; } .ds-mb-0{ margin-bottom:0; }

/* ============================================================
   COMPAT — classes legadas mapeadas aos novos tokens, para
   páginas ainda não migradas continuarem coerentes.
   ============================================================ */
.saas-card, .card{ background:var(--card); border-radius:var(--radius); }
.saas-primary-btn{ background:var(--brand-600); color:#fff; }

/* ============================================================
   RESPONSIVIDADE — toque, tabelas, layout
   ============================================================ */
@media (max-width:1000px){
  .ds-page{ padding:80px 18px 32px; }   /* espaço p/ o botão ☰ da sidebar */
}
@media (max-width:640px){
  .ds-page{ padding-top:72px; }
  .ds-card{ padding:18px; }
  .ds-page-header{ margin-bottom:18px; }
  .ds-page-header__actions{ width:100%; }
  .ds-page-header__actions .ds-btn{ flex:1; }

  /* tabelas: rolam horizontalmente sem quebrar o layout */
  .saas-card, .card, .ds-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .saas-table, .ds-table{ font-size:0.875rem; }
  .saas-table th, .saas-table td, .ds-table th, .ds-table td{ padding:10px 8px; }

  /* alvos de toque confortáveis (mín. 44px) */
  .btn, .saas-primary-btn, .saas-tab, .ds-btn, button{ min-height:44px; }

  .ds-modal__box{ padding:20px; }
}

/* ---- Padrão SaaS opt-in: tabela vira "cards" empilhados no mobile ----
   Ative com a classe .ds-stack na <table> e data-label="Coluna" em cada <td>. */
@media (max-width:640px){
  table.ds-stack thead{ display:none; }
  table.ds-stack tr{
    display:block; margin-bottom:12px; border:1px solid var(--border);
    border-radius:12px; padding:6px 12px; background:var(--card);
  }
  table.ds-stack td{
    display:flex; justify-content:space-between; gap:16px;
    border:0; border-bottom:1px solid var(--border); padding:10px 0; text-align:right;
  }
  table.ds-stack td:last-child{ border-bottom:0; }
  table.ds-stack td::before{ content:attr(data-label); font-weight:700; color:var(--muted); text-align:left; }
}

/* ---- Layout de autenticação vira coluna única no mobile ---- */
@media (max-width:860px){
  .ds-auth{ grid-template-columns:1fr; }
  .ds-auth__brand{ display:none; }   /* esconde o painel decorativo, prioriza o formulário */
}