/* ==========================================================================
   Oklaworks® System — Gestão de Cuidadores de Idosos
   assets/css/style.css — paleta oficial (branco e cinza), Syne + DM Sans + JetBrains Mono
   ========================================================================== */

:root{
  --g900:#18181B; --g800:#27272A; --g700:#3F3F46; --g600:#52525B; --g500:#71717A;
  --g400:#A1A1AA; --g300:#D1D1D6; --g200:#E4E4E7; --g100:#F4F4F5; --g50:#FAFAFA; --w:#FFFFFF;
  --r:8px; --rl:12px;
  --s1:0 1px 3px rgba(0,0,0,.05);
  --s2:0 4px 16px rgba(0,0,0,.08);
  --font-title:'Syne', sans-serif;
  --font-body:'DM Sans', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

*{box-sizing:border-box;}
body{
  font-family:var(--font-body);
  color:var(--g800);
  background:var(--g50);
  margin:0;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{font-family:var(--font-title); font-weight:700; color:var(--g900); margin:0 0 .5em;}
.mono{font-family:var(--font-mono);}
a{color:var(--g800); text-decoration:none;}
a:hover{color:var(--g900);}

.btn-okla{
  background:var(--g900); color:var(--w); border:none; border-radius:var(--r);
  padding:.65rem 1.4rem; font-weight:600; font-family:var(--font-body); transition:.15s;
  display:inline-block;
}
.btn-okla:hover{background:var(--g700); color:var(--w);}
.btn-okla-outline{
  background:transparent; color:var(--g900); border:1.5px solid var(--g300); border-radius:var(--r);
  padding:.6rem 1.35rem; font-weight:600; transition:.15s;
}
.btn-okla-outline:hover{border-color:var(--g900); color:var(--g900);}

/* ---------- SITE INSTITUCIONAL ---------- */
.okla-navbar{
  background:var(--w); border-bottom:1px solid var(--g200);
  position:fixed; top:0; left:0; right:0; z-index:1000;
}
.okla-navbar .navbar-brand{font-family:var(--font-title); font-weight:800; font-size:1.3rem; color:var(--g900);}
.okla-navbar .navbar-brand small{display:block; font-family:var(--font-body); font-weight:400; font-size:.65rem; color:var(--g500);}
.okla-navbar .nav-link{color:var(--g700); font-weight:500; padding:.5rem 1rem !important;}
.okla-navbar .nav-link:hover, .okla-navbar .nav-link.active{color:var(--g900);}
.okla-navbar .nav-link.restrita{
  background:var(--g900); color:var(--w) !important; border-radius:var(--r); padding:.5rem 1.1rem !important;
}

.hero-okla{
  padding:9rem 0 5rem; background:var(--g50); border-bottom:1px solid var(--g200);
}
.hero-okla h1{font-size:2.6rem; line-height:1.15;}
.hero-okla p.lead{color:var(--g600); font-size:1.15rem; max-width:640px;}
.hero-stats{border-top:1px solid var(--g200); padding-top:1.5rem;}
.hero-stats div{display:flex; flex-direction:column;}
.hero-stats strong{font-family:var(--font-title); font-size:1.5rem; font-weight:800; color:var(--g900);}
.hero-stats span{font-size:.8rem; color:var(--g500);}
.hero-media{
  border-radius:var(--rl); overflow:hidden; border:1px solid var(--g200); box-shadow:var(--s2);
  aspect-ratio:15/10;
}
.hero-media img{width:100%; height:100%; object-fit:cover; display:block;}
.sobre-media{
  border-radius:var(--rl); overflow:hidden; border:1px solid var(--g200); box-shadow:var(--s1);
  aspect-ratio:15/10;
}
.sobre-media img{width:100%; height:100%; object-fit:cover; display:block;}

.section-okla{padding:5rem 0;}
.section-okla.alt{background:var(--g100);}
.section-okla.diferenciais{padding:3rem 0; background:var(--g900);}
.diferencial-item{text-align:center; padding:0 1rem;}
.diferencial-item .icon-wrap{
  width:52px; height:52px; border-radius:var(--r); background:var(--g800); border:1px solid var(--g700);
  display:flex; align-items:center; justify-content:center; margin:0 auto 1.2rem;
}
.diferencial-item .icon-wrap svg{width:26px; height:26px; stroke:var(--w);}
.diferencial-item h5{color:var(--w);}
.diferencial-item p{color:var(--g400) !important; font-size:.9rem;}
.section-title-tag{
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--g500); display:block; margin-bottom:.5rem;
}

.card-okla{
  background:var(--w); border:1px solid var(--g200); border-radius:var(--rl); padding:2rem;
  box-shadow:var(--s1); transition:.2s; height:100%;
}
.card-okla:hover{box-shadow:var(--s2); transform:translateY(-2px);}
.card-okla .icon-wrap{
  width:52px; height:52px; border-radius:var(--r); background:var(--g900);
  display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem;
}
.card-okla .icon-wrap svg{width:26px; height:26px; stroke:var(--w);}

.plano-card{
  background:var(--w); border:1px solid var(--g200); border-radius:var(--rl); padding:2.2rem;
  text-align:center; height:100%; display:flex; flex-direction:column;
}
.plano-card.destaque{border:2px solid var(--g900); box-shadow:var(--s2);}
.plano-card .preco{font-family:var(--font-title); font-size:2.2rem; font-weight:800; margin:1rem 0;}
.plano-card .preco span{font-size:.9rem; font-weight:400; color:var(--g500); font-family:var(--font-body);}
.plano-card ul{list-style:none; padding:0; text-align:left; margin:1.5rem 0; flex:1;}
.plano-card ul li{padding:.4rem 0; color:var(--g600); border-bottom:1px solid var(--g100);}

.depoimento-card{
  background:var(--w); border:1px solid var(--g200); border-radius:var(--rl); padding:1.8rem; height:100%;
}
.depoimento-card .estrelas{color:var(--g900); margin-bottom:.8rem;}
.depoimento-card .autor{font-weight:700; margin-top:1rem; color:var(--g900);}
.depoimento-card .autor small{display:block; font-weight:400; color:var(--g500);}

.atendimento-card{
  background:var(--w); border:1px solid var(--g200); border-radius:var(--rl); padding:2rem; height:100%;
}
.atendimento-list{list-style:none; margin:1.2rem 0 0; padding:0;}
.atendimento-list li{display:flex; align-items:flex-start; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--g100);}
.atendimento-list li:last-child{border-bottom:none;}
.atendimento-list .atendimento-icon{
  width:40px; height:40px; border-radius:var(--r); background:var(--g100); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.atendimento-list .atendimento-icon svg{width:19px; height:19px; stroke:var(--g800);}
.atendimento-list strong{display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color:var(--g500); font-weight:600; margin-bottom:.15rem;}
.atendimento-list a, .atendimento-list span{color:var(--g800); font-weight:500;}
.atendimento-list a:hover{color:var(--g900); text-decoration:underline;}

footer.okla-footer{background:var(--g900); color:var(--g300); padding:4rem 0 2rem;}
footer.okla-footer h5{color:var(--w); font-size:1rem; margin-bottom:1.2rem;}
footer.okla-footer p{color:var(--g400); font-size:.9rem; line-height:1.6; max-width:340px;}
footer.okla-footer a{color:var(--g400);}
footer.okla-footer a:hover{color:var(--w);}
footer.okla-footer ul{list-style:none; padding:0;}
footer.okla-footer ul li{margin-bottom:.6rem; font-size:.9rem;}
footer.okla-footer .footer-links{border-top:1px solid var(--g800); margin-top:2.5rem; padding-top:1.8rem;}
footer.okla-footer .quick-links a{font-size:.85rem; font-weight:500;}
footer.okla-footer .quick-links .sep{color:var(--g700); margin:0 .6rem;}
footer.okla-footer .social a{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--g700);
  display:inline-flex; align-items:center; justify-content:center; margin-right:.5rem;
}
footer.okla-footer .social a:hover{background:var(--w); border-color:var(--w);}
footer.okla-footer .social a:hover svg{stroke:var(--g900);}
footer.okla-footer .social svg{width:15px; height:15px; stroke:var(--g300);}
footer.okla-footer .bottom-bar{border-top:1px solid var(--g800); margin-top:1.8rem; padding-top:1.5rem; font-size:.85rem; color:var(--g500);}

