/*
  MATRIPAR UI – Tema Verde / Verde Oliva
  Autor: ChatGPT (GPT-5 Thinking)
  Data: 2025-09-21

  Como usar:
  1) Remova o <style> embutido do seu HTML de login.
  2) Adicione: <link rel="stylesheet" href="matripar.css"> no <head>.
  3) As classes aqui seguem o mesmo padrão que vínhamos usando (cards arredondados,
     foco com ring verde, gradiente de fundo, botões pílula, etc.).

  Dica: Para alternar rapidamente tonalidades, ajuste as variáveis no :root.
*/

/* ========================
   Paleta / Design Tokens
   ======================== */
:root{
  /* Verdes principais */
  --g1:#2e7d32;          /* verde primário escuro */
  --g2:#81c784;          /* verde claro para gradiente */

  /* Olivas (mates, corporativo) */
  --olive-900:#2b3a2f;
  --olive-800:#334a39;
  --olive-700:#3d5a40;
  --olive-600:#49684a;
  --olive-500:#556b2f;   /* clássico "olive drab" modernizado */
  --olive-400:#6f8a57;
  --olive-300:#8aa678;
  --olive-200:#b5c6a7;
  --olive-100:#dfe8d7;

  /* Acentos e estado */
  --accent: var(--g1);
  --accent-600:#1b5e20;
  --accent-700:#114317;
  --ring: rgba(46,125,50,.18);

  /* Texto e neutros */
  --ink:#1f2937;         /* quase grafite */
  --ink-2:#374151;
  --muted:#6b7280;       /* cinza legível */
  --line:#d6dde3;        /* borda leve */
  --soft:#e8f5e9;        /* verde bem claro de fundo */
  --white:#fff;

  /* Feedback */
  --ok:#2e7d32;
  --ok-ink:#0c3b13;
  --warn:#b45309;
  --bad:#d32f2f;
  --info:#0ea5e9;

  /* Raio, sombras, espaçamento */
  --r-lg:22px;           /* cartão grande */
  --r-md:14px;           /* médio */
  --r-sm:10px;           /* pequeno */
  --shadow-1:0 10px 24px rgba(0,0,0,.16);
  --shadow-2:0 18px 36px rgba(0,0,0,.22);
  --space: clamp(16px, 2vw, 22px);
}

/* Modo escuro opcional (data-theme="dark" no <html> ou <body>) */
[data-theme="dark"]{
  --ink:#e5e7eb;
  --ink-2:#f3f4f6;
  --muted:#a9b0b8;
  --line:#3a4a3f;
  --soft:#1d2a20;
  --white:#0e1410;
  --shadow-1:0 10px 24px rgba(0,0,0,.5);
  --shadow-2:0 18px 36px rgba(0,0,0,.6);
}

/* ========================
   Base / Resets
   ======================== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  color:var(--ink);
  background: linear-gradient(135deg, var(--g1), var(--g2));
}

img{ max-width:100%; display:block }
button,input,select,textarea{ font:inherit; color:inherit }
input::placeholder{ color:#9aa4af }

/* ========================
   Layouts utilitários
   ======================== */
.container{ width:min(1000px,92vw); margin-inline:auto }
.center-screen{ min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:20px }
.stack{ display:flex; flex-direction:column; gap:var(--space) }
.row{ display:flex; align-items:center; gap:var(--space) }

/* ========================
   Cartões / Superfícies
   ======================== */
.card{
  background: color-mix(in srgb, var(--white) 97%, transparent);
  border-radius: var(--r-lg);
  padding: calc(var(--space) * 1.2);
  box-shadow: var(--shadow-2);
}
.card.soft{ background: var(--soft) }
.card.border{ border:1px solid var(--line) }

/* ========================
   Tipografia
   ======================== */
.h1{ font-weight:700; letter-spacing:.4px; color:var(--accent); margin:0 0 12px }
.h2{ font-weight:700; color:var(--olive-700); margin:0 0 8px }
.muted{ color:var(--muted) }
.small{ font-size:.92rem }

/* ========================
   Formulários
   ======================== */
