/* ==========================================================================
   GESTOR DE PACIENTES — Design Tokens
   Paleta: verde oliva escuro + dourado-azeite | Serif orgânica + sans limpa
   Elemento assinatura: "ramo de oliveira" — linha orgânica que costura as seções
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* cor */
  --olive-950:#12160d;
  --olive-900:#1c2414;
  --olive-800:#28331c;
  --olive-700:#3a4a29;
  --olive-600:#4c6136;
  --olive-500:#6b8248;
  --gold-400:#c9a24a;
  --gold-300:#dab868;
  --ivory-100:#f5f2e7;
  --ivory-300:#dcd8c3;
  --ivory-500:#a9a68f;
  --danger:#b5533f;
  --success:#7c9a5a;
  --warning:#c9a24a;

  /* tipografia */
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Public Sans', -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  /* escala */
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:22px;
  --shadow-card:0 12px 32px rgba(0,0,0,.35);
  --container:1140px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--olive-950);
  color:var(--ivory-100);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
p{margin:0 0 1em;color:var(--ivory-300);}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
:focus-visible{outline:2px solid var(--gold-300);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-body);font-weight:600;font-size:.95rem;
  padding:.85em 1.6em;border-radius:999px;border:1px solid transparent;
  cursor:pointer;text-decoration:none;transition:transform .15s ease, background .2s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--gold-400);color:var(--olive-950);}
.btn-primary:hover{background:var(--gold-300);}
.btn-ghost{background:transparent;color:var(--ivory-100);border-color:var(--olive-600);}
.btn-ghost:hover{border-color:var(--gold-400);}
.btn-danger{background:var(--danger);color:var(--ivory-100);}
.btn-sm{padding:.5em 1.1em;font-size:.82rem;}

/* ---------- ramo de oliveira (elemento assinatura, SVG inline via classe) ---------- */
.branch-divider{width:100%;height:64px;opacity:.55;}
.branch-divider path{stroke:var(--gold-400);stroke-width:1.4;fill:none;}
.branch-divider circle{fill:var(--olive-500);}

/* ---------- header institucional ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(18,22,13,.88);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--olive-700);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:1.3rem;font-weight:600;text-decoration:none;color:var(--ivory-100);}
.brand svg{width:26px;height:26px;}
.nav-links{display:flex;gap:28px;list-style:none;margin:0;padding:0;}
.nav-links a{text-decoration:none;font-size:.92rem;color:var(--ivory-300);}
.nav-links a:hover{color:var(--gold-300);}

/* ---------- hero ---------- */
.hero{position:relative;padding:120px 0 90px;overflow:hidden;}
.hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 82% 18%, rgba(201,162,74,.14), transparent 55%);
  pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;position:relative;}
.eyebrow{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-300);margin-bottom:18px;display:inline-block;}
.hero h1{font-size:clamp(2.4rem,4.4vw,3.6rem);color:var(--ivory-100);}
.hero h1 em{font-style:italic;color:var(--gold-300);}
.hero .lead{font-size:1.1rem;max-width:46ch;}
.hero-actions{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap;}
.hero-art{position:relative;}
.hero-card{
  background:linear-gradient(155deg,var(--olive-800),var(--olive-900));
  border:1px solid var(--olive-700);border-radius:var(--radius-lg);
  padding:28px;box-shadow:var(--shadow-card);
}
.hero-card .stat{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px dashed var(--olive-700);font-family:var(--font-mono);font-size:.85rem;}
.hero-card .stat:last-child{border-bottom:none;}
.hero-card .stat b{color:var(--gold-300);font-size:1.1rem;}

/* ---------- seções gerais ---------- */
section{padding:90px 0;}
.section-head{max-width:640px;margin:0 auto 52px;text-align:center;}
.section-head .eyebrow{display:block;}
.section-head h2{font-size:clamp(1.8rem,3vw,2.4rem);color:var(--ivory-100);}

/* grid de recursos */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;}
.feature-card{
  background:var(--olive-900);border:1px solid var(--olive-700);
  border-radius:var(--radius-md);padding:28px;transition:border-color .2s;
}
.feature-card:hover{border-color:var(--gold-400);}
.feature-card .ico{width:38px;height:38px;color:var(--gold-400);margin-bottom:16px;}
.feature-card h3{font-size:1.08rem;color:var(--ivory-100);margin-bottom:.4em;}
.feature-card p{font-size:.92rem;margin:0;}

/* como funciona — processo real de 3 passos, numeração é informativa aqui */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;counter-reset:step;}
.step{position:relative;padding-left:52px;}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:0;font-family:var(--font-mono);font-size:.85rem;
  color:var(--gold-400);border:1px solid var(--olive-600);border-radius:50%;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
}
.step h3{font-size:1rem;color:var(--ivory-100);}
.step p{font-size:.9rem;}

/* CTA login institucional */
.cta-login{
  background:linear-gradient(140deg,var(--olive-800),var(--olive-950));
  border-radius:var(--radius-lg);padding:64px 48px;text-align:center;
  border:1px solid var(--olive-700);
}
.cta-login h2{color:var(--ivory-100);}