/* ---------- LOGIN ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--g50);
  padding:1.5rem;
}
.login-box{
  background:var(--w); border:1px solid var(--g200); border-radius:var(--rl); box-shadow:var(--s2);
  padding:2.5rem; width:100%; max-width:400px;
}
.login-box .logo{font-family:var(--font-title); font-weight:800; font-size:1.4rem; text-align:center; margin-bottom:.2rem;}
.login-box .subtitle{text-align:center; color:var(--g500); font-size:.85rem; margin-bottom:2rem;}
.form-control-okla{
  border:1.5px solid var(--g200); border-radius:var(--r); padding:.65rem .9rem; width:100%;
  font-family:var(--font-body); margin-bottom:1rem;
}
.form-control-okla:focus{outline:none; border-color:var(--g900);}
.alert-okla{
  background:var(--g100); border:1px solid var(--g300); border-radius:var(--r);
  padding:.75rem 1rem; font-size:.85rem; color:var(--g700); margin-bottom:1rem;
}

/* ---------- DASHBOARD (SPA) ---------- */
body.dash{background:var(--g50); overflow-x:hidden;}
.dash-topbar{
  position:fixed; top:0; left:0; right:0; height:64px; background:var(--w); border-bottom:1px solid var(--g200);
  display:flex; align-items:center; justify-content:space-between; padding:0 1.5rem; z-index:1100;
}
.dash-topbar .brand{font-family:var(--font-title); font-weight:800; color:var(--g900);}
.dash-topbar .user-chip{
  display:flex; align-items:center; gap:.6rem; font-size:.85rem; color:var(--g600);
}
.dash-topbar .user-chip .avatar{
  width:32px; height:32px; border-radius:50%; background:var(--g900); color:var(--w);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem;
}
.dash-topbar .perfil-badge{
  font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; background:var(--g100);
  border:1px solid var(--g200); border-radius:var(--r); padding:.15rem .5rem; color:var(--g600);
}