.group{ position:relative; margin:14px 0 }
.input{
  width:100%; border:1px solid var(--line); border-radius:30px;
  padding:12px 44px; font-size:1rem; outline:0;
  background:var(--white);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
.input[disabled]{ background:#f3f6f4; color:#94a3a8 }

.icon-left{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--accent); font-size:1rem }
.btn-icon-right{ position:absolute; right:12px; top:50%; transform:translateY(-50%); background:transparent; border:0; cursor:pointer; color:#607d8b; font-size:1.05rem }

.checkbox{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.94rem }
.checkbox input{ width:16px; height:16px; accent-color: var(--accent) }

.label{ display:block; margin:8px 0 6px; color:var(--ink-2); font-weight:600 }
.help{ font-size:.9rem; color:var(--muted) }

/* ========================
   Botões
   ======================== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; user-select:none; border:0; border-radius:30px; padding:12px 18px; font-weight:700; text-decoration:none; transition: transform .15s, background .2s, box-shadow .2s }
.btn:active{ transform: translateY(0) scale(.98) }
.btn[disabled]{ opacity:.7; cursor:not-allowed; transform:none }

.btn-primary{ background: var(--accent); color:var(--white) }
.btn-primary:hover{ background: var(--accent-600); transform: translateY(-1px) }

.btn-olive{ background: var(--olive-700); color:var(--white) }
.btn-olive:hover{ background: var(--olive-800); transform: translateY(-1px) }

.btn-outline{ background:transparent; color:var(--accent); border:1px solid var(--accent) }
.btn-outline:hover{ background: color-mix(in srgb, var(--accent) 10%, transparent) }

.btn-soft{ background: color-mix(in srgb, var(--accent) 12%, var(--white)); color: var(--accent-700) }
.btn-soft:hover{ background: color-mix(in srgb, var(--accent) 18%, var(--white)) }

/* ========================
   Links
   ======================== */
.link{ color:var(--accent); text-decoration:none; font-weight:600 }
.link:hover{ color:var(--accent-600); text-decoration:underline }

/* ========================
   Mensagens de status
   ======================== */
.msg{ margin-top:10px; font-size:.94rem }
.msg.ok{ color: var(--ok) }
.msg.error{ color: var(--bad) }
.msg.warn{ color: var(--warn) }
.msg.info{ color: var(--info) }

.alert{ padding:12px 14px; border-radius: var(--r-sm); border:1px solid; background:var(--white) }
.alert.ok{ color:var(--ok-ink); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 8%, var(--white)) }
.alert.bad{ color:#7a1212; border-color: color-mix(in srgb, var(--bad) 40%, transparent); background: color-mix(in srgb, var(--bad) 8%, var(--white)) }
.alert.warn{ color:#4a2e0a; border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 8%, var(--white)) }

/* ========================
   Tabelas (para páginas internas)
   ======================== */
.table{ width:100%; border-collapse:separate; border-spacing:0; background:var(--white); border-radius:var(--r-md); overflow:hidden; box-shadow: var(--shadow-1) }
.table thead th{ text-align:left; font-weight:700; color:var(--olive-700); background: color-mix(in srgb, var(--olive-100) 55%, var(--white)); padding:12px 14px; border-bottom:1px solid var(--line) }
.table tbody td{ padding:12px 14px; border-bottom:1px solid var(--line) }
.table tbody tr:hover{ background: color-mix(in srgb, var(--olive-100) 35%, var(--white)) }

/* ========================
   Badges e Chips
   ======================== */
.badge{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-weight:600; font-size:.82rem; border:1px solid transparent }
.badge.olive{ background: color-mix(in srgb, var(--olive-300) 25%, var(--white)); color:var(--olive-800); border-color: color-mix(in srgb, var(--olive-400) 40%, transparent) }
.badge.ok{ background: color-mix(in srgb, var(--ok) 16%, var(--white)); color:var(--ok-ink) }
.badge.warn{ background: color-mix(in srgb, var(--warn) 12%, var(--white)); color:#4a2e0a }

/* ========================
   Navegação topo (navbar leve)
   ======================== */
.navbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 18px; border-radius:var(--r-md); background: color-mix(in srgb, var(--olive-100) 60%, var(--white)); border:1px solid var(--line); box-shadow: var(--shadow-1) }
.navbar .brand{ font-weight:800; color:var(--olive-800); letter-spacing:.5px }
.navbar .actions{ display:flex; align-items:center; gap:10px }

/* ========================
   Sidebar (apps internos)
   ======================== */
.sidebar{ width:260px; background: color-mix(in srgb, var(--olive-100) 75%, var(--white)); border-right:1px solid var(--line); min-height:100dvh; padding:18px }
.sidebar .title{ font-weight:800; color:var(--olive-800); margin-bottom:10px }
.sidebar .item{ display:block; padding:10px 12px; border-radius:12px; color:var(--ink); text-decoration:none; font-weight:600 }
.sidebar .item:hover{ background: color-mix(in srgb, var(--olive-100) 50%, var(--white)) }
.sidebar .item.active{ background: color-mix(in srgb, var(--accent) 10%, var(--white)); color:var(--accent-700); border:1px solid color-mix(in srgb, var(--accent) 25%, transparent) }

/* ========================
   Footer
   ======================== */
.footer{ margin-top:20px; color:var(--muted); font-size:.82rem }

/* ========================
   Componentes extras úteis
   ======================== */
.progress{ width:100%; height:10px; border-radius:999px; background:#e5efe6; overflow:hidden }
.progress > .bar{ height:100%; width:0; background: linear-gradient(90deg, var(--olive-700), var(--g1)); transition: width .4s ease }

.pagination{ display:flex; align-items:center; gap:8px }
.pagination .page{ min-width:36px; height:36px; display:grid; place-items:center; padding:0 10px; border-radius:12px; border:1px solid var(--line); background:var(--white); text-decoration:none; color:inherit }
.pagination .page.active{ background: var(--accent); color:#fff; border-color:transparent }

.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(0,0,0,.35); padding:20px }
.modal.open{ display:flex }
.modal .box{ background:var(--white); border-radius:20px; width:min(560px, 96vw); padding:22px; box-shadow: var(--shadow-2) }

.tooltip{ position:relative }
.tooltip:hover::after{ content: attr(data-tip); position:absolute; left:50%; transform:translateX(-50%); bottom:calc(100% + 10px); background:var(--olive-800); color:#fff; padding:6px 10px; border-radius:8px; white-space:nowrap; font-size:.85rem; box-shadow: var(--shadow-1) }

.toast{ position:fixed; right:18px; bottom:18px; background:var(--white); border:1px solid var(--line); border-radius:16px; padding:12px 14px; box-shadow: var(--shadow-2) }

.spinner{ width:22px; height:22px; border-radius:50%; border:3px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); animation: spin .9s linear infinite }
@keyframes spin{ to{ transform: rotate(360deg) } }

/* ========================
   Página de Login (mapeando seu HTML)
   ======================== */
.login{ width:min(420px, 94vw); background: color-mix(in srgb, var(--white) 97%, transparent); border-radius: var(--r-lg); padding: 34px 26px; box-shadow: var(--shadow-2); animation: fadeIn .6s ease; text-align:center }
@keyframes fadeIn{ from{opacity:0; transform:translateY(-10px)} to{opacity:1; transform:translateY(0)} }
.login h1{ margin:0 0 18px; color:var(--accent); font-weight:700; letter-spacing:.4px }
.login .group .input{ padding-left:44px; padding-right:44px }
.login .actions{ margin-top:10px; display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:.92rem }
.login .btn-submit{ width:100%; margin-top:14px }
.login .link{ display:block; margin-top:12px }

/* ========================
   Utilitários de espaçamento/cor
   ======================== */
.p-0{ padding:0 } .p-1{ padding:6px } .p-2{ padding:10px } .p-3{ padding:14px } .p-4{ padding:18px }
.mt-1{ margin-top:6px } .mt-2{ margin-top:10px } .mt-3{ margin-top:14px } .mt-4{ margin-top:18px }
.round-lg{ border-radius: var(--r-lg) } .round-md{ border-radius: var(--r-md) } .round-sm{ border-radius: var(--r-sm) }
.bg-soft{ background: var(--soft) } .bg-white{ background: var(--white) }
.text-olive{ color: var(--olive-700) } .text-muted{ color: var(--muted) }
.border{ border:1px solid var(--line) }

/* ========================
   A11y
   ======================== */
:focus-visible{ outline: none; box-shadow: 0 0 0 3px var(--ring) }
/* Centralizar logo no card de login */
/* FAIXA DO TOPO */
.hero-band{
  position:relative;
  margin:-8px -8px 46px;           /* + espaço embaixo p/ não atropelar inputs */
  height:140px;                    /* faixa um pouco mais alta */
  background: linear-gradient(135deg, var(--olive-700), var(--g1));
  border-radius:18px 18px 0 0;
  box-shadow: inset 0 -10px 18px rgba(0,0,0,.08);
}

/* LOGO SOBREPOSTA – maior e mais alta */
/* ===== Logo sobreposta (largura controlada) ===== */
/* ====== Hero embutido (logo DENTRO da faixa) ====== */
.hero-band{
  position: relative;
  /* altura automática, com mínimo para manter presença visual */
  min-height: 140px;
  height: auto;

  /* padding cria as “bordas de respiro” ao redor da logo */
  padding: 18px 24px;

  background: linear-gradient(135deg, var(--olive-700), var(--g1));
  border-radius: 18px;
  box-shadow: inset 0 -10px 18px rgba(0,0,0,.08);

  /* centraliza conteúdo */
  display: flex;
  align-items: center;
  justify-content: center;

  /* afasta o formulário abaixo */
  margin: -8px -8px 28px;
}

/* Modo “fit”: anula absoluto e usa largura máxima dentro da faixa */
.hero-logo.hero-fit{
  position: static !important;   /* cancela o absolute da versão sobreposta */
  left: auto; top: auto; transform: none;

  /* controla a largura para caber dentro da faixa com folga */
  width: min(360px, calc(100% - 48px));
  height: auto;

  display: block;
  background: #fff;
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

/* Responsivo */
@media (max-width: 420px){
  .hero-band{
    min-height: 120px;
    padding: 16px 18px;
    margin-bottom: 24px;
  }
  .hero-logo.hero-fit{
    width: min(260px, calc(100% - 36px));
    border-radius: 14px;
    padding: 8px 12px;
  }
}


/* ========================
   Exemplos rápidos (opcional)
   ======================== */
/**** Botão padrão de ação ****/
button[type="submit"], .btn-submit{ composes: btn btn-primary; }
/* Se seu bundler não suporta `composes`, apenas aplique as classes "btn btn-primary" no HTML. */
