225 lines
6.9 KiB
CSS
225 lines
6.9 KiB
CSS
|
|
/* ======================== THEME / TOKENS ======================== */
|
|
:root{
|
|
--brand: #1db7ae;
|
|
--brand-600:#12968f;
|
|
--brand-100:#e7f7f6;
|
|
--ink:#24323f;
|
|
--muted:#6b7a88;
|
|
--line:#e6eaef;
|
|
--bg:#ffffff;
|
|
--bg-app:#f5f7fb;
|
|
--radius: 18px;
|
|
--shadow: 0 10px 30px rgba(18,150,143,.12);
|
|
--shadow-soft: 0 6px 18px rgba(36,50,63,.08);
|
|
}
|
|
|
|
*{box-sizing:border-box}
|
|
html,body{height:100%}
|
|
body{
|
|
margin:0; font: 14px/1.4 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
|
|
color:var(--ink); background:var(--bg-app);
|
|
}
|
|
|
|
/* ======================== LAYOUT ======================== */
|
|
.app{
|
|
display:grid;
|
|
grid-template-columns: 88px 1fr;
|
|
min-height:100dvh;
|
|
}
|
|
|
|
/* ===== Sidebar ===== */
|
|
.sidebar{
|
|
background:var(--bg);
|
|
border-right:1px solid var(--line);
|
|
padding:16px 10px;
|
|
display:flex; flex-direction:column; gap:12px;
|
|
}
|
|
.brand{
|
|
height:48px; display:grid; place-items:center; margin-bottom:8px;
|
|
}
|
|
.dot{
|
|
width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,var(--brand),#52e3db);
|
|
display:grid; place-items:center; color:white; font-weight:700; box-shadow:var(--shadow-soft);
|
|
}
|
|
.nav{
|
|
display:flex; flex-direction:column; gap:8px; margin-top:8px;
|
|
}
|
|
.nav button{
|
|
all:unset; cursor:pointer; display:grid; place-items:center;
|
|
height:44px; border-radius:12px; color:var(--muted);
|
|
}
|
|
.nav button.active, .nav button:hover{ background:#26bdbd }
|
|
|
|
/* ===== Main ===== */
|
|
.main{
|
|
padding:24px;
|
|
display:grid;
|
|
grid-template-columns: 1fr 320px;
|
|
gap:24px;
|
|
}
|
|
|
|
/* ===== Header ===== */
|
|
.header{
|
|
grid-column: 1 / -1;
|
|
display:flex; align-items:center; justify-content:space-between;
|
|
margin-bottom:4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 20px; /* Adiciona um espaço entre os elementos */
|
|
width: 100%;
|
|
}
|
|
.logo-link img {
|
|
height: 100px; /* Defina a altura da sua logo aqui */
|
|
width: auto; /* Mantém a proporção da imagem */
|
|
display: block; /* Remove espaços extras abaixo da imagem */
|
|
}
|
|
.header .greet{font-size:24px; font-weight:700;}
|
|
.search{
|
|
display:flex; gap:10px; align-items:center;
|
|
}
|
|
.search input{
|
|
width:300px; max-width:48vw; background:var(--bg); border:1px solid var(--line);
|
|
border-radius:999px; padding:10px 14px; outline:0;
|
|
}
|
|
.avatar{
|
|
width:40px; height:40px; border-radius:50%; background:#dbe7f1; display:inline-block;
|
|
box-shadow:var(--shadow-soft);
|
|
}
|
|
|
|
/* ===== Grid esquerda (conteúdo) ===== */
|
|
.content{
|
|
display:grid; gap:18px;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.hero{
|
|
background: radial-gradient(1200px 500px at 100% -100%, #7bded8 0%, #3cc2bb 30%, #1db7ae 60%, #19a79f 100%);
|
|
border-radius:var(--radius);
|
|
padding:22px; color:white; position:relative; overflow:hidden; box-shadow:var(--shadow);
|
|
display:grid; grid-template-columns: 1fr auto; align-items:center; gap:16px;
|
|
min-height:140px;
|
|
}
|
|
.hero h2{margin:0 0 6px 0; font-size:22px}
|
|
.hero p{margin:0; opacity:.95}
|
|
.hero .cta{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
|
|
.btn{
|
|
appearance:none; border:0; border-radius:12px; padding:10px 14px; font-weight:600; cursor:pointer;
|
|
}
|
|
.btn-primary{ background:var(--bg); color:var(--brand-600); }
|
|
.btn-ghost{ background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.25); }
|
|
|
|
.hero .doctor{
|
|
width:180px; height:px; border-radius:16px; background:rgba(255,255,255,.15);
|
|
display:grid; place-items:center; font-weight:700;
|
|
border:1px solid rgba(255,255,255,.25);
|
|
}
|
|
|
|
/* KPI cards */
|
|
.kpis{
|
|
display:grid; grid-template-columns: repeat(3, minmax(180px,1fr));
|
|
gap:14px;
|
|
}
|
|
.card{
|
|
background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
|
|
box-shadow:var(--shadow-soft); padding:14px;
|
|
}
|
|
.kpi .label{color:var(--muted); font-weight:600; display:flex; align-items:center; gap:8px;}
|
|
.kpi .value{font-size:22px; font-weight:800; margin-top:6px; color:var(--ink);}
|
|
.badge{font-size:11px; background:var(--brand-100); color:var(--brand-600); padding:4px 8px; border-radius:999px; margin-left:auto;}
|
|
|
|
/* Charts area */
|
|
.charts{
|
|
display:grid; grid-template-columns: 1.2fr 1fr; gap:14px;
|
|
}
|
|
.chart{
|
|
min-height:210px; position:relative;
|
|
}
|
|
.chart h4{margin:0 0 10px 0}
|
|
.bars{
|
|
height:140px; display:flex; align-items:flex-end; gap:14px; padding:0 6px 6px;
|
|
}
|
|
.bar{
|
|
flex:1; background:linear-gradient(180deg, var(--brand) 0%, #8fe8e2 100%);
|
|
border-radius:10px; box-shadow:var(--shadow-soft);
|
|
}
|
|
.ring{
|
|
width:160px; height:160px; border-radius:50%;
|
|
background:
|
|
radial-gradient(closest-side, var(--bg) 59%, transparent 60% 100%),
|
|
conic-gradient(var(--brand) 0 35%, #8fe8e2 0 70%, #d9f5f3 0 100%);
|
|
margin:auto;
|
|
}
|
|
.legend{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px}
|
|
.legend span{display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:12px}
|
|
.dotc{width:10px; height:10px; border-radius:50%; background:var(--brand)}
|
|
|
|
/* ===== Coluna direita ===== */
|
|
.aside{display:grid; gap:18px}
|
|
.calendar .grid{
|
|
display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; margin-top:8px;
|
|
}
|
|
.calendar .day{
|
|
aspect-ratio:1/1; background:var(--bg); border:1px solid var(--line);
|
|
border-radius:10px; display:grid; place-items:center; color:var(--ink);
|
|
}
|
|
.calendar .day.m{ background:var(--brand-100); color:var(--brand-600); border-color:transparent; font-weight:700;}
|
|
.list{display:flex; flex-direction:column; gap:10px}
|
|
.item{
|
|
display:flex; align-items:flex-start; gap:10px; padding:10px; border-radius:12px;
|
|
background:var(--bg); border:1px solid var(--line); box-shadow:var(--shadow-soft);
|
|
}
|
|
.item .ic{width:28px; height:28px; border-radius:8px; background:var(--brand-100); color:var(--brand-600); display:grid; place-items:center; font-weight:800;}
|
|
.muted{color:var(--muted)}
|
|
.money{font-size:22px; font-weight:800; color:var(--ink)}
|
|
.img {
|
|
margin-top: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
/* ===== Responsivo ===== */
|
|
@media (max-width: 1100px){
|
|
.main{ grid-template-columns: 1fr; }
|
|
.aside{ order: -1; }
|
|
}
|
|
@media (max-width: 760px){
|
|
.app{ grid-template-columns: 68px 1fr; }
|
|
.kpis{ grid-template-columns: 1fr; }
|
|
.charts{ grid-template-columns: 1fr; }
|
|
.search input{ width:190px; }
|
|
}
|
|
|
|
/* ===== NAVBAR SUPERIOR ===== */
|
|
.navbar{
|
|
|
|
border-bottom:1px solid #e6eaef;
|
|
padding:12px 24px;
|
|
display:flex;
|
|
align-items:center;
|
|
gap:24px;
|
|
font-size:15px;
|
|
}
|
|
|
|
.navbar a{
|
|
color:var(--muted);
|
|
text-decoration:none;
|
|
font-weight:500;
|
|
}
|
|
|
|
.navbar a:hover{
|
|
color:var(--brand-600);
|
|
}
|
|
|
|
.navbar .active{
|
|
background:var(--brand);
|
|
color:#fff;
|
|
padding:8px 18px;
|
|
border-radius:999px;
|
|
font-weight:600;
|
|
box-shadow:0 3px 8px rgba(18,150,143,.25);
|
|
}
|