/* menu fixo posicionado à esquerda, fundo preto, conforme padrão Oklaworks */
.dash-menu{
  position:fixed; top:64px; left:0; bottom:0; width:250px; background:var(--g900); border-right:1px solid var(--g800);
  overflow-y:auto; z-index:1050; padding:1.2rem 0;
}
.dash-menu .grupo-titulo{
  font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--g600); padding:.6rem 1.4rem .3rem;
}
.dash-menu a{
  display:flex; align-items:center; gap:.7rem; padding:.6rem 1.4rem; color:var(--g400); font-weight:500;
  font-size:.9rem; border-left:3px solid transparent; cursor:pointer;
}
.dash-menu a svg{width:18px; height:18px; stroke:var(--g500); flex-shrink:0;}
.dash-menu a:hover{background:var(--g800); color:var(--w);}
.dash-menu a.active{background:var(--g800); color:var(--w); border-left-color:var(--w); font-weight:700;}
.dash-menu a.active svg{stroke:var(--w);}

.dash-content{
  margin-top:64px; margin-left:250px; padding:2rem; min-height:calc(100vh - 64px);
}

.dash-toggle{display:none;}

@media (max-width: 900px){
  .dash-menu{transform:translateX(-100%); transition:.2s; width:78%; max-width:300px; box-shadow:var(--s2);}
  .dash-menu.open{transform:translateX(0);}
  .dash-content{margin-left:0;}
  .dash-toggle{display:flex;}
}