.site-footer{border-top:1px solid var(--olive-700);padding:40px 0;font-size:.85rem;color:var(--ivory-500);}
.site-footer .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;}

/* ==========================================================================
   TELA DE LOGIN
   ========================================================================== */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--olive-950);padding:24px;}
.login-panel{
  width:100%;max-width:400px;background:var(--olive-900);
  border:1px solid var(--olive-700);border-radius:var(--radius-lg);
  padding:44px 36px;box-shadow:var(--shadow-card);
}
.login-panel .brand{justify-content:center;margin-bottom:6px;}
.login-panel .sub{text-align:center;font-size:.88rem;margin-bottom:28px;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:.8rem;color:var(--ivory-300);margin-bottom:6px;font-weight:600;}
.field input,.field select,.field textarea{
  width:100%;padding:.75em .9em;border-radius:var(--radius-sm);
  border:1px solid var(--olive-600);background:var(--olive-950);
  color:var(--ivory-100);font-family:var(--font-body);font-size:.95rem;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold-400);}
.login-panel .btn{width:100%;justify-content:center;margin-top:6px;}
.form-msg{border-radius:var(--radius-sm);padding:10px 14px;font-size:.85rem;margin-bottom:18px;}
.form-msg.error{background:rgba(181,83,63,.15);color:#e79c8c;border:1px solid var(--danger);}
.form-msg.success{background:rgba(124,154,90,.15);color:#bfe0a0;border:1px solid var(--success);}

/* ==========================================================================
   PAINEL — GESTOR DE PACIENTES
   ========================================================================== */
.app-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh;background:var(--olive-950);}
.app-sidebar{background:var(--olive-900);border-right:1px solid var(--olive-700);padding:26px 18px;display:flex;flex-direction:column;}
.app-sidebar .brand{margin-bottom:36px;font-size:1.1rem;}
.app-nav{list-style:none;margin:0;padding:0;flex:1;}
.app-nav li{margin-bottom:4px;}
.app-nav a{
  display:flex;align-items:center;gap:10px;padding:.7em .9em;border-radius:var(--radius-sm);
  text-decoration:none;font-size:.9rem;color:var(--ivory-300);
}
.app-nav a svg{width:16px;height:16px;flex:none;color:var(--gold-400);}
.app-nav a:hover{background:var(--olive-800);color:var(--ivory-100);}
.app-nav a.active{background:var(--olive-700);color:var(--ivory-100);}
.app-user{border-top:1px solid var(--olive-700);padding-top:16px;font-size:.82rem;color:var(--ivory-500);}
.app-user .logout{color:var(--gold-300);text-decoration:none;font-weight:600;}

.app-main{padding:36px 44px;overflow-x:auto;}
.app-topbar{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px;flex-wrap:wrap;gap:12px;}
.app-topbar h1{font-size:1.6rem;color:var(--ivory-100);margin:0;}
.app-topbar .date{font-family:var(--font-mono);font-size:.82rem;color:var(--ivory-500);}

.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;margin-bottom:32px;}
.kpi-card{background:var(--olive-900);border:1px solid var(--olive-700);border-radius:var(--radius-md);padding:20px;}
.kpi-card .label{font-size:.78rem;color:var(--ivory-500);text-transform:uppercase;letter-spacing:.06em;}
.kpi-card .value{font-family:var(--font-display);font-size:1.9rem;color:var(--gold-300);margin-top:6px;}

.panel{background:var(--olive-900);border:1px solid var(--olive-700);border-radius:var(--radius-md);padding:26px;margin-bottom:26px;}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.panel-head h2{font-size:1.1rem;color:var(--ivory-100);margin:0;}

table{width:100%;border-collapse:collapse;font-size:.88rem;}
th{text-align:left;font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ivory-500);padding:10px 12px;border-bottom:1px solid var(--olive-700);}
td{padding:12px;border-bottom:1px solid var(--olive-800);color:var(--ivory-100);vertical-align:middle;}
tr:hover td{background:var(--olive-800);}
.badge{display:inline-block;padding:.25em .75em;border-radius:999px;font-size:.72rem;font-weight:600;}
.badge-ok{background:rgba(124,154,90,.18);color:#bfe0a0;}
.badge-pending{background:rgba(201,162,74,.18);color:var(--gold-300);}
.badge-cancel{background:rgba(181,83,63,.18);color:#e79c8c;}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:100;padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:var(--olive-900);border:1px solid var(--olive-700);border-radius:var(--radius-lg);padding:32px;max-width:480px;width:100%;max-height:90vh;overflow-y:auto;}
.modal h3{color:var(--ivory-100);}
.modal-close{float:right;background:none;border:none;color:var(--ivory-500);font-size:1.3rem;cursor:pointer;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.empty-state{text-align:center;padding:50px 20px;color:var(--ivory-500);}
.empty-state svg{width:40px;height:40px;color:var(--olive-600);margin:0 auto 12px;}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .app-shell{grid-template-columns:1fr;}
  .app-sidebar{position:sticky;top:0;z-index:40;flex-direction:row;align-items:center;padding:14px 18px;overflow-x:auto;}
  .app-nav{display:flex;gap:6px;flex:none;}
  .app-user{display:none;}
  .form-row{grid-template-columns:1fr;}
}