.stat-card{
  background:var(--w); border:1px solid var(--g200); border-radius:var(--rl); padding:1.4rem;
  box-shadow:var(--s1);
}
.stat-card .label{font-size:.78rem; color:var(--g500); font-weight:600; text-transform:uppercase; letter-spacing:.04em;}
.stat-card .value{font-family:var(--font-title); font-size:1.9rem; font-weight:800; color:var(--g900); margin-top:.3rem;}
.stat-card .icon{
  width:40px; height:40px; border-radius:var(--r); background:var(--g100); display:flex; align-items:center;
  justify-content:center; margin-bottom:.8rem;
}
.stat-card .icon svg{width:20px; height:20px; stroke:var(--g800);}

.panel-okla{
  background:var(--w); border:1px solid var(--g200); border-radius:var(--rl); padding:1.5rem; box-shadow:var(--s1);
  margin-bottom:1.5rem;
}
.panel-okla .panel-title{font-family:var(--font-title); font-weight:700; font-size:1.05rem; margin-bottom:1rem; display:flex; justify-content:space-between; align-items:center;}

.table-okla{width:100%; border-collapse:collapse; font-size:.88rem;}
.table-okla th{
  text-align:left; padding:.7rem .8rem; background:var(--g50); color:var(--g500); font-weight:600;
  text-transform:uppercase; font-size:.72rem; letter-spacing:.03em; border-bottom:1px solid var(--g200);
}
.table-okla td{padding:.7rem .8rem; border-bottom:1px solid var(--g100); color:var(--g700);}
.table-okla tr:hover td{background:var(--g50);}

.badge-okla{
  font-family:var(--font-mono); font-size:.7rem; padding:.2rem .55rem; border-radius:20px; text-transform:uppercase;
  background:var(--g100); color:var(--g700); border:1px solid var(--g200);
}
.badge-okla.on{background:var(--g900); color:var(--w); border-color:var(--g900);}

.modal-okla-backdrop{
  position:fixed; inset:0; background:rgba(24,24,27,.55); z-index:2000; display:none; align-items:center; justify-content:center; padding:1.5rem;
}
.modal-okla-backdrop.show{display:flex;}
.modal-okla{
  background:var(--w); border-radius:var(--rl); width:100%; max-width:560px; max-height:90vh; overflow-y:auto;
  padding:1.8rem; box-shadow:var(--s2);
}
.modal-okla h4{margin-bottom:1.2rem;}
.modal-okla label{font-size:.8rem; font-weight:600; color:var(--g600); margin-bottom:.25rem; display:block;}
.modal-okla .form-row{margin-bottom:1rem;}
.modal-okla .actions{display:flex; justify-content:flex-end; gap:.6rem; margin-top:1.5rem;}

.btn-icon{
  width:32px; height:32px; border-radius:var(--r); border:1px solid var(--g200); background:var(--w);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; margin-right:.3rem;
}
.btn-icon:hover{background:var(--g100);}
.btn-icon svg{width:15px; height:15px; stroke:var(--g600);}
.btn-icon.danger:hover{background:var(--g900);}
.btn-icon.danger:hover svg{stroke:var(--w);}

.empty-state{text-align:center; padding:3rem 1rem; color:var(--g500);}

.toast-okla{
  position:fixed; bottom:1.5rem; right:1.5rem; background:var(--g900); color:var(--w); padding:.9rem 1.3rem;
  border-radius:var(--r); box-shadow:var(--s2); z-index:3000; font-size:.88rem; opacity:0; transform:translateY(10px);
  transition:.25s;
}
.toast-okla.show{opacity:1; transform:translateY(0);}

/* modo escuro */
body.dark-mode{background:var(--g900); color:var(--g200);}
body.dark-mode .dash-topbar, body.dark-mode .dash-menu, body.dark-mode .stat-card,
body.dark-mode .panel-okla, body.dark-mode .modal-okla{background:var(--g800); border-color:var(--g700);}
body.dark-mode .table-okla th{background:var(--g900); border-color:var(--g700);}
body.dark-mode .table-okla td{color:var(--g300); border-color:var(--g700);}
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4{color:var(--g100);}
body.dark-mode .dash-menu a{color:var(--g400);}
body.dark-mode .dash-menu a.active{background:var(--g700); color:var(--w);}