/* Helsia · app components — depends on colors.css + tokens.css */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg-body); color: var(--text-primary); font-family: var(--font-sans); }
/* density tweaks */
body[data-density="compact"] { --row-y: 0.5625rem; --card-pad: 0.875rem; --hour-px: 3.5rem; }
body[data-density="comfortable"]{ --row-y: 0.875rem; --card-pad: 1.125rem; --hour-px: 4rem; }
body { --row-y: 0.75rem; --card-pad: 1rem; --hour-px: 3.75rem; }
/* Display font variants */
body[data-theme="editorial"] { --display-font: "Inter", serif; --display-tracking: -0.035em; }
body[data-theme="mono"] { --display-font: ui-monospace, "JetBrains Mono", monospace; --display-tracking: -0.04em; }
body { --display-font: "Inter", sans-serif; --display-tracking: -0.02em; }
/* ── App frame ─────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: 15.5rem 1fr; min-height: 100vh; }
/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
background: var(--primary-500);
color: #fff;
padding: 1.25rem 0.875rem;
display: flex; flex-direction: column; gap: 2px;
position: sticky; top: 0; height: 100vh;
border-right: 1px solid var(--primary-700);
}
.sidebar.light {
background: #fff;
color: var(--primary-900);
border-right: 1px solid var(--neutral-200);
}
.sidebar .brand {
display: flex; align-items: center; gap: 0.6875rem;
padding: 0.25rem 0.625rem 1.375rem;
}
.sidebar .brand-mark {
width: 2.25rem; height: 2.25rem; border-radius: 0.625rem;
background: var(--secondary-500); display: grid; place-items: center;
flex-shrink: 0;
}
.sidebar.light .brand-mark { background: var(--primary-500); }
.sidebar .brand-name {
font-family: var(--font-sans);
font-weight: 700; font-size: 1.1875rem; letter-spacing: -.025em;
color: #fff;
}
.sidebar.light .brand-name { color: var(--primary-900); }
.sidebar .brand-name .accent { color: var(--secondary-500); font-weight: 800; }
.nav-section {
font: 600 0.65625rem/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase;
color: var(--primary-200); padding: 0.875rem 0.75rem 0.5rem;
}
.sidebar.light .nav-section { color: var(--neutral-500); }
.sidebar .nav-item {
display: flex; align-items: center; gap: 0.6875rem;
padding: 0.5625rem 0.75rem; border-radius: 0.625rem;
color: rgba(255,255,255,.78);
font: 500 0.875rem/1 var(--font-sans); cursor: pointer;
transition: background var(--dur-fast), color var(--dur-fast);
user-select: none; text-decoration: none;
}
.sidebar.light .nav-item { color: var(--neutral-700); }
.sidebar .nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar.light .nav-item:hover { background: var(--secondary-50); color: var(--primary-900); }
.sidebar .nav-item.active { background: var(--secondary-500); color: #fff; font-weight: 600; }
.sidebar.light .nav-item.active { background: var(--secondary-100); color: var(--primary-900); }
.sidebar .nav-item .count {
margin-left: auto; background: rgba(0,0,0,.25); color: #fff;
padding: 2px 0.4375rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 700;
}
.sidebar.light .nav-item .count { background: var(--neutral-100); color: var(--neutral-700); }
.sidebar .nav-item.active .count { background: rgba(0,0,0,.2); }
#wa-nav-badge { margin-left: auto; }
.sidebar .footer-card {
margin-top: auto;
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
border-radius: 0.75rem;
padding: 0.6875rem; display: flex; gap: 0.625rem; align-items: center;
}
.sidebar.light .footer-card { background: var(--neutral-100); border-color: var(--neutral-200); transition: background var(--dur-fast), border-color var(--dur-fast); }
.sidebar.light .footer-card:hover { background: var(--neutral-200); border-color: var(--neutral-300); }
.sidebar.light .footer-chevron { color: var(--neutral-400); }
.sidebar .footer-card .av {
width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--secondary-500);
color: #fff; font: 700 0.8125rem/1 var(--font-sans); display: grid; place-items: center;
flex-shrink: 0;
}
.sidebar .footer-card .nm { font: 600 0.8125rem/1.2 var(--font-sans); color: #fff; }
.sidebar .footer-card .role { font: 400 0.6875rem/1.3 var(--font-sans); color: var(--primary-200); margin-top: 2px; }
.sidebar.light .footer-card .nm { color: var(--primary-900); }
.sidebar.light .footer-card .role { color: var(--neutral-600); }
.sidebar-divider {
border: none; border-top: 1px solid var(--neutral-200);
margin: 0.5rem 0;
}
.footer-wrap { margin-top: auto; position: relative; }
.footer-card { cursor: pointer; }
.footer-chevron {
margin-left: auto; color: rgba(255,255,255,.5);
transition: transform var(--dur-fast);
flex-shrink: 0;
}
.footer-wrap[data-open="true"] .footer-chevron { transform: rotate(180deg); }
.footer-dropdown {
position: absolute; bottom: calc(100% + 0.5rem); left: 0; right: 0;
background: var(--primary-700); border: 1px solid rgba(255,255,255,.12);
border-radius: 0.625rem; padding: 0.25rem; overflow: hidden;
box-shadow: 0 8px 24px rgba(0,0,0,.35);
opacity: 0; transform: translateY(0.375rem) scale(.98);
pointer-events: none;
transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.footer-wrap[data-open="true"] .footer-dropdown {
opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}
.footer-menu-item {
display: flex; align-items: center; gap: 0.625rem;
width: 100%; padding: 0.5625rem 0.75rem; border-radius: 0.4375rem;
font: 500 0.8125rem/1 var(--font-sans); cursor: pointer;
border: none; background: transparent; color: rgba(255,255,255,.85);
transition: background var(--dur-fast), color var(--dur-fast);
text-align: left;
}
.footer-menu-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.footer-menu-item--danger:hover { background: rgba(239,68,68,.2); color: #fca5a5; }
a.footer-menu-item { color: rgba(255,255,255,.85); text-decoration: none; }
/* ── Segmented tabs ─────────────────────────────────────────── */
.seg-tabs {
display: inline-flex; gap: 2px;
background: var(--neutral-100); border-radius: 0.75rem; padding: 0.25rem;
}
.seg-tab {
display: inline-flex; align-items: center; gap: 0.4375rem;
padding: 0.5625rem 1.125rem; border-radius: 0.5625rem;
font: 500 0.8125rem/1 var(--font-sans); color: var(--neutral-500);
border: none; background: transparent; cursor: pointer;
transition: color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
white-space: nowrap;
}
.seg-tab:hover { color: var(--primary-900); }
.seg-tab.active {
background: #fff; color: var(--primary-900); font-weight: 600;
box-shadow: 0 1px 4px rgba(2,26,84,.12), 0 0 0 1px rgba(2,26,84,.06);
}
/* ── Topbar ─────────────────────────────────────────────────── */
.topbar {
height: 4rem;
background: rgba(255,255,255,.92);
backdrop-filter: blur(0.75rem);
border-bottom: 1px solid var(--neutral-200);
display: flex; align-items: center; gap: 1rem;
padding: 0 1.75rem;
position: sticky; top: 0; z-index: 10;
}
.topbar .crumb { font: 600 0.875rem/1 var(--font-sans); color: var(--text-tertiary); }
.topbar .crumb b { color: var(--primary-900); font-weight: 700; }
.topbar .menu-toggle {
display: none; background: none; border: none;
color: var(--neutral-700); cursor: pointer;
width: 2.25rem; height: 2.25rem; border-radius: 0.625rem;
align-items: center; justify-content: center;
transition: background var(--dur-fast);
}
.topbar .menu-toggle:hover { background: var(--neutral-100); color: var(--primary-500); }
/* ── Page body ──────────────────────────────────────────────── */
.page { padding: 1.75rem 2rem 3.5rem; }
.page-eyebrow {
font: 600 0.6875rem/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase;
color: var(--secondary-500); margin-bottom: 0.5rem;
display: flex; align-items: center; gap: 0.5rem;
}
.page-eyebrow::before {
content: ""; width: 1rem; height: 1px; background: var(--secondary-500);
}
.page h1 {
font-family: var(--display-font);
font-weight: 700; font-size: 2rem; line-height: 1.1;
letter-spacing: var(--display-tracking);
margin: 0 0 0.375rem; color: var(--primary-900);
}
.page .subtitle { font: 400 0.875rem/1.5 var(--font-sans); color: var(--text-secondary); margin: 0; }
.page-head {
display: flex; align-items: flex-end; justify-content: space-between;
margin-bottom: 1.75rem; gap: 1rem; flex-wrap: wrap;
}
/* ── Card ───────────────────────────────────────────────────── */
.card {
background: #fff;
border-radius: 0.875rem; box-shadow: var(--shadow-xs);
}
.card-head {
padding: 1rem 1.25rem; display: flex; justify-content: space-between; align-items: center;
border-bottom: 1px solid var(--neutral-100);
}
.card-head h3 { font: 700 0.9375rem/1 var(--font-sans); color: var(--primary-900); margin: 0; letter-spacing: -.01em; }
.card-body { padding: 1.25rem; }
/* ── Buttons ────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; gap: 0.375rem; cursor: pointer;
font: 600 0.875rem/1 var(--font-sans); padding: 0.625rem 0.875rem; border-radius: 0.625rem;
border: 1px solid transparent;
transition: transform var(--dur-fast), background var(--dur-fast),
box-shadow var(--dur-fast), border-color var(--dur-fast);
white-space: nowrap; text-decoration: none;
}
.btn:active { transform: scale(.985); }
.btn-primary { background: var(--primary-500); color: #fff; }
.btn-primary:hover { background: var(--primary-600); }
.btn-secondary { background: var(--secondary-500); color: #fff; box-shadow: var(--shadow-pink); }
.btn-secondary:hover { background: var(--secondary-600); }
.btn-ghost { background: transparent; color: var(--primary-500); }
.btn-ghost:hover { background: var(--secondary-50); }
.btn-outline { background: #fff; color: var(--primary-900); border-color: var(--neutral-300); }
.btn-outline:hover { border-color: var(--primary-500); color: var(--primary-500); }
.btn-whatsapp { background: var(--whatsapp-green); color: #fff; }
.btn-whatsapp:hover { background: var(--whatsapp-green-dark); }
.btn-danger { background: var(--error-500); color: #fff; }
a.btn-primary, a.btn-primary:hover { color: #fff; }
a.btn-secondary, a.btn-secondary:hover { color: #fff; }
a.btn-whatsapp, a.btn-whatsapp:hover { color: #fff; }
a.btn-danger, a.btn-danger:hover { color: #fff; }
a.btn-ghost { color: var(--primary-500); }
a.btn-outline { color: var(--primary-900); }
a.btn-outline:hover { color: var(--primary-500); }
.btn-sm { padding: 0.4375rem 0.6875rem; font-size: 0.8125rem; border-radius: 0.5rem; }
.btn-icon-only { padding: 0.5rem; }
/* ── Badge ──────────────────────────────────────────────────── */
.badge {
display: inline-flex; align-items: center; gap: 0.3125rem;
font: 600 0.71875rem/1 var(--font-sans); padding: 0.25rem 0.5625rem; border-radius: 999px;
white-space: nowrap;
}
.badge .dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; }
.badge.confirmed { background: var(--success-50); color: var(--success-700); }
.badge.confirmed .dot { background: var(--success-500); }
.badge.pending { background: var(--warning-50); color: var(--warning-700); }
.badge.pending .dot { background: var(--warning-500); }
.badge.cancelled { background: var(--error-50); color: var(--error-700); }
.badge.cancelled .dot { background: var(--error-500); }
.badge.attended { background: var(--primary-50); color: var(--primary-700); }
.badge.attended .dot { background: var(--primary-500); }
.badge.new { background: var(--secondary-100); color: var(--secondary-800); }
.badge.new .dot { background: var(--secondary-500); }
/* ── Avatar ─────────────────────────────────────────────────── */
.av {
border-radius: 50%; background: var(--secondary-200); color: var(--primary-500);
display: grid; place-items: center; font-family: var(--font-sans); font-weight: 700;
flex-shrink: 0;
}
.av-24 { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; }
.av-32 { width: 2rem; height: 2rem; font-size: 0.75rem; }
.av-40 { width: 2.5rem; height: 2.5rem; font-size: 0.8125rem; }
.av-48 { width: 3rem; height: 3rem; font-size: 0.9375rem; }
.av-64 { width: 4rem; height: 4rem; font-size: 1.25rem; }
.av-navy { background: var(--primary-500); color: var(--secondary-200); }
.av-pink { background: var(--secondary-500); color: #fff; }
/* ── Icon ───────────────────────────────────────────────────── */
.ico {
stroke: currentColor; fill: none; stroke-width: 1.75;
stroke-linecap: round; stroke-linejoin: round;
}
/* ── Inputs ─────────────────────────────────────────────────── */
.input {
font: 400 0.875rem/1.3 var(--font-sans); padding: 0.625rem 0.75rem;
border: 1px solid var(--neutral-300); border-radius: 0.625rem;
background: #fff; color: var(--primary-900); width: 100%;
transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input:focus { outline: none; border-color: var(--secondary-500); box-shadow: 0 0 0 3px rgba(255,133,187,.25); }
.input::placeholder { color: var(--neutral-500); }
.field-label {
font: 600 0.71875rem/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase;
color: var(--neutral-600); margin-bottom: 0.375rem; display: block;
}
/* ── Layout utilities ───────────────────────────────────────── */
.row-flex { display: flex; gap: 0.75rem; align-items: center; }
.col { display: flex; flex-direction: column; gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.875rem; }
.grid-3-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 1.125rem; }
.grid-1-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }
/* ── Hero KPI ───────────────────────────────────────────────── */
.hero-now {
background: var(--primary-500); color: #fff;
border-radius: 1rem; padding: 1.75rem 2rem;
position: relative; overflow: hidden;
display: grid; grid-template-columns: 1fr auto; gap: 1.5rem;
}
.hero-now::after {
content: ""; position: absolute; right: -3.75rem; top: -3.75rem;
width: 17.5rem; height: 17.5rem; border-radius: 50%;
background: radial-gradient(circle, rgba(255,133,187,.35), transparent 70%);
pointer-events: none;
}
.hero-now .eyebrow-l {
font: 600 0.6875rem/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase;
color: var(--secondary-300); margin-bottom: 0.625rem;
}
.hero-now .display-time {
font-family: var(--display-font);
font-weight: 700; font-size: 4rem; line-height: 1; letter-spacing: -.04em;
color: #fff; font-variant-numeric: tabular-nums; margin-bottom: 0.375rem;
}
.hero-now .display-time .colon { color: var(--secondary-500); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 0%, 50% { opacity: 1; } 60%, 100% { opacity: .3; } }
.hero-now .who { font: 700 1.125rem/1.2 var(--font-sans); letter-spacing: -.01em; margin-bottom: 0.25rem; }
.hero-now .what { font: 400 0.84375rem/1.4 var(--font-sans); color: var(--primary-100); }
.hero-now .countdown {
display: flex; flex-direction: column; align-items: flex-end; gap: 0.625rem;
position: relative; z-index: 1;
}
.hero-now .countdown .num {
font-family: var(--display-font);
font-weight: 800; font-size: 2.5rem; line-height: 1; letter-spacing: -.03em;
font-variant-numeric: tabular-nums;
}
.hero-now .countdown .lbl {
font: 500 0.6875rem/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase;
color: var(--secondary-300);
}
/* ── KPI tile ───────────────────────────────────────────────── */
.kpi {
background: #fff; border: 1px solid var(--neutral-200); border-radius: 0.875rem;
padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: 0.375rem;
box-shadow: var(--shadow-xs);
transition: transform var(--dur-base), box-shadow var(--dur-base);
cursor: pointer;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi .lbl { font: 500 0.75rem/1.2 var(--font-sans); color: var(--neutral-600); }
.kpi .num {
font-family: var(--display-font);
font-weight: 800; font-size: 1.75rem; line-height: 1; letter-spacing: -.025em;
color: var(--primary-900); font-variant-numeric: tabular-nums; margin-top: 0.25rem;
}
.kpi .delta {
font: 600 0.6875rem/1 var(--font-sans); padding: 3px 0.4375rem; border-radius: 999px;
background: var(--success-50); color: var(--success-700);
display: inline-flex; align-items: center; gap: 3px; align-self: flex-start;
}
.kpi .delta.down { background: var(--error-50); color: var(--error-700); }
.kpi .footer-l { font: 400 0.71875rem/1.3 var(--font-sans); color: var(--neutral-500); }
/* ── Agenda ─────────────────────────────────────────────────── */
.day-pills { display: flex; gap: 0.375rem; margin-bottom: 1.375rem; }
.day-pill-b {
padding: 0.625rem 0.875rem; border-radius: 0.75rem;
background: #fff; color: var(--primary-900);
border: 1px solid var(--neutral-200);
font: 600 0.8125rem/1 var(--font-sans); cursor: pointer;
display: flex; flex-direction: column; gap: 0.25rem; align-items: center;
min-width: 4rem; transition: all var(--dur-fast);
}
.day-pill-b:hover { border-color: var(--secondary-500); }
.day-pill-b .dow { font-size: 0.6875rem; opacity: .7; }
.day-pill-b .dnum { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.day-pill-b .count-d {
font-size: 0.625rem; padding: 1px 0.375rem; border-radius: 999px;
background: var(--neutral-100); color: var(--neutral-600); margin-top: 2px;
}
.day-pill-b.active { background: var(--primary-500); color: #fff; border-color: var(--primary-500); }
.day-pill-b.active .count-d { background: var(--secondary-500); color: #fff; }
.day-pill-b.today { border-color: var(--secondary-500); border-width: 2px; }
.day-grid { display: grid; grid-template-columns: 4rem 1fr; position: relative; }
.day-grid .hour {
font: 500 0.6875rem/1 var(--font-sans); color: var(--neutral-500);
padding: 0.75rem 0.75rem 0 0; text-align: right;
border-top: 1px solid var(--neutral-100); font-variant-numeric: tabular-nums;
}
.day-grid .lane { border-top: 1px solid var(--neutral-100); position: relative; min-height: var(--hour-px); }
.now-line {
position: absolute; left: 4rem; right: 1rem; height: 2px;
background: var(--secondary-500); z-index: 5; pointer-events: none;
}
.now-line::before {
content: ""; position: absolute; left: -0.375rem; top: -0.3125rem;
width: 0.75rem; height: 0.75rem; border-radius: 50%;
background: var(--secondary-500); box-shadow: 0 0 0 4px rgba(255,133,187,.3);
}
.now-line::after {
content: "agora"; position: absolute; left: -3.25rem; top: -0.5rem;
font: 700 0.625rem/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
color: var(--secondary-500);
}
.event {
position: absolute; left: 0.5rem; right: 0.75rem;
border-radius: 0.625rem; padding: 0.5625rem 0.75rem;
font: 600 0.75rem/1.2 var(--font-sans); color: var(--primary-900);
display: flex; flex-direction: column; gap: 3px;
cursor: pointer; overflow: hidden;
transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.event:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); z-index: 4; }
.event.confirmed { background: var(--success-50); border-left: 3px solid var(--success-500); }
.event.pending { background: var(--warning-50); border-left: 3px solid var(--warning-500); }
.event.cancelled { background: var(--error-50); border-left: 3px solid var(--error-500); opacity: .55; }
.event.cancelled .who { text-decoration: line-through; }
.event.attended { background: var(--neutral-100); border-left: 3px solid var(--neutral-400); }
.event .who { font-weight: 700; color: var(--primary-900); font-size: 0.8125rem; }
.event .meta { font: 400 0.6875rem/1.2 var(--font-sans); color: var(--neutral-700); }
.event.fresh { animation: fresh-pulse 2.4s ease-out 1; }
@keyframes fresh-pulse {
0% { box-shadow: 0 0 0 0 rgba(255,133,187,.6); transform: scale(1); }
35% { transform: scale(1.02); }
100% { box-shadow: 0 0 0 14px rgba(255,133,187,0); }
}
/* ── Patient row ────────────────────────────────────────────── */
.pat-row {
display: grid; grid-template-columns: 1.4fr 1fr 1fr 6.875rem 6.25rem 1.75rem;
gap: 0.875rem; align-items: center;
padding: var(--row-y) 1.25rem; border-bottom: 1px solid var(--neutral-100);
cursor: pointer; transition: background var(--dur-fast);
}
.pat-row:hover { background: var(--secondary-50); }
.pat-row.head {
font: 600 0.65625rem/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
color: var(--text-tertiary); padding: 0.6875rem 1.25rem; cursor: default; background: var(--neutral-50);
}
.pat-row.head:hover { background: var(--neutral-50); }
.pat-name { font: 600 0.875rem/1.2 var(--font-sans); color: var(--primary-900); }
.pat-meta { font: 400 0.78125rem/1.3 var(--font-sans); color: var(--neutral-600); }
.pat-cell .with-av { display: flex; gap: 0.6875rem; align-items: center; }
.pat-row.fresh-row { animation: fresh-pulse 2.4s ease-out 1; background: var(--secondary-50); }
/* ── Inbox / WhatsApp CRM ───────────────────────────────────── */
.inbox {
display: grid; grid-template-columns: 20rem 1fr; height: calc(100vh - 4rem - 3.5rem);
background: #fff; border: 1px solid var(--neutral-200); border-radius: 0.875rem; overflow: hidden;
}
.thread-list { border-right: 1px solid var(--neutral-200); display: flex; flex-direction: column; }
.thread-list .search-row { padding: 0.75rem; border-bottom: 1px solid var(--neutral-100); }
.thread-list .scroll { overflow-y: auto; flex: 1; }
.thread-item {
padding: 0.75rem 0.875rem; display: flex; gap: 0.625rem; cursor: pointer;
border-bottom: 1px solid var(--neutral-100); transition: background var(--dur-fast);
}
.thread-item:hover { background: var(--secondary-50); }
.thread-item.active { background: var(--secondary-100); }
.thread-item .meta-r { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
.thread-item .time { font: 500 0.6875rem/1 var(--font-sans); color: var(--neutral-500); font-variant-numeric: tabular-nums; }
.thread-item .unread {
background: var(--secondary-500); color: #fff; font: 700 0.625rem/1 var(--font-sans);
padding: 3px 0.4375rem; border-radius: 999px; min-width: 1.25rem; text-align: center;
}
.thread-item .body-c { flex: 1; min-width: 0; }
.thread-item .nm { font: 600 0.84375rem/1.2 var(--font-sans); color: var(--primary-900); margin-bottom: 3px; }
.thread-item .preview {
font: 400 0.75rem/1.4 var(--font-sans); color: var(--neutral-600);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thread { display: flex; flex-direction: column; background: #ECE5DD; min-width: 0; }
.thread-head {
background: #fff; padding: 0.75rem 1rem; border-bottom: 1px solid var(--neutral-200);
display: flex; align-items: center; gap: 0.75rem;
}
.thread-body {
flex: 1; overflow-y: auto; padding: 1.125rem 1.5rem;
display: flex; flex-direction: column; gap: 0.375rem;
background-image:
radial-gradient(circle at 20% 20%, rgba(2,26,84,.03), transparent 40%),
radial-gradient(circle at 80% 60%, rgba(255,133,187,.06), transparent 40%);
}
.bub {
max-width: 64%; padding: 0.5rem 0.6875rem 0.375rem; border-radius: 0.625rem;
font: 400 0.875rem/1.4 var(--font-sans);
box-shadow: 0 1px 1px rgba(0,0,0,.06); position: relative;
word-wrap: break-word; animation: bub-in .2s ease-out;
}
@keyframes bub-in { from { opacity: 0; transform: translateY(0.25rem); } to { opacity: 1; transform: translateY(0); } }
.bub.in { background: #fff; align-self: flex-start; border-top-left-radius: 3px; }
.bub.out { background: #DCF8C6; align-self: flex-end; border-top-right-radius: 3px; }
.bub .meta {
font: 400 0.625rem/1 var(--font-sans); color: #8C8C8C;
display: flex; gap: 0.25rem; align-items: center; justify-content: flex-end; margin-top: 0.25rem;
}
.bub .tick { color: #34B7F1; font-weight: 700; letter-spacing: -1px; }
.bub.template {
background: #FFF4F9; border: 1px dashed var(--secondary-500); align-self: flex-end;
color: var(--primary-900);
}
.bub.template .tag {
font: 600 0.625rem/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
color: var(--secondary-700); margin-bottom: 0.3125rem;
display: flex; align-items: center; gap: 0.25rem;
}
.day-pill-x {
align-self: center; background: rgba(255,255,255,.92); padding: 0.25rem 0.6875rem; border-radius: 999px;
font: 500 0.6875rem/1 var(--font-sans); color: var(--neutral-700); margin: 0.5rem 0;
box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.composer {
background: #fff; padding: 0.625rem 0.75rem; display: flex; gap: 0.5rem; align-items: center;
border-top: 1px solid var(--neutral-200);
}
.composer .field {
flex: 1; background: #F5F5F5; border: 1px solid transparent; border-radius: 999px;
padding: 0.625rem 1rem; font: 400 0.875rem/1 var(--font-sans); color: var(--primary-900);
}
.composer .field:focus { outline: none; border-color: var(--secondary-500); background: #fff; }
.composer .send {
width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--whatsapp-green);
color: #fff; display: grid; place-items: center; cursor: pointer;
border: none; transition: background var(--dur-fast);
}
.composer .send:hover { background: var(--whatsapp-green-dark); }
.composer .send:disabled { background: var(--neutral-300); cursor: not-allowed; }
.composer .icon-tool {
width: 2.375rem; height: 2.375rem; border-radius: 50%; display: grid; place-items: center;
color: var(--neutral-600); cursor: pointer; background: transparent; border: none;
}
.composer .icon-tool:hover { background: var(--neutral-100); }
.template-pop {
position: absolute; bottom: 3.5rem; left: 0.75rem; right: 0.75rem;
background: #fff; border: 1px solid var(--neutral-200); border-radius: 0.75rem;
box-shadow: var(--shadow-lg); padding: 0.375rem; max-width: 26.25rem;
}
.template-pop .head {
font: 600 0.6875rem/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
color: var(--neutral-500); padding: 0.5rem 0.75rem;
}
.template-pop .item {
padding: 0.625rem 0.75rem; cursor: pointer; border-radius: 0.5rem;
font: 500 0.8125rem/1.4 var(--font-sans); color: var(--primary-900);
}
.template-pop .item:hover { background: var(--secondary-50); }
.template-pop .item .preview { font: 400 0.75rem/1.3 var(--font-sans); color: var(--neutral-600); margin-top: 2px; }
/* ── Modal ──────────────────────────────────────────────────── */
.scrim {
position: fixed; inset: 0; background: rgba(2,26,84,.55);
display: grid; place-items: center; z-index: 1000;
padding: 1.5rem; backdrop-filter: blur(2px);
animation: scrim-in .2s ease-out;
}
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
background: #fff; border-radius: 1.25rem; box-shadow: var(--shadow-xl);
width: 100%; max-width: 35rem; max-height: 88vh; overflow-y: auto;
animation: modal-in .25s cubic-bezier(.16, 1, .3, 1);
}
.modal.wide { max-width: 45rem; }
@keyframes modal-in {
from { opacity: 0; transform: scale(.96) translateY(0.5rem); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-head {
padding: 1.25rem 1.5rem 1rem; display: flex; justify-content: space-between; align-items: flex-start;
border-bottom: 1px solid var(--neutral-100);
}
.modal-head h2 {
font-family: var(--display-font);
font-weight: 700; font-size: 1.375rem; line-height: 1.2; letter-spacing: -.02em;
color: var(--primary-900); margin: 0 0 0.25rem;
}
.modal-head .step-counter {
font: 600 0.6875rem/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
color: var(--secondary-500); margin-bottom: 0.375rem;
}
.modal-head .sub { font: 400 0.8125rem/1.4 var(--font-sans); color: var(--neutral-600); margin: 0; }
.modal-body { padding: 1.375rem 1.5rem; }
.modal-foot {
padding: 1rem 1.5rem; display: flex; justify-content: space-between; gap: 0.75rem;
border-top: 1px solid var(--neutral-100);
}
.steps-bar { display: flex; gap: 0.25rem; margin-bottom: 1.125rem; }
.steps-bar .seg {
flex: 1; height: 0.25rem; border-radius: 2px; background: var(--neutral-200);
transition: background var(--dur-base);
}
.steps-bar .seg.done { background: var(--secondary-500); }
.steps-bar .seg.current { background: var(--primary-500); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }
.field-stack { display: flex; flex-direction: column; gap: 0.875rem; }
.option-card {
border: 1.5px solid var(--neutral-200); border-radius: 0.75rem;
padding: 0.875rem 1rem; cursor: pointer;
display: flex; align-items: center; gap: 0.75rem;
transition: all var(--dur-fast);
}
.option-card:hover { border-color: var(--secondary-500); }
.option-card.selected { border-color: var(--primary-500); background: var(--primary-50); }
.option-card .lead {
width: 2.25rem; height: 2.25rem; border-radius: 0.5rem;
background: var(--secondary-100); color: var(--primary-500);
display: grid; place-items: center; flex-shrink: 0;
}
.option-card.selected .lead { background: var(--primary-500); color: #fff; }
.option-card .name { font: 600 0.875rem/1.2 var(--font-sans); color: var(--primary-900); }
.option-card .duration { font: 400 0.75rem/1.3 var(--font-sans); color: var(--neutral-600); margin-top: 2px; }
.option-card .price {
margin-left: auto; font: 700 0.875rem/1 var(--font-sans); color: var(--primary-900);
font-variant-numeric: tabular-nums;
}
.slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.slot {
padding: 0.625rem 0.5rem; border-radius: 0.5rem;
border: 1px solid var(--neutral-200); background: #fff;
font: 600 0.8125rem/1 var(--font-sans); color: var(--primary-900);
font-variant-numeric: tabular-nums; cursor: pointer; text-align: center;
transition: all var(--dur-fast);
}
.slot:hover { border-color: var(--secondary-500); }
.slot.selected { background: var(--primary-500); color: #fff; border-color: var(--primary-500); }
.slot.taken { background: var(--neutral-100); color: var(--neutral-400); cursor: not-allowed; text-decoration: line-through; }
/* ── Toast ──────────────────────────────────────────────────── */
.toast-wrap {
position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
z-index: 1500; display: flex; flex-direction: column; gap: 0.625rem;
align-items: center; pointer-events: none;
}
.toast {
background: var(--primary-500); color: #fff;
padding: 0.75rem 1.125rem 0.75rem 0.875rem; border-radius: 0.875rem;
display: flex; align-items: center; gap: 0.75rem;
font: 500 0.84375rem/1.4 var(--font-sans); min-width: 20rem; max-width: 30rem;
box-shadow: var(--shadow-xl); pointer-events: auto;
animation: toast-in .35s cubic-bezier(.16, 1, .3, 1);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: translateY(0); } }
.toast.leaving { animation: toast-out .25s ease-in forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateY(0.5rem); } }
.toast .icon-c {
width: 2rem; height: 2rem; border-radius: 50%; flex-shrink: 0;
background: var(--success-500); color: #fff; display: grid; place-items: center;
}
.toast.whatsapp .icon-c { background: var(--whatsapp-green); }
.toast--alert { background: var(--error-600); }
.toast--alert .icon-c { background: rgba(0,0,0,.2); }
.toast b { color: #fff; font-weight: 700; }
/* ── Patient detail / prontuário ────────────────────────────── */
.detail { display: grid; grid-template-columns: 1fr 20rem; gap: 1.125rem; align-items: start; }
.profile-head { display: flex; gap: 1.125rem; padding: 1.375rem; }
.profile-head h2 {
font-family: var(--display-font);
font-weight: 700; font-size: 1.625rem; line-height: 1.15; letter-spacing: -.02em;
color: var(--primary-900); margin: 0 0 0.375rem;
}
.profile-head .meta { font: 400 0.8125rem/1.5 var(--font-sans); color: var(--neutral-600); margin: 0 0 0.625rem; }
.profile-head .badges { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.tab-bar { display: flex; gap: 0.25rem; padding: 0 1.25rem; border-bottom: 1px solid var(--neutral-200); }
.tab {
padding: 0.75rem 0.875rem; font: 500 0.8125rem/1 var(--font-sans); color: var(--neutral-600);
cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
transition: color var(--dur-fast), border-color var(--dur-fast);
}
.tab:hover { color: var(--primary-900); }
.tab.active { color: var(--primary-900); border-color: var(--secondary-500); font-weight: 600; }
/* Refraction RX card */
.rx-card {
background: linear-gradient(180deg, #fff, var(--secondary-50));
border: 1px solid var(--secondary-200); border-radius: 1rem; padding: 1.375rem;
}
.rx-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.125rem; }
.rx-head .ttl { font: 700 1rem/1.2 var(--font-sans); letter-spacing: -.01em; color: var(--primary-900); margin: 0; }
.rx-head .date { font: 500 0.75rem/1 var(--font-sans); color: var(--neutral-600); font-variant-numeric: tabular-nums; margin-top: 0.25rem; }
.rx-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 0.75rem; overflow: hidden; border: 1px solid var(--neutral-200); }
.rx-table th, .rx-table td { padding: 0.6875rem 0.75rem; text-align: center; font-variant-numeric: tabular-nums; border-right: 1px solid var(--neutral-100); }
.rx-table th:last-child, .rx-table td:last-child { border-right: none; }
.rx-table th { font: 600 0.65625rem/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--neutral-600); background: var(--neutral-50); border-bottom: 1px solid var(--neutral-200); }
.rx-table td { font: 700 1.125rem/1 var(--font-sans); color: var(--primary-900); letter-spacing: -.01em; border-top: 1px solid var(--neutral-100); }
.rx-table .eye-label { font: 700 0.8125rem/1 var(--font-sans); letter-spacing: .04em; color: var(--secondary-500); background: var(--secondary-50); }
.rx-table tr:first-child td { border-top: none; }
.rx-extras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; margin-top: 0.875rem; }
.rx-extras .extra { background: #fff; border: 1px solid var(--neutral-200); border-radius: 0.625rem; padding: 0.625rem 0.75rem; }
.rx-extras .extra .l { font: 600 0.625rem/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--neutral-600); margin-bottom: 0.3125rem; }
.rx-extras .extra .v { font: 700 1.0625rem/1 var(--font-sans); color: var(--primary-900); font-variant-numeric: tabular-nums; }
.history-row {
padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--neutral-100);
display: grid; grid-template-columns: 6rem 1fr 6.25rem; gap: 0.875rem; align-items: center;
}
.history-row:last-child { border-bottom: none; }
.history-row:hover { background: var(--neutral-50); cursor: pointer; }
.history-date { font: 700 0.75rem/1.2 var(--font-sans); color: var(--primary-900); font-variant-numeric: tabular-nums; }
.history-date .yr { display: block; color: var(--neutral-500); font-weight: 500; font-size: 0.6875rem; }
.history-title { font: 600 0.84375rem/1.3 var(--font-sans); color: var(--neutral-800); margin-bottom: 2px; }
.history-doc { font: 400 0.75rem/1.3 var(--font-sans); color: var(--neutral-600); }
.acuity-mini {
background: #fff; border: 1px solid var(--neutral-200);
border-radius: 0.75rem; padding: 1rem; display: flex; gap: 0.875rem; align-items: center;
}
.acuity-mini .chart {
width: 4rem; height: 4rem; border-radius: 0.5rem;
background: var(--primary-900); color: #fff;
display: grid; place-items: center;
font: 800 1.75rem/1 var(--font-sans); letter-spacing: -.02em; flex-shrink: 0;
}
.acuity-mini .chart .row { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.acuity-mini .chart .row .l1 { font-size: 1.375rem; }
.acuity-mini .chart .row .l2 { font-size: 0.8125rem; letter-spacing: .15em; }
.acuity-mini .chart .row .l3 { font-size: 0.5625rem; letter-spacing: .25em; }
.acuity-mini .meta-l .lbl { font: 600 0.6875rem/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--neutral-600); margin-bottom: 0.375rem; }
.acuity-mini .meta-l .v { font: 700 1.375rem/1 var(--font-sans); color: var(--primary-900); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.acuity-mini .meta-l .sub { font: 400 0.75rem/1.3 var(--font-sans); color: var(--neutral-600); margin-top: 0.25rem; }
.rx-recent {
background: var(--primary-500); color: #fff;
border-radius: 1rem; padding: 1.375rem; position: relative; overflow: hidden;
}
.rx-recent::before {
content: ""; position: absolute; right: -2.5rem; bottom: -2.5rem;
width: 12.5rem; height: 12.5rem; border-radius: 50%;
background: radial-gradient(circle, rgba(255,133,187,.25), transparent 70%);
}
.rx-recent .eye-l { font: 600 0.6875rem/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--secondary-300); margin-bottom: 1rem; }
.rx-recent .who-r { font: 700 1rem/1.2 var(--font-sans); margin-bottom: 0.75rem; }
.rx-recent .rx-num { display: grid; grid-template-columns: 2rem 1fr 1fr 1fr; gap: 0.5rem; align-items: center; padding: 0.5rem 0; border-top: 1px solid rgba(255,255,255,.15); }
.rx-recent .rx-num.head { border-top: none; }
.rx-recent .rx-num .lbl { font: 600 0.625rem/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--secondary-300); }
.rx-recent .rx-num .v { font: 700 1rem/1 var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.rx-recent .rx-num .eye-tag { font: 700 0.6875rem/1 var(--font-sans); color: var(--secondary-500); letter-spacing: .06em; }
.ribbon {
background: linear-gradient(135deg, var(--secondary-100), var(--secondary-50));
border: 1px solid var(--secondary-200); border-radius: 0.875rem; padding: 1rem 1.25rem;
display: flex; align-items: center; gap: 0.875rem;
}
.ribbon .icon-r {
width: 2.5rem; height: 2.5rem; border-radius: 0.625rem;
background: var(--secondary-500); color: #fff; display: grid; place-items: center; flex-shrink: 0;
}
.ribbon .ttl { font: 700 0.875rem/1.2 var(--font-sans); color: var(--primary-900); margin: 0; }
.ribbon .sub { font: 400 0.78125rem/1.4 var(--font-sans); color: var(--neutral-700); margin: 2px 0 0; }
/* ── Misc ───────────────────────────────────────────────────── */
.divider { height: 1px; background: var(--neutral-200); margin: 0.75rem 0; }
.empty { padding: 2.5rem; text-align: center; color: var(--neutral-600); font: 400 0.875rem/1.5 var(--font-sans); }
.dot-pulse {
width: 0.5rem; height: 0.5rem; border-radius: 50%;
background: var(--success-500); box-shadow: 0 0 0 0 rgba(31,171,79,.6);
animation: dot-pulse 1.8s ease-out infinite;
}
@keyframes dot-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(31,171,79,.6); }
60% { box-shadow: 0 0 0 8px rgba(31,171,79,0); }
}
/* ── Sidebar overlay (mobile) ───────────────────────────────── */
.sidebar-overlay {
display: none; position: fixed; inset: 0;
background: rgba(2, 26, 84, .55); backdrop-filter: blur(2px);
z-index: 25; opacity: 0; transition: opacity var(--dur-slow);
pointer-events: none;
}
.sidebar-overlay.visible { opacity: 1; pointer-events: auto; }
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
.app { grid-template-columns: 1fr; }
.sidebar {
position: fixed; top: 0; left: 0; bottom: 0; width: 15.5rem;
height: 100%; transform: translateX(-15.5rem);
transition: transform var(--dur-slow) cubic-bezier(.4, 0, .2, 1);
z-index: 30;
}
.sidebar.open {
transform: translateX(0);
box-shadow: 8px 0 32px rgba(2, 26, 84, .25);
}
.sidebar-overlay { display: block; }
.topbar .menu-toggle { display: flex; }
.page { padding: 1.25rem 1.125rem 2.5rem; }
}
@media (max-width: 600px) {
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-3-1 { grid-template-columns: 1fr; }
.grid-1-1 { grid-template-columns: 1fr; }
}
/* ── Auth layout ────────────────────────────────────────────── */
body.auth-body {
background: #f0f0f5;
color: var(--text-primary);
font-family: var(--font-sans);
}
.auth-shell {
min-height: 100vh; display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 2.5rem 1.25rem; position: relative;
}
.auth-grid-bg {
position: fixed; inset: 0; pointer-events: none; z-index: -1;
background:
linear-gradient(rgba(2,26,84,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(2,26,84,.035) 1px, transparent 1px),
radial-gradient(ellipse 80% 60% at 10% 0%, rgba(255,133,187,.22) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 90% 100%, rgba(2,26,84,.12) 0%, transparent 55%),
linear-gradient(160deg, #eef0f8 0%, #f5f0f5 50%, #f8eff4 100%);
background-size: 3rem 3rem, 3rem 3rem, 100% 100%, 100% 100%, 100% 100%;
}
input[type="submit"].btn {
-webkit-appearance: none; appearance: none; cursor: pointer;
border: none; display: block;
}
.auth-brand { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 2.5rem; }
.auth-logo { height: 2.5rem; width: auto; }
.brand-svg-mark { height: 1.75rem; width: auto; flex-shrink: 0; }
.auth-card {
background: #fff; border: 1px solid var(--neutral-200);
border-radius: 1.25rem; padding: 2.5rem; width: 100%; max-width: 26.25rem;
box-shadow: var(--shadow-md);
}
.auth-card-header { margin-bottom: 1.75rem; }
.auth-title {
font-family: var(--font-sans); font-size: var(--fs-24); font-weight: var(--fw-bold);
color: var(--text-primary); letter-spacing: var(--tracking-tight); margin-bottom: 0.375rem;
}
.auth-subtitle { font-size: var(--fs-14); color: var(--text-secondary); }
.auth-alert {
background: var(--error-50); border: 1px solid var(--error-100);
border-radius: var(--radius-sm); color: var(--error-700);
font-size: var(--fs-13); padding: 0.625rem 0.875rem; margin-bottom: 1.25rem;
}
.auth-notice {
background: var(--success-50); border: 1px solid var(--success-100);
border-radius: var(--radius-sm); color: var(--success-700);
font-size: var(--fs-13); padding: 0.625rem 0.875rem; margin-bottom: 1.25rem;
}
.auth-form { display: flex; flex-direction: column; gap: 1.125rem; }
.auth-form-footer { text-align: center; margin-top: 0.25rem; }
.form-group { display: flex; flex-direction: column; gap: 0.375rem; }
.form-label {
font-size: var(--fs-12); font-weight: var(--fw-medium);
color: var(--text-secondary); letter-spacing: var(--tracking-wide);
}
.form-label-row { display: flex; align-items: center; justify-content: space-between; }
.form-label-link {
font-size: var(--fs-12); color: var(--text-link); text-decoration: none;
transition: color var(--dur-fast) var(--ease-standard);
}
.form-label-link:hover { color: var(--text-link-hover); }
.form-input {
background: var(--input-bg); border: 1px solid var(--input-border);
border-radius: var(--radius-md); color: var(--input-text);
font-family: var(--font-sans); font-size: var(--fs-14);
padding: 0.625rem 0.875rem; outline: none; width: 100%;
transition: border-color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-standard);
}
.form-input::placeholder { color: var(--input-placeholder); }
.form-input:focus { border-color: var(--input-border-focus); box-shadow: var(--input-shadow-focus); }
.btn-full { width: 100%; margin-top: 0.25rem; justify-content: center; }
.auth-back { margin-top: 1.25rem; text-align: center; }
.auth-back-link {
font-size: var(--fs-13); color: var(--text-secondary); text-decoration: none;
transition: color var(--dur-fast) var(--ease-standard);
}
.auth-back-link:hover { color: var(--text-primary); }
.auth-footer {
margin-top: 2rem; font-size: var(--fs-12); color: var(--text-tertiary); text-align: center;
}
/* ── Placeholder pages ──────────────────────────────────────── */
.placeholder-page {
display: flex; flex-direction: column; align-items: center; justify-content: center;
min-height: 60vh; text-align: center; gap: 1rem;
}
.placeholder-icon {
width: 5rem; height: 5rem; border-radius: 1.25rem;
background: var(--secondary-50); color: var(--secondary-500);
display: grid; place-items: center;
}
.placeholder-title {
font-size: 1.5rem; font-weight: 700; color: var(--text-primary);
letter-spacing: -0.02em; margin: 0;
}
.placeholder-desc {
font-size: 0.9375rem; color: var(--text-secondary); margin: 0; max-width: 20rem;
}
/* ── Painel ─────────────────────────────────────────────────── */
.painel { display: flex; flex-direction: column; gap: 2rem; }
/* Hero */
.painel-hero { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.painel-hero-text { display: flex; flex-direction: column; gap: 0.875rem; }
.painel-eyebrow {
display: flex; align-items: center; gap: 0.75rem;
font: 600 0.75rem/1 var(--font-sans); letter-spacing: .1em;
color: var(--secondary-500); text-transform: uppercase;
}
.painel-eyebrow-line {
display: block; width: 1.75rem; height: 2px;
background: var(--secondary-500); border-radius: 2px; flex-shrink: 0;
}
.painel-greeting {
font: 800 3rem/1.05 var(--font-sans); letter-spacing: -.03em;
color: var(--primary-900); margin: 0;
}
.painel-summary {
font: 400 1rem/1.5 var(--font-sans); color: var(--neutral-600);
max-width: 35rem; margin: 0;
}
.painel-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.25rem; }
.painel-btn { padding: 0.75rem 1.25rem; font-size: 0.9375rem; border-radius: 0.75rem; }
/* Stats row */
.painel-stats {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.pstat {
background: #fff; border: 1px solid var(--neutral-200);
border-radius: 0.875rem; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.375rem;
}
.pstat-label { font: 500 0.75rem/1 var(--font-sans); color: var(--neutral-500); text-transform: uppercase; letter-spacing: .06em; }
.pstat-value { font: 700 1.75rem/1 var(--font-sans); color: var(--primary-900); letter-spacing: -.02em; }
.pstat-sub { font: 400 0.75rem/1 var(--font-sans); }
.pstat-sub.positive { color: var(--success-600); }
.pstat-sub.warning { color: var(--warning-600); }
a.pstat-link { text-decoration: none; cursor: pointer; transition: box-shadow var(--dur-fast), border-color var(--dur-fast); }
a.pstat-link:hover { border-color: var(--primary-300); box-shadow: var(--shadow-sm); }
/* Two-column grid */
.painel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
/* Card header (shared across pages) */
.card-header {
padding: 1rem 1.25rem; display: flex; justify-content: space-between; align-items: center;
border-bottom: 1px solid var(--neutral-100);
}
.card-title-group { display: flex; align-items: center; gap: 0.5rem; }
.card-title { font: 600 0.875rem/1 var(--font-sans); color: var(--primary-900); }
.card-count {
background: var(--neutral-100); color: var(--neutral-600);
font: 600 0.6875rem/1 var(--font-sans); padding: 2px 0.4375rem; border-radius: 999px;
}
.card-link { font: 500 0.8125rem/1 var(--font-sans); color: var(--secondary-500); text-decoration: none; }
.card-link:hover { color: var(--secondary-600); }
/* Badge BEM aliases */
.badge-confirmed { background: var(--success-50); color: var(--success-700); }
.badge-pending { background: var(--warning-50); color: var(--warning-700); }
.badge-cancelled { background: var(--error-50); color: var(--error-700); }
/* Agenda list */
.agenda-list { padding: 0.5rem 0; }
.agenda-item {
display: flex; align-items: center; gap: 0.875rem;
padding: 0.6875rem 1.25rem;
border-bottom: 1px solid var(--neutral-50);
}
.agenda-item:last-child { border-bottom: none; }
.agenda-time { font: 600 0.8125rem/1 var(--font-sans); color: var(--primary-500); min-width: 2.625rem; }
.agenda-info { flex: 1; }
.agenda-name { font: 500 0.875rem/1.2 var(--font-sans); color: var(--primary-900); }
.agenda-type { font: 400 0.75rem/1 var(--font-sans); color: var(--neutral-500); margin-top: 3px; }
/* WhatsApp list */
.wpp-list { padding: 0.5rem 0; }
.wpp-item {
display: flex; align-items: center; gap: 0.75rem;
padding: 0.6875rem 1.25rem;
border-bottom: 1px solid var(--neutral-50); cursor: pointer;
transition: background var(--dur-fast);
text-decoration: none; color: inherit;
}
.wpp-item:last-child { border-bottom: none; }
.wpp-item:hover { background: var(--neutral-50); }
.av-sm { width: 2.25rem; height: 2.25rem; font-size: 0.8125rem; }
.wpp-info { flex: 1; min-width: 0; }
.wpp-name { font: 500 0.875rem/1.2 var(--font-sans); color: var(--primary-900); }
.wpp-preview { font: 400 0.75rem/1 var(--font-sans); color: var(--neutral-500); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpp-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3125rem; }
.wpp-time { font: 400 0.6875rem/1 var(--font-sans); color: var(--neutral-400); }
.wpp-badge {
background: var(--secondary-500); color: #fff;
font: 700 0.625rem/1 var(--font-sans); padding: 2px 0.375rem;
border-radius: 999px; min-width: 1rem; text-align: center;
}
@media (max-width: 900px) {
.painel-stats { grid-template-columns: repeat(2, 1fr); }
.painel-grid { grid-template-columns: 1fr; }
.painel-greeting { font-size: 2.25rem; }
}
/* ── Patient record ─────────────────────────────────────────── */
.patient-record { display: flex; flex-direction: column; gap: 1.25rem; }
/* ── Archive patient morphing button ─────────────────────────── */
@keyframes morphIn {
from { opacity: 0; transform: scaleX(.6); filter: blur(2px); }
to { opacity: 1; transform: scaleX(1); filter: blur(0); }
}
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.patient-delete-zone { display: flex; justify-content: center; align-items: center; min-height: 3.5rem; margin-top: 2.25rem; }
.patient-delete-zone [hidden] { display: none !important; }
.del-quiet {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.625rem 1rem; border-radius: 0.625rem;
border: 1px solid transparent; background: transparent;
font: 500 0.875rem/1 var(--font-sans); color: var(--neutral-500);
cursor: pointer; transition: all .18s;
}
.del-quiet:hover { background: var(--error-50); color: var(--error-700); border-color: var(--error-100); }
.del-armed {
display: inline-flex; align-items: center; gap: 0.875rem;
padding: 0.625rem 0.75rem 0.625rem 1.125rem; border-radius: 0.875rem;
background: var(--error-50); border: 1px solid var(--error-100);
box-shadow: 0 4px 14px rgba(229,57,53,.12);
animation: morphIn .25s cubic-bezier(.16,1,.3,1);
position: relative; overflow: hidden;
}
.del-armed::after {
content: ""; position: absolute; inset: 0; border-radius: 0.875rem; pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
transform: translateX(-100%); animation: shimmer 1.6s ease-out;
}
.del-armed-text { font: 500 0.875rem/1.3 var(--font-sans); color: var(--error-700); }
.del-armed-text b { font-weight: 700; }
.del-btn-cancel {
padding: 0.5rem 0.875rem; border-radius: 0.5625rem;
background: #fff; border: 1px solid var(--neutral-300);
font: 600 0.8125rem/1 var(--font-sans); color: var(--primary-900); cursor: pointer;
transition: border-color .12s;
}
.del-btn-cancel:hover { border-color: var(--primary-300); }
.del-btn-confirm {
padding: 0.5rem 0.875rem; border-radius: 0.5625rem;
background: var(--error-500); border: none;
font: 600 0.8125rem/1 var(--font-sans); color: #fff; cursor: pointer;
transition: background .12s;
}
.del-btn-confirm:hover { background: var(--error-600); }
.del-btn-confirm:active { background: var(--error-700); transform: scale(.98); }
.del-done {
display: inline-flex; align-items: center; gap: 0.625rem;
padding: 0.75rem 1rem; border-radius: 0.75rem;
background: #fff; border: 1px solid var(--neutral-200);
font: 500 0.875rem/1 var(--font-sans); color: var(--neutral-700);
animation: morphIn .25s cubic-bezier(.16,1,.3,1);
box-shadow: var(--shadow-xs);
}
.del-done-check {
width: 1.375rem; height: 1.375rem; border-radius: 50%;
background: var(--success-50); color: var(--success-600);
display: grid; place-items: center; flex-shrink: 0;
}
.patient-section .field-value {
font: 400 0.9375rem/1.4 var(--font-sans); color: var(--primary-900); margin: 0.375rem 0 0;
}
.patient-section .font-mono { font-family: var(--font-mono); }
.field-grid--full { grid-column: 1 / -1; }
.link { color: var(--secondary-600); text-decoration: underline; font-weight: 500; }
.link:hover { color: var(--secondary-700); }
/* ═══════════════════════════════════════════════════════════════
FICHA CLÍNICA · Atendimento form
═══════════════════════════════════════════════════════════════ */
/* Outer wrapper — replaces .page to remove all padding */
.at-page-outer { padding: 0; max-width: 100%; }
.at-page { padding: 0 0 5.25rem; max-width: 100%; }
/* ── Patient sticky header ──────────────────────────────────── */
.at-patient {
position: sticky; top: 4rem; z-index: 6;
background: rgba(255,255,255,.94); backdrop-filter: blur(0.75rem);
border-bottom: 1px solid var(--neutral-200);
display: flex; justify-content: space-between; align-items: center;
gap: 1.125rem; padding: 0.75rem 1.75rem;
}
.at-patient-left {
display: flex; align-items: center; gap: 0.75rem; min-width: 0; flex: 1;
}
.at-patient-divider {
width: 1px; height: 1.75rem; background: var(--neutral-200); margin: 0 0.25rem; flex-shrink: 0;
}
.at-patient-info { min-width: 0; }
.at-patient-name {
font: 700 1rem/1.2 var(--font-sans); color: var(--primary-900); letter-spacing: -.01em;
display: flex; align-items: baseline; gap: 0.625rem; flex-wrap: wrap;
}
.at-patient-meta {
font: 400 0.75rem/1.2 var(--font-sans); color: var(--neutral-600);
}
.at-alert {
margin-top: 0.3125rem;
display: inline-flex; align-items: center; gap: 0.3125rem;
background: var(--warning-50); color: var(--warning-700);
padding: 3px 0.5rem; border-radius: 0.375rem;
font: 600 0.6875rem/1 var(--font-sans);
}
.at-patient-right { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.at-status {
display: flex; align-items: center; gap: 0.75rem;
padding: 0.5rem 0.875rem;
background: var(--primary-50); border: 1px solid var(--primary-100);
border-radius: 0.75rem;
}
.at-status-dot {
width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--secondary-500);
animation: at-pulse 1.8s ease-out infinite; flex-shrink: 0;
}
@keyframes at-pulse {
0% { box-shadow: 0 0 0 0 rgba(255,133,187,.55); }
70% { box-shadow: 0 0 0 8px rgba(255,133,187,0); }
100% { box-shadow: 0 0 0 0 rgba(255,133,187,0); }
}
.at-status-dot--done { background: var(--neutral-400); animation: none; }
.at-status-label { font: 700 0.75rem/1 var(--font-sans); color: var(--primary-900); }
.at-status-meta { font: 400 0.6875rem/1.3 var(--font-sans); color: var(--neutral-600); margin-top: 2px; }
.at-timer {
display: inline-flex; gap: 0.375rem; align-items: center;
font: 700 0.8125rem/1 var(--font-sans); color: var(--primary-900);
font-variant-numeric: tabular-nums;
padding-left: 0.75rem; border-left: 1px solid var(--primary-100);
}
/* ── Main grid ──────────────────────────────────────────────── */
.at-grid {
display: grid;
grid-template-columns: 1fr 17.5rem;
gap: 1.75rem;
padding: 1.5rem 1.75rem 0;
max-width: 80rem;
}
.at-grid--full { grid-template-columns: 1fr; }
.at-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.at-rail {
display: flex; flex-direction: column; gap: 0.875rem;
position: sticky; top: 10.5rem; align-self: start;
}
/* ── Section ────────────────────────────────────────────────── */
.at-section {
background: #fff;
border: 1px solid var(--neutral-200);
border-radius: 0.875rem;
scroll-margin-top: 11.5625rem;
}
.at-section-head {
padding: 1rem 1.25rem 0.75rem;
display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
border-bottom: 1px solid var(--neutral-100);
}
.at-section-eyebrow {
display: block;
font: 600 0.65625rem/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
color: var(--secondary-500); margin-bottom: 0.375rem;
}
.at-section-head h3 {
font: 700 1.125rem/1.2 var(--font-sans); color: var(--primary-900);
letter-spacing: -.01em; margin: 0 0 0.25rem;
}
.at-section-hint {
font: 400 0.8125rem/1.5 var(--font-sans); color: var(--neutral-600); margin: 0; max-width: 40rem;
}
.at-section-note {
display: flex; align-items: center; gap: 0.375rem;
font: 400 0.71875rem/1.4 var(--font-sans); color: var(--neutral-500);
margin: 0.375rem 0 0;
}
.at-section-note .ico { flex-shrink: 0; }
.at-section-body {
padding: 1rem 1.25rem 1.25rem;
display: flex; flex-direction: column; gap: 0.875rem;
}
/* ── Textarea + chips ───────────────────────────────────────── */
.textarea {
font: 400 0.875rem/1.55 var(--font-sans); padding: 0.75rem 0.875rem;
border: 1px solid var(--neutral-200); border-radius: 0.625rem;
background: #fff; color: var(--primary-900); width: 100%;
resize: vertical; min-height: 5rem;
transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.textarea:focus {
outline: none; border-color: var(--secondary-500);
box-shadow: 0 0 0 3px rgba(255,133,187,.25);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.chip {
border: 1px solid var(--neutral-200); background: #fff;
color: var(--neutral-700);
font: 500 0.75rem/1 var(--font-sans); padding: 0.4375rem 0.6875rem; border-radius: 999px;
cursor: pointer;
transition: all var(--dur-fast) var(--ease-standard);
}
.chip:hover { border-color: var(--secondary-300); color: var(--primary-900); }
.chip.on {
background: var(--secondary-100); border-color: var(--secondary-500);
color: var(--secondary-800); font-weight: 600;
}
.sub-field { display: flex; flex-direction: column; gap: 0.375rem; }
.sub-label {
font: 600 0.6875rem/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase;
color: var(--neutral-600);
}
/* ── Acuidade visual ────────────────────────────────────────── */
.av-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }
.av-eye {
background: var(--bg-body); border: 1px solid var(--neutral-200);
border-radius: 0.75rem; padding: 0.875rem 1rem;
display: flex; flex-direction: column; gap: 0.625rem;
}
.av-eye-label {
font: 700 0.8125rem/1 var(--font-sans); color: var(--primary-900);
display: flex; align-items: baseline; gap: 0.5rem;
}
.av-eye-label em {
font: 400 0.6875rem/1 var(--font-sans); color: var(--neutral-500); font-style: normal;
}
.av-input {
font: 700 1.75rem/1 var(--font-sans); font-variant-numeric: tabular-nums;
text-align: center; letter-spacing: -.01em;
width: 100%; padding: 0.75rem 0.875rem;
border: 1.5px solid var(--neutral-200);
border-radius: 0.625rem; background: #fff; color: var(--primary-900);
transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.av-input:focus {
outline: none; border-color: var(--secondary-500);
box-shadow: 0 0 0 3px rgba(255,133,187,.18);
}
.av-suggest { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.av-pill {
font: 600 0.6875rem/1 var(--font-sans); font-variant-numeric: tabular-nums;
padding: 0.3125rem 0.5625rem; border-radius: 0.375rem;
background: #fff; border: 1px solid var(--neutral-200);
color: var(--neutral-700); cursor: pointer;
transition: all var(--dur-fast);
}
.av-pill:hover { border-color: var(--secondary-300); color: var(--primary-900); }
.av-pill.on { background: var(--primary-900); color: #fff; border-color: var(--primary-900); }
/* ── Section observations (free text) ───────────────────────── */
.at-obs { margin-top: 0.875rem; display: flex; flex-direction: column; gap: 0.375rem; }
.at-obs-label {
font: 600 0.65625rem/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
color: var(--neutral-600);
}
.at-obs .textarea { min-height: 3.5rem; }
/* ── Rx tables ──────────────────────────────────────────────── */
.rx-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; }
.rx-table-card {
background: #fff;
border: 1.5px solid var(--neutral-300); border-radius: 0.875rem;
padding: 0.75rem 0.5rem 0.5625rem;
display: flex; flex-direction: column; gap: 0.5625rem; min-width: 0;
}
.rx-table-card.rx-muted { background: var(--bg-body); border-color: var(--neutral-200); }
.rx-table-card.rx-pink {
border-color: var(--secondary-500);
background: var(--secondary-50);
}
.rx-card-head {
display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem;
padding: 0 0.125rem;
}
.rx-card-head h4 {
margin: 0; font: 700 0.8125rem/1.2 var(--font-sans); color: var(--primary-900);
white-space: nowrap;
}
.rx-card-hint { display: block; font: 400 0.65625rem/1.3 var(--font-sans); color: var(--neutral-500); white-space: nowrap; }
.rx-grid { display: flex; flex-direction: column; gap: 0.3125rem; }
.rx-line {
display: grid; grid-template-columns: 1.25rem 1.05fr 1.05fr 0.72fr 1.18fr;
gap: 3px; align-items: center;
}
.rx-col-h {
font: 600 0.59375rem/1 var(--font-sans); letter-spacing: .06em;
color: var(--neutral-500); text-align: center;
}
.rx-eye { font: 700 0.6875rem/1 var(--font-sans); color: var(--primary-900); }
.rx-input {
width: 100%; min-width: 0;
padding: 0.375rem 0; border-radius: 0.375rem;
font: 600 0.625rem/1 var(--font-sans); letter-spacing: -.01em;
font-variant-numeric: tabular-nums;
color: var(--primary-900); text-align: center;
border: 1px solid var(--neutral-200); background: #fff;
transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.rx-input::placeholder { color: var(--neutral-300); font-weight: 500; }
.rx-input:focus {
outline: none; border-color: var(--secondary-500);
box-shadow: 0 0 0 3px rgba(255,133,187,.25);
}
.rx-input.rx-neg { color: var(--error-500); }
.rx-input.rx-error {
border-color: var(--error-500); background: var(--error-50); color: var(--error-600);
}
.rx-table-card.rx-pink .rx-input { font-weight: 700; }
.rx-add-row {
display: grid; grid-template-columns: 2.375rem minmax(0, 1fr) 1rem;
gap: 0.3125rem; align-items: center;
border-top: 1px dashed var(--neutral-200);
padding-top: 0.4375rem; margin-top: 0.1875rem;
}
.rx-add-label {
font: 700 0.5625rem/1 var(--font-sans); letter-spacing: .04em;
color: var(--primary-900);
}
.rx-add-unit { font: 400 0.625rem/1 var(--font-sans); color: var(--neutral-500); }
.rx-cil-error {
display: flex; gap: 0.375rem; align-items: flex-start;
background: var(--error-50); border-radius: 0.5rem;
padding: 0.4375rem 0.5625rem;
font: 500 0.6875rem/1.4 var(--font-sans); color: var(--error-600);
}
.rx-cil-error .ico { flex-shrink: 0; margin-top: 1px; }
/* ── Ortópticos ─────────────────────────────────────────────── */
.ortopt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.ortopt-card {
background: var(--bg-body); border: 1px solid var(--neutral-200);
border-radius: 0.75rem; padding: 0.875rem 1rem;
display: flex; flex-direction: column; gap: 0.625rem;
}
.ortopt-head { display: flex; justify-content: space-between; align-items: center; }
.ortopt-input-row { display: flex; align-items: baseline; gap: 0.5rem; }
.ortopt-input {
font: 700 1.375rem/1 var(--font-sans); font-variant-numeric: tabular-nums;
letter-spacing: -.02em; text-align: center;
border: 1px solid var(--neutral-200); border-radius: 0.5625rem;
background: #fff; padding: 0.5rem 0.375rem;
color: var(--primary-900); width: 5.375rem; min-width: 0;
transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.ortopt-input:focus {
outline: none; border-color: var(--secondary-500);
box-shadow: 0 0 0 3px rgba(255,133,187,.25);
}
.ortopt-input.rx-neg { color: var(--error-500); }
.ortopt-input.rx-error {
border-color: var(--error-500); background: var(--error-50); color: var(--error-600);
}
.ortopt-input--mem { font-size: 1.125rem; width: 5.25rem; }
.ortopt-unit { font: 500 0.8125rem/1 var(--font-sans); color: var(--neutral-600); }
.ortopt-ref { font: 400 0.6875rem/1 var(--font-sans); color: var(--neutral-500); }
.ortopt-mem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
.ortopt-mem-eye { display: flex; flex-direction: column; gap: 0.25rem; }
.ortopt-eye-label { font: 700 0.625rem/1 var(--font-sans); color: var(--primary-900); }
/* ── Conduta ────────────────────────────────────────────────── */
.conduta-foot { display: flex; gap: 0.625rem; flex-wrap: wrap; margin-top: 0.25rem; }
.conduta-tag {
display: inline-flex; gap: 0.5rem; align-items: center;
padding: 0.5rem 0.75rem;
background: var(--bg-body); border: 1px solid var(--neutral-200);
border-radius: 999px;
font: 500 0.75rem/1 var(--font-sans); color: var(--neutral-700);
}
.conduta-select {
border: 0; background: transparent; padding: 0;
font: 600 0.75rem/1 var(--font-sans); color: var(--primary-900);
cursor: pointer;
}
.conduta-select:focus { outline: none; }
/* ── Right rail ─────────────────────────────────────────────── */
.rail-card {
background: #fff; border: 1px solid var(--neutral-200);
border-radius: 0.75rem;
}
.rail-card-head {
padding: 0.75rem 0.875rem 0.5rem;
display: flex; justify-content: space-between; align-items: center;
border-bottom: 1px solid var(--neutral-100);
}
.rail-card-eyebrow {
font: 600 0.65625rem/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
color: var(--secondary-500);
}
.rail-card-date { font: 600 0.75rem/1 var(--font-sans); color: var(--neutral-600); font-variant-numeric: tabular-nums; }
.rail-card-body { padding: 0.5rem 0.875rem 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; }
.at-stat {
display: flex; justify-content: space-between; align-items: baseline;
padding: 0.3125rem 0;
border-bottom: 1px dashed var(--neutral-100);
}
.at-stat:last-of-type { border-bottom: 0; }
.at-stat-label { font: 500 0.75rem/1.2 var(--font-sans); color: var(--neutral-600); }
.at-stat-value {
font: 700 0.8125rem/1 var(--font-sans); color: var(--primary-900);
font-variant-numeric: tabular-nums;
}
.rail-action {
display: flex; align-items: center; gap: 0.5rem;
padding: 0.5rem 0.5rem; border-radius: 0.5rem; border: 0; background: transparent;
font: 500 0.8125rem/1 var(--font-sans); color: var(--neutral-700);
cursor: pointer; width: 100%; text-align: left;
transition: background var(--dur-fast);
}
.rail-action:hover { background: var(--neutral-100); color: var(--primary-900); }
/* ── Fixed footer bar ───────────────────────────────────────── */
.at-footer {
position: fixed; bottom: 0; left: 15.5rem; right: 0;
background: rgba(255,255,255,.96); backdrop-filter: blur(0.75rem);
border-top: 1px solid var(--neutral-200);
padding: 0.75rem 1.75rem;
display: flex; justify-content: space-between; align-items: center;
z-index: 8;
}
.at-footer-status {
display: inline-flex; gap: 0.5rem; align-items: center;
font: 500 0.75rem/1 var(--font-sans); color: var(--neutral-600);
}
.at-footer-dot {
width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--success-500); flex-shrink: 0;
}
.at-footer-actions { display: flex; gap: 0.5rem; }
/* ── Sidebar pin (Em atendimento) ───────────────────────────── */
.at-pin {
margin: 0.875rem 0.25rem 0.5rem;
padding: 0.75rem 0.75rem 0.625rem;
background: linear-gradient(160deg, var(--primary-500), var(--primary-700));
border-radius: 0.75rem; cursor: pointer; position: relative; overflow: hidden;
box-shadow: 0 4px 14px rgba(2,26,84,.25);
transition: transform var(--dur-fast);
}
.at-pin:hover { transform: translateY(-1px); }
.at-pin-head {
display: flex; align-items: center; gap: 0.375rem;
font: 600 0.65625rem/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
color: var(--secondary-200);
}
.at-pin-dot {
width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--secondary-500);
animation: at-pulse 1.8s ease-out infinite;
}
.at-pin-body {
display: flex; align-items: center; gap: 0.625rem;
margin-top: 0.625rem;
}
.at-pin-av {
width: 2.25rem; height: 2.25rem; font-size: 0.875rem; flex-shrink: 0;
background: var(--secondary-200); color: var(--primary-700);
}
.at-pin-info {
display: flex; flex-direction: column; gap: 0.25rem; min-width: 0;
}
.at-pin-name {
font: 600 0.8125rem/1.2 var(--font-sans); color: #fff;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.at-pin-foot {
display: inline-flex; align-items: center; gap: 3px;
font: 600 0.65625rem/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase;
color: var(--secondary-300);
}
/* ── Consultation history in patient page ───────────────────── */
.consultation-row {
display: grid; grid-template-columns: 6.25rem 1fr 7.5rem 7.5rem;
gap: 0.875rem; align-items: center;
padding: 0.8125rem 1.25rem; border-bottom: 1px solid var(--neutral-100);
cursor: pointer; transition: background var(--dur-fast);
text-decoration: none; color: inherit;
}
.consultation-row:hover { background: var(--secondary-50); }
.consultation-row:last-child { border-bottom: none; }
.consultation-date {
font: 700 0.75rem/1.3 var(--font-sans); color: var(--primary-900);
font-variant-numeric: tabular-nums;
}
.consultation-reason { font: 500 0.8125rem/1.4 var(--font-sans); color: var(--neutral-800); }
.consultation-rx {
font: 600 0.75rem/1.3 var(--font-sans); color: var(--neutral-600);
font-variant-numeric: tabular-nums;
}
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1280px) {
.at-grid { grid-template-columns: 1fr; }
.at-rail { flex-direction: row; flex-wrap: wrap; position: static; }
.rx-row { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.ortopt-grid { grid-template-columns: 1fr; }
.av-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.at-patient { flex-direction: column; align-items: flex-start; gap: 0.625rem; top: 0; }
.at-patient-right { width: 100%; }
.at-footer { left: 0; padding: 0.625rem 1rem; }
.at-footer-status { display: none; }
}
/* ── Agenda · day / week / month + filters + detail + modal ────── */
.ag-page { padding: 1.5rem 1.75rem 3rem; max-width: 87.5rem; }
.ag-head {
display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto;
gap: 0.875rem 1.125rem; margin-bottom: 1.125rem;
}
.ag-head-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ag-head-right { display: flex; align-items: center; gap: 0.625rem; }
.ag-nav {
width: 2rem; height: 2rem; border-radius: 0.5rem;
background: #fff; border: 1px solid var(--neutral-200);
color: var(--primary-900); display: grid; place-items: center;
cursor: pointer; transition: all var(--dur-fast);
}
.ag-nav:hover { border-color: var(--secondary-300); background: var(--secondary-50); }
.ag-today {
height: 2rem; padding: 0 0.75rem; border-radius: 0.5rem;
background: #fff; border: 1px solid var(--neutral-200);
color: var(--primary-900); font: 600 0.8125rem/1 var(--font-sans); cursor: pointer;
transition: all var(--dur-fast);
}
.ag-today:hover { border-color: var(--secondary-300); }
.ag-today.on { background: var(--primary-900); color: #fff; border-color: var(--primary-900); }
.ag-date { font: 700 1.375rem/1 var(--font-sans); color: var(--primary-900); letter-spacing: -.02em; margin: 0 0 0 0.5rem; }
.ag-view { display: inline-flex; padding: 3px; background: var(--neutral-100); border-radius: 0.5625rem; gap: 2px; }
.ag-view-btn {
appearance: none; border: 0; background: transparent;
padding: 0.4375rem 0.875rem; border-radius: 0.4375rem;
font: 600 0.8125rem/1 var(--font-sans); color: var(--neutral-600); cursor: pointer;
transition: all var(--dur-fast);
}
.ag-view-btn:hover { color: var(--primary-900); }
.ag-view-btn.on { background: #fff; color: var(--primary-900); box-shadow: 0 1px 2px rgba(2,26,84,.06); }
.ag-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1.125rem; }
.ag-kpi { background: #fff; border: 1px solid var(--neutral-200); border-radius: 0.75rem; padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; }
.ag-kpi-lbl { font: 500 0.75rem/1.2 var(--font-sans); color: var(--neutral-600); }
.ag-kpi-val { font: 800 1.5rem/1 var(--font-sans); color: var(--primary-900); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ag-kpi-val em { font: 500 0.8125rem/1 var(--font-sans); color: var(--neutral-500); font-style: normal; }
.ag-kpi-val.ok { color: var(--success-700); }
.ag-kpi-val.warn { color: var(--warning-700); }
.ag-kpi-bar { height: 0.375rem; background: var(--neutral-100); border-radius: 3px; overflow: hidden; margin: 0.25rem 0 2px; }
.ag-kpi-bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary-500), var(--secondary-500)); border-radius: 3px; }
.ag-layout { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.ag-layout.with-detail { grid-template-columns: 1fr 21.25rem; }
.ag-main { min-width: 0; }
/* Day view */
.ag-day { background: #fff; border: 1px solid var(--neutral-200); border-radius: 0.875rem; padding: 0.875rem 1.25rem 1.5rem; }
.ag-day-grid { position: relative; margin-left: 3.75rem; }
.ag-day-hour { position: absolute; left: -3.75rem; top: 0; transform: translateY(-50%); width: 3.25rem; text-align: right; font: 600 0.6875rem/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--neutral-500); }
.ag-day-line { position: absolute; left: 0; right: 0; height: 1px; background: var(--neutral-100); }
.ag-day-line.sub { background: transparent; border-top: 1px dashed var(--neutral-100); }
.ag-now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--secondary-500); z-index: 3; display: flex; align-items: center; }
.ag-now-dot { position: absolute; left: -0.4375rem; top: 50%; transform: translateY(-50%); width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--secondary-500); box-shadow: 0 0 0 4px rgba(255,133,187,.2); }
.ag-now-label { position: absolute; right: 0; top: 50%; transform: translate(calc(100% + 0.5rem), -50%); font: 700 0.6875rem/1 var(--font-sans); color: var(--secondary-600); font-variant-numeric: tabular-nums; }
/* Event card */
.ag-event {
position: absolute; left: 0.5rem; right: 0.5rem;
background: #fff; border: 1px solid var(--neutral-200); border-radius: 0.625rem;
display: flex; align-items: stretch; cursor: pointer; padding: 0; text-align: left;
font-family: var(--font-sans); overflow: hidden;
transition: transform var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast);
z-index: 2;
}
.ag-event:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.ag-event.selected { border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(2,26,84,.10), var(--shadow-md); z-index: 4; }
.ag-event-bar { width: 0.25rem; flex-shrink: 0; background: var(--neutral-300); }
.ag-event-body { flex: 1; padding: 0.5rem 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.ag-event-top { display: flex; align-items: center; gap: 0.5rem; font: 700 0.75rem/1 var(--font-sans); color: var(--primary-900); font-variant-numeric: tabular-nums; }
.ag-event-time { font-weight: 700; letter-spacing: -.01em; }
.ag-event-dur { font-weight: 500; color: var(--neutral-500); font-size: 0.6875rem; padding: 2px 0.375rem; background: var(--bg-body); border-radius: 0.25rem; }
.ag-event-status {
margin-left: auto; font: 700 0.625rem/1 var(--font-sans); letter-spacing: .02em; text-transform: uppercase;
padding: 3px 0.4375rem; border-radius: 999px; background: var(--neutral-100); color: var(--neutral-700); white-space: nowrap;
}
.ag-event-status[data-status="confirmed"] { background: var(--success-50); color: var(--success-700); }
.ag-event-status[data-status="pending"] { background: var(--warning-50); color: var(--warning-700); }
.ag-event-status[data-status="cancelled"] { background: var(--error-50); color: var(--error-700); }
.ag-event-status[data-status="attended"] { background: var(--primary-50); color: var(--primary-700); }
.ag-event-status[data-status="now"] { background: var(--secondary-500); color: #fff; }
.ag-event-mid { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.ag-event-name { font: 600 0.8125rem/1.2 var(--font-sans); color: var(--primary-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ag-event-name--inline { font-size: 0.75rem; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ag-event-foot { font: 500 0.6875rem/1.3 var(--font-sans); color: var(--neutral-600); display: flex; gap: 0.25rem; flex-wrap: nowrap; overflow: hidden; }
.ag-dot-sep { color: var(--neutral-300); }
.ag-event.status-confirmed { background: var(--success-50); }
.ag-event.status-confirmed .ag-event-bar { background: var(--success-500); }
.ag-event.status-pending { background: var(--warning-50); }
.ag-event.status-pending .ag-event-bar { background: var(--warning-500); }
.ag-event.status-cancelled { background: #fff; opacity: .6; }
.ag-event.status-cancelled .ag-event-bar { background: var(--error-500); }
.ag-event.status-cancelled .ag-event-name { text-decoration: line-through; }
.ag-event.status-attended { background: var(--neutral-100); }
.ag-event.status-attended .ag-event-bar { background: var(--neutral-400); }
.ag-event.status-now { background: linear-gradient(180deg, var(--secondary-50), #fff); border-color: var(--secondary-500); box-shadow: 0 6px 20px rgba(255,133,187,.18); }
.ag-event.status-now .ag-event-bar { background: var(--secondary-500); }
.ag-event.compact .ag-event-body { padding: 0.3125rem 0.5rem; gap: 2px; }
/* Week view */
.ag-week { background: #fff; border: 1px solid var(--neutral-200); border-radius: 0.875rem; overflow: hidden; }
.ag-week-head { display: grid; grid-template-columns: 3.75rem repeat(7, 1fr); border-bottom: 1px solid var(--neutral-200); }
.ag-week-day { padding: 0.625rem 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 2px; border-left: 1px solid var(--neutral-100); }
.ag-week-day-name { font: 600 0.6875rem/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--neutral-500); }
.ag-week-day-num { font: 700 1.125rem/1 var(--font-sans); color: var(--primary-900); font-variant-numeric: tabular-nums; }
.ag-week-day.today .ag-week-day-num { background: var(--secondary-500); color: #fff; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; }
.ag-week-day.today .ag-week-day-name { color: var(--secondary-600); }
.ag-week-grid { display: grid; grid-template-columns: 3.75rem repeat(7, 1fr); position: relative; }
.ag-week-hours { position: relative; border-right: 1px solid var(--neutral-100); }
.ag-week-hour { position: absolute; right: 0.5rem; transform: translateY(-50%); font: 600 0.6875rem/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--neutral-500); }
.ag-week-col { position: relative; border-left: 1px solid var(--neutral-100); }
.ag-week-col.today { background: linear-gradient(180deg, rgba(255,206,227,.15), transparent 12.5rem); }
/* Month view */
.ag-month { background: #fff; border: 1px solid var(--neutral-200); border-radius: 0.875rem; overflow: hidden; }
.ag-month-head { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--bg-body); border-bottom: 1px solid var(--neutral-200); }
.ag-month-head-cell { padding: 0.625rem 0.75rem; font: 600 0.6875rem/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--neutral-500); }
.ag-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 8.125rem; }
.ag-month-cell { border-right: 1px solid var(--neutral-100); border-bottom: 1px solid var(--neutral-100); padding: 0.5rem 0.5rem 0.375rem; display: flex; flex-direction: column; gap: 0.25rem; cursor: pointer; transition: background var(--dur-fast); }
.ag-month-cell:hover { background: var(--secondary-50); }
.ag-month-cell.out { background: var(--bg-body); }
.ag-month-cell.out .ag-month-cell-day { color: var(--neutral-400); }
.ag-month-cell-h { display: flex; justify-content: space-between; align-items: center; }
.ag-month-cell-day { font: 700 0.8125rem/1 var(--font-sans); color: var(--primary-900); font-variant-numeric: tabular-nums; }
.ag-month-cell.today .ag-month-cell-day { background: var(--secondary-500); color: #fff; width: 1.375rem; height: 1.375rem; border-radius: 50%; display: grid; place-items: center; }
.ag-month-cell-count { font: 700 0.6875rem/1 var(--font-sans); color: var(--neutral-500); background: var(--neutral-100); padding: 2px 0.375rem; border-radius: 999px; }
.ag-month-events { display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.ag-month-event { display: flex; align-items: center; gap: 0.375rem; padding: 3px 0.375rem; border-radius: 0.3125rem; background: var(--neutral-100); border: 0; font: 500 0.6875rem/1.2 var(--font-sans); color: var(--primary-900); cursor: pointer; text-align: left; border-left: 3px solid var(--neutral-400); overflow: hidden; width: 100%; }
.ag-month-event-time { font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.ag-month-event-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-month-event.status-confirmed { background: var(--success-50); border-left-color: var(--success-500); }
.ag-month-event.status-pending { background: var(--warning-50); border-left-color: var(--warning-500); }
.ag-month-event.status-cancelled { background: #fff; border-left-color: var(--error-500); opacity: .6; }
.ag-month-event.status-attended { background: var(--primary-50); border-left-color: var(--primary-500); }
.ag-month-event.status-now { background: var(--secondary-100); border-left-color: var(--secondary-500); font-weight: 700; }
.ag-month-more { font: 600 0.625rem/1.2 var(--font-sans); color: var(--neutral-500); padding: 2px 0.375rem; }
/* Detail panel */
.ag-detail { background: #fff; border: 1px solid var(--neutral-200); border-radius: 0.875rem; display: flex; flex-direction: column; position: sticky; top: 5rem; align-self: start; animation: ag-detail-in .22s cubic-bezier(.16,1,.3,1); overflow: hidden; }
@keyframes ag-detail-in { from { opacity: 0; transform: translateX(0.5rem); } to { opacity: 1; transform: translateX(0); } }
.ag-detail-head { padding: 0.875rem 1rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--neutral-100); }
.ag-detail-close { width: 1.75rem; height: 1.75rem; border-radius: 0.4375rem; border: 0; background: transparent; display: grid; place-items: center; color: var(--neutral-600); cursor: pointer; }
.ag-detail-close:hover { background: var(--neutral-100); color: var(--primary-900); }
.ag-detail-body { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.ag-detail-when { display: flex; flex-direction: column; gap: 2px; }
.ag-detail-time { font: 800 1.875rem/1 var(--font-sans); color: var(--primary-900); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ag-detail-meta { font: 500 0.8125rem/1.3 var(--font-sans); color: var(--neutral-600); }
.ag-detail-patient { display: flex; gap: 0.75rem; align-items: center; padding: 0.75rem; background: var(--bg-body); border-radius: 0.625rem; }
.ag-detail-pname { font: 700 0.875rem/1.2 var(--font-sans); color: var(--primary-900); }
.ag-detail-pmeta { font: 400 0.75rem/1.3 var(--font-sans); color: var(--neutral-600); margin: 2px 0; }
.ag-detail-phone { font: 500 0.75rem/1.3 var(--font-sans); color: var(--neutral-700); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 0.25rem; }
.ag-detail-rows { display: flex; flex-direction: column; gap: 2px; }
.ag-detail-row { display: grid; grid-template-columns: 1rem 5.625rem 1fr; gap: 0.5rem; align-items: center; padding: 0.5rem 0; border-bottom: 1px dashed var(--neutral-100); color: var(--neutral-600); }
.ag-detail-row:last-child { border-bottom: 0; }
.ag-detail-row-lbl { font: 500 0.75rem/1 var(--font-sans); color: var(--neutral-600); }
.ag-detail-row-val { font: 600 0.8125rem/1.3 var(--font-sans); color: var(--primary-900); }
.ag-detail-notes p { font: 400 0.8125rem/1.5 var(--font-sans); color: var(--neutral-700); margin: 0.375rem 0 0; padding: 0.625rem 0.75rem; background: var(--bg-body); border-radius: 0.5rem; }
.ag-busy-banner {
display: flex; align-items: center; gap: 0.5rem;
background: var(--warning-50); border: 1px solid var(--warning-200);
color: var(--warning-800); border-radius: 0.625rem;
padding: 0.625rem 0.75rem; margin-bottom: 0.75rem;
font: 500 0.8125rem/1.4 var(--font-sans);
}
.ag-busy-banner strong { font-weight: 700; color: var(--warning-900); }
.ag-busy-banner svg { flex-shrink: 0; color: var(--warning-600); }
.ag-detail-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.ag-detail-actions > .btn { width: 100%; justify-content: center; }
.ag-detail-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.ag-detail-actions-grid .btn { justify-content: center; }
/* New appointment modal */
/* ── Nova Consulta · Drawer ──────────────────────────────────────────────── */
.nc-scrim { position: fixed; inset: 0; background: rgba(2,26,84,.45); backdrop-filter: blur(2px); z-index: 900; animation: nc-scrim-in var(--dur-base) var(--ease-standard); }
@keyframes nc-scrim-in { from { opacity: 0; } to { opacity: 1; } }
.nc-scrim.closing { animation: nc-scrim-out var(--dur-base) var(--ease-standard) forwards; }
@keyframes nc-scrim-out { to { opacity: 0; } }
.nc-drawer { position: fixed; top: 0; right: 0; width: 35rem; max-width: 100vw; height: 100vh; overflow: hidden; background: #fff; z-index: 1000; box-shadow: -1rem 0 3rem rgba(2,26,84,.18); display: flex; flex-direction: column; animation: nc-slide-in var(--dur-slow) var(--ease-out); }
@keyframes nc-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.nc-drawer.closing { animation: nc-slide-out var(--dur-base) var(--ease-standard) forwards; }
@keyframes nc-slide-out { to { transform: translateX(100%); } }
/* Head */
.nc-head { padding: 1.375rem 1.75rem; border-bottom: 1px solid var(--neutral-100); display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-shrink: 0; }
.nc-head-title { font: 700 1.375rem/1.2 var(--font-sans); letter-spacing: -.02em; color: var(--primary-900); margin: 0 0 0.25rem; }
.nc-head-sub { font: 400 0.8125rem/1.4 var(--font-sans); color: var(--neutral-600); margin: 0; }
.nc-close-btn { width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; background: var(--neutral-100); border: none; color: var(--neutral-700); cursor: pointer; display: grid; place-items: center; transition: all var(--dur-fast); flex-shrink: 0; }
.nc-close-btn:hover { background: var(--neutral-200); color: var(--primary-900); }
/* Form fills drawer, body scrolls */
.nc-form { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.nc-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1.5rem 1.75rem; }
/* Sections */
.nc-section { margin-bottom: 1.75rem; }
.nc-section-title { font: 600 0.6875rem/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--secondary-500); margin-bottom: 0.625rem; display: flex; align-items: center; gap: 0.5rem; }
.nc-step { width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--secondary-500); color: #fff; display: grid; place-items: center; font-size: 0.625rem; font-weight: 700; letter-spacing: 0; flex-shrink: 0; }
/* Patient search */
.nc-search-wrap { position: relative; }
.nc-search-input { width: 100%; font: 400 0.875rem/1.3 var(--font-sans); padding: 0.75rem 0.875rem 0.75rem 2.625rem; border: 1px solid var(--neutral-300); border-radius: 0.625rem; background: #fff; color: var(--primary-900); transition: all var(--dur-fast); }
.nc-search-input::placeholder { color: var(--neutral-500); }
.nc-search-input:focus { outline: none; border-color: var(--secondary-500); box-shadow: 0 0 0 3px rgba(255,133,187,.25); }
.nc-search-icon { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--neutral-500); pointer-events: none; display: flex; }
/* Results list */
.nc-results { margin-top: 0.5rem; box-shadow: var(--shadow-sm); border-radius: 0.75rem; overflow: hidden; max-height: 17.5rem; overflow-y: auto; }
.nc-group-lbl { padding: 0.625rem 0.875rem 0.375rem; font: 600 0.6875rem/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--neutral-500); background: var(--neutral-50); }
.nc-result { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem; cursor: pointer; transition: background var(--dur-fast); border-top: 1px solid var(--neutral-100); background: #fff; border-left: none; border-right: none; border-bottom: none; width: 100%; text-align: left; }
.nc-result:first-child { border-top: none; }
.nc-result:hover { background: var(--secondary-50); }
.nc-result.add-new { background: var(--secondary-50); }
.nc-result.add-new:hover { background: var(--secondary-100); }
.nc-result-info { flex: 1; min-width: 0; }
.nc-result-name { font: 600 0.875rem/1.2 var(--font-sans); color: var(--primary-900); }
.nc-result.add-new .nc-result-name { color: var(--secondary-700); }
.nc-result-detail { font: 400 0.75rem/1.3 var(--font-sans); color: var(--neutral-600); margin-top: 2px; }
.nc-result.add-new .nc-result-detail { color: var(--secondary-700); }
.nc-result-icon-circle { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--secondary-200); color: var(--secondary-700); display: grid; place-items: center; flex-shrink: 0; }
/* Selected patient card */
.nc-patient-card { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem; background: linear-gradient(135deg, #FFF4F9 0%, #fff 100%); border: 1px solid var(--secondary-200); border-radius: 0.75rem; }
.nc-patient-card-info { flex: 1; min-width: 0; }
.nc-patient-card-name { font: 700 1rem/1.2 var(--font-sans); color: var(--primary-900); }
.nc-patient-card-meta { font: 400 0.75rem/1.4 var(--font-sans); color: var(--neutral-700); margin-top: 0.25rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.nc-patient-card-meta span { display: inline-flex; align-items: center; gap: 0.25rem; }
.nc-patient-clear { background: transparent; border: none; color: var(--neutral-500); cursor: pointer; padding: 0.25rem; border-radius: 0.375rem; transition: all var(--dur-fast); flex-shrink: 0; display: flex; }
.nc-patient-clear:hover { background: var(--neutral-100); color: var(--error-600); }
/* Appointment type chips */
.nc-chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.nc-chip { padding: 0.5rem 0.875rem; border-radius: 999px; background: #fff; border: 1px solid var(--neutral-300); color: var(--neutral-700); font: 500 0.8125rem/1 var(--font-sans); cursor: pointer; transition: all var(--dur-fast); display: inline-flex; align-items: center; gap: 0.375rem; }
.nc-chip:hover { border-color: var(--secondary-500); color: var(--primary-900); }
.nc-chip.active { background: var(--primary-900); border-color: var(--primary-900); color: #fff; }
/* Field layout */
.nc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.nc-field-row.three { grid-template-columns: 1.2fr 1fr 1fr; }
.nc-field-label { font: 600 0.8125rem/1 var(--font-sans); color: var(--primary-900); display: block; margin-bottom: 0.375rem; }
.nc-input { width: 100%; font: 400 0.875rem/1.3 var(--font-sans); padding: 0.6875rem 0.875rem; border: 1px solid var(--neutral-300); border-radius: 0.625rem; background: #fff; color: var(--primary-900); transition: all var(--dur-fast); }
.nc-input:focus { outline: none; border-color: var(--secondary-500); box-shadow: 0 0 0 3px rgba(255,133,187,.25); }
select.nc-input { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0.875rem center; padding-right: 2.375rem; }
textarea.nc-input { resize: vertical; min-height: 4rem; font-family: inherit; }
/* Duration chips */
.nc-dur-row { display: flex; gap: 0.375rem; flex-wrap: wrap; margin-top: 0.625rem; }
.nc-dur-chip { padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid var(--neutral-300); background: #fff; font: 600 0.8125rem/1 var(--font-sans); color: var(--neutral-700); cursor: pointer; transition: all var(--dur-fast); font-variant-numeric: tabular-nums; }
.nc-dur-chip:hover { border-color: var(--secondary-500); }
.nc-dur-chip.active { background: var(--secondary-100); border-color: var(--secondary-500); color: var(--primary-900); }
/* Conflict banner */
.nc-conflict { margin-top: 0.75rem; padding: 0.75rem 0.875rem; background: #FEF3C7; border: 1px solid #FCD34D; border-radius: 0.625rem; display: flex; gap: 0.625rem; align-items: flex-start; }
.nc-conflict-text { flex: 1; font: 500 0.8125rem/1.4 var(--font-sans); color: var(--warning-700); }
.nc-conflict-text b { color: var(--primary-900); font-weight: 700; }
.nc-suggestions { margin-top: 0.5rem; display: flex; gap: 0.375rem; flex-wrap: wrap; align-items: center; }
.nc-suggestions-lbl { font: 400 0.75rem/1 var(--font-sans); color: var(--neutral-600); }
.nc-suggestions button { padding: 0.3125rem 0.75rem; background: #fff; border: 1px solid #FCD34D; border-radius: 999px; font: 600 0.75rem/1 var(--font-sans); color: var(--warning-700); cursor: pointer; font-variant-numeric: tabular-nums; transition: all var(--dur-fast); }
.nc-suggestions button:hover { background: #FEF3C7; }
/* WhatsApp section */
.nc-wa { background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 0.875rem; padding: 1rem 1.125rem; margin-bottom: 1.75rem; }
.nc-wa-head { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.75rem; }
.nc-wa-icon { width: 2rem; height: 2rem; border-radius: 50%; background: var(--whatsapp-green); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.nc-wa-title { font: 700 0.875rem/1.2 var(--font-sans); color: var(--primary-900); }
.nc-wa-sub { font: 400 0.75rem/1.3 var(--font-sans); color: var(--neutral-700); margin-top: 2px; }
.nc-wa-toggle { position: relative; width: 2.75rem; height: 1.5rem; background: var(--neutral-300); border-radius: 999px; cursor: pointer; transition: background var(--dur-base); border: none; padding: 0; flex-shrink: 0; margin-left: auto; }
.nc-wa-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 1.25rem; height: 1.25rem; background: #fff; border-radius: 50%; transition: transform var(--dur-base) var(--ease-out); box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.nc-wa-toggle.on { background: var(--whatsapp-green); }
.nc-wa-toggle.on::after { transform: translateX(1.25rem); }
.nc-template-pick { display: flex; gap: 0.375rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.nc-template-btn { padding: 0.375rem 0.75rem; border-radius: 999px; background: #fff; border: 1px solid #BBF7D0; color: var(--neutral-700); font: 500 0.75rem/1 var(--font-sans); cursor: pointer; transition: all var(--dur-fast); }
.nc-template-btn:hover { border-color: var(--whatsapp-green); }
.nc-template-btn.active { background: var(--whatsapp-green); border-color: var(--whatsapp-green); color: #fff; }
.nc-wa-preview { background: #ECE5DD; border-radius: 0.75rem; padding: 0.875rem; display: flex; flex-direction: column; gap: 0.375rem; }
.nc-wa-preview-lbl { font: 600 0.625rem/1 var(--font-sans); color: var(--neutral-600); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 0.25rem; }
.nc-wa-bubble { background: #fff; align-self: flex-start; padding: 0.5rem 0.75rem 0.375rem; border-radius: 0.625rem; border-top-left-radius: 3px; font: 400 0.8125rem/1.4 var(--font-sans); color: var(--primary-900); max-width: 92%; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.nc-wa-time { font: 400 0.625rem/1 var(--font-sans); color: #8C8C8C; text-align: right; margin-top: 0.25rem; }
.nc-wa-actions { display: flex; gap: 0.375rem; margin-top: 0.25rem; }
.nc-wa-action-btn { flex: 1; background: #fff; border: none; padding: 0.5rem; font: 600 0.75rem/1 var(--font-sans); color: var(--whatsapp-green-dark, #128C7E); border-radius: 0.5rem; cursor: default; box-shadow: 0 1px 1px rgba(0,0,0,.06); display: flex; align-items: center; justify-content: center; }
/* Footer */
.nc-foot { padding: 1rem 1.75rem; border-top: 1px solid var(--neutral-100); background: #fff; display: flex; gap: 0.75rem; align-items: center; flex-shrink: 0; }
.nc-foot-hint { margin-right: auto; font: 400 0.75rem/1.4 var(--font-sans); color: var(--neutral-600); display: flex; align-items: center; gap: 0.375rem; }
.nc-cancel-btn { padding: 0.625rem 1.125rem; background: transparent; border: 1px solid var(--neutral-300); border-radius: 0.625rem; color: var(--neutral-700); font: 600 0.875rem/1 var(--font-sans); cursor: pointer; transition: all var(--dur-fast); }
.nc-cancel-btn:hover { background: var(--neutral-100); color: var(--primary-900); }
.nc-save-btn { padding: 0.6875rem 1.375rem; background: var(--primary-900); color: #fff; border: none; border-radius: 0.625rem; font: 600 0.875rem/1 var(--font-sans); cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; transition: all var(--dur-fast); }
.nc-save-btn:hover:not(:disabled) { background: var(--primary-700); }
.nc-save-btn:disabled { background: var(--neutral-200); color: var(--neutral-500); cursor: not-allowed; }
/* Avatar size */
.av-36 { width: 2.25rem; height: 2.25rem; font-size: 0.8125rem; }
@media (max-width: 1240px) {
.ag-layout.with-detail { grid-template-columns: 1fr; }
.ag-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.ag-page { padding: 1rem 1rem 2.5rem; }
.ag-week { overflow-x: auto; }
.ag-week-head, .ag-week-grid { min-width: 43.75rem; }
}
/* ═══════════════════════════════════════════════════════════════
PATIENT FORM · Novo / Editar Paciente
═══════════════════════════════════════════════════════════════ */
.pf-form-layout { width: 100%; }
.pf-form-stack { display: flex; flex-direction: column; gap: 1rem; }
/* Section card */
.pf-section {
background: #fff;
border: 1px solid var(--neutral-200);
border-radius: 0.875rem;
box-shadow: var(--shadow-xs);
overflow: hidden;
}
.pf-section-head {
display: flex; align-items: center; gap: 0.75rem;
padding: 1.25rem 1.5rem 0.875rem;
}
.pf-step {
width: 1.75rem; height: 1.75rem; border-radius: 50%;
background: var(--secondary-100); color: var(--secondary-700);
display: grid; place-items: center;
font: 700 0.8125rem/1 var(--font-sans); font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.pf-section-titles { flex: 1; min-width: 0; }
.pf-section-titles h2 { font: 700 1.0625rem/1.2 var(--font-sans); letter-spacing: -.01em; color: var(--primary-900); margin: 0; }
.pf-section-titles .pf-sub { font: 400 0.8125rem/1.3 var(--font-sans); color: var(--text-tertiary); margin-top: 0.1875rem; }
/* Status badge */
.pf-status-badge { display: inline-flex; align-items: center; font: 600 0.6875rem/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--neutral-500); white-space: nowrap; }
.pf-status-done { color: var(--success-700); gap: 0.3125rem; }
.pf-status-done::before {
content: ""; width: 1rem; height: 1rem; border-radius: 50%;
background: var(--success-500) url("data:image/svg+xml;utf8,") center / 0.625rem no-repeat;
display: inline-block; flex-shrink: 0;
}
.pf-status-pending {
background: var(--secondary-50); color: var(--secondary-700);
padding: 0.25rem 0.5rem; border-radius: 999px; font-size: 0.65625rem; gap: 0.25rem;
}
.pf-status-pending::before {
content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%;
background: var(--secondary-500); display: inline-block; flex-shrink: 0;
}
.pf-status-optional { color: var(--neutral-400); }
/* Section body — 12-col grid */
.pf-section-body {
padding: 0.375rem 1.5rem 1.375rem;
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem 0.875rem;
}
/* Fields */
.pf-field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.pf-col-12 { grid-column: span 12; }
.pf-col-9 { grid-column: span 9; }
.pf-col-8 { grid-column: span 8; }
.pf-col-6 { grid-column: span 6; }
.pf-col-4 { grid-column: span 4; }
.pf-col-3 { grid-column: span 3; }
.pf-col-2 { grid-column: span 2; }
.pf-field > label {
font: 600 0.6875rem/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
color: var(--neutral-600); display: inline-flex; align-items: center; gap: 0.25rem;
}
.pf-field > label .req { color: var(--secondary-500); }
.pf-field > label .hint { color: var(--neutral-400); font-weight: 500; letter-spacing: 0; text-transform: none; margin-left: auto; font-size: 0.6875rem; }
.pf-help { font: 400 0.75rem/1.3 var(--font-sans); color: var(--neutral-500); }
.pf-err { font: 500 0.75rem/1 var(--font-sans); color: var(--error-600); display: block; min-height: 1rem; margin-top: 0.25rem; }
.input--invalid { border-color: var(--error-400) !important; }
.input--invalid:focus { box-shadow: 0 0 0 3px rgba(229,57,53,.14) !important; }
/* Icon-prefixed input wrapper */
.pf-input-wrap { position: relative; }
.pf-icon-lead { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--neutral-500); pointer-events: none; display: flex; align-items: center; }
.pf-input-wrap > .input { padding-left: 2.75rem; }
/* Photo upload row */
.pf-photo-upload { grid-column: span 12; display: flex; gap: 0.875rem; align-items: center; padding: 0.25rem 0; }
.pf-photo-av {
width: 4rem; height: 4rem; border-radius: 50%;
background: var(--secondary-100); color: var(--secondary-600);
display: grid; place-items: center;
font: 700 1.375rem/1 var(--font-sans); flex-shrink: 0;
border: 2px dashed var(--secondary-300);
}
.pf-photo-copy .pf-t { font: 600 0.875rem/1.2 var(--font-sans); color: var(--primary-900); margin-bottom: 0.1875rem; }
.pf-photo-copy .pf-d { font: 400 0.78125rem/1.3 var(--font-sans); color: var(--neutral-600); }
.pf-photo-copy .pf-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.pf-photo-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
/* Segmented Particular / Convênio */
.pf-segmented {
display: inline-flex; padding: 3px;
background: var(--neutral-100); border: 1px solid var(--neutral-200); border-radius: 0.625rem; gap: 2px;
}
.pf-segmented label {
padding: 0.5rem 0.875rem; border-radius: 0.4375rem;
font: 600 0.8125rem/1 var(--font-sans); color: var(--neutral-600);
cursor: pointer; display: inline-flex; align-items: center; gap: 0.375rem;
transition: background var(--dur-fast), color var(--dur-fast);
user-select: none;
}
.pf-segmented label:hover { color: var(--primary-900); }
.pf-segmented input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.pf-segmented label:has(input:checked) {
background: #fff; color: var(--primary-900);
box-shadow: 0 1px 2px rgba(2,26,84,.08);
}
/* Footer actions bar */
.pf-actions-bar { display: flex; justify-content: flex-end; align-items: center; padding: 1.25rem 0 0; gap: 1rem; border-top: 1px solid var(--neutral-200); }
.pf-actions-bar .pf-btns { display: flex; gap: 0.625rem; }
/* btn-secondary disabled state */
.btn-secondary:disabled { background: var(--neutral-300); color: var(--neutral-500); box-shadow: none; cursor: not-allowed; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
@media (max-width: 720px) {
.pf-col-3, .pf-col-4 { grid-column: span 6; }
.pf-col-2 { grid-column: span 4; }
.pf-col-6, .pf-col-8, .pf-col-9 { grid-column: span 12; }
.pf-actions-bar { flex-direction: column; align-items: stretch; }
.pf-actions-bar .pf-btns { flex-direction: column; }
}
/* ── Configurações — Agendamento section ───────────────────── */
/* Card head */
.set-card .set-head {
padding: 1.375rem 1.5rem 1.25rem;
border-bottom: 1px solid var(--neutral-100);
display: flex; gap: 0.875rem; align-items: flex-start;
}
.set-card .set-head .set-ic {
width: 2.625rem; height: 2.625rem; border-radius: 0.6875rem; flex-shrink: 0;
background: var(--secondary-100); color: var(--primary-500);
display: grid; place-items: center;
}
.set-card .set-head h2 { font: 700 1.1875rem/1.2 var(--font-sans); letter-spacing: -.01em; color: var(--primary-900); margin: 0; }
.set-card .set-head p { font: 400 0.875rem/1.45 var(--font-sans); color: var(--text-secondary); margin: 0.25rem 0 0; }
.set-card .set-body { padding: 0.5rem 1.5rem 1.5rem; }
/* Setting block */
.set-block { padding: 1.25rem 0; border-bottom: 1px solid var(--neutral-100); }
.set-block:last-child { border-bottom: none; }
.blk-label { font: 600 0.6875rem/1 var(--font-sans); letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); margin: 0 0 0.75rem; }
.set-row { display: flex; align-items: center; gap: 1rem; }
.set-row .set-txt { flex: 1; min-width: 0; }
.set-row .set-txt .set-t { font: 600 0.9375rem/1.3 var(--font-sans); color: var(--primary-900); }
.set-row .set-txt .set-d { font: 400 0.8125rem/1.45 var(--font-sans); color: var(--text-secondary); margin-top: 2px; }
/* Switch toggle (label wrapping hidden checkbox) */
.switch {
display: inline-block;
width: 2.875rem; height: 1.6875rem; border-radius: 999px;
background: var(--neutral-300); position: relative; cursor: pointer; flex-shrink: 0;
transition: background var(--dur-base) var(--ease-standard);
}
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch::after {
content: ""; position: absolute; width: 1.3125rem; height: 1.3125rem;
border-radius: 50%; background: #fff; top: 3px; left: 3px;
box-shadow: 0 1px 3px rgba(2,26,84,.28);
transition: transform var(--dur-base) var(--ease-emphasized);
}
.switch:has(input:checked) { background: var(--primary-500); }
.switch:has(input:checked)::after { transform: translateX(1.1875rem); }
.switch.sw-sm { width: 2.375rem; height: 1.375rem; }
.switch.sw-sm::after { width: 1rem; height: 1rem; }
.switch.sw-sm:has(input:checked)::after { transform: translateX(1rem); }
/* Link field */
.link-field {
display: flex; align-items: stretch; gap: 0; max-width: 32.5rem;
border: 1px solid var(--neutral-300); border-radius: 0.625rem; overflow: hidden; background: #fff;
}
.link-field .lf-url {
flex: 1; min-width: 0; padding: 0.6875rem 0.875rem;
font: 500 0.875rem/1 var(--font-mono); color: var(--primary-900);
display: flex; align-items: center; gap: 0.5625rem;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.link-field .lf-lock { color: var(--neutral-400); flex-shrink: 0; }
.link-field .lf-btn {
border: none; border-left: 1px solid var(--neutral-200); background: var(--neutral-50);
padding: 0 0.9375rem; font: 600 0.8125rem/1 var(--font-sans); color: var(--primary-500); cursor: pointer;
display: flex; align-items: center; gap: 0.375rem; white-space: nowrap;
transition: background var(--dur-fast), color var(--dur-fast);
}
.link-field .lf-btn:hover { background: var(--secondary-50); }
/* Select wrap */
.select-wrap { position: relative; width: fit-content; }
.select-wrap select {
appearance: none; -webkit-appearance: none;
font: 500 0.875rem/1 var(--font-sans); color: var(--primary-900); background: #fff;
border: 1px solid var(--neutral-300); border-radius: 0.625rem;
padding: 0.6875rem 2.625rem 0.6875rem 0.875rem; min-width: 13.75rem; cursor: pointer;
transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.select-wrap select:hover { border-color: var(--neutral-400); }
.select-wrap select:focus { outline: none; border-color: var(--secondary-500); box-shadow: 0 0 0 3px rgba(255,133,187,.25); }
.select-wrap .select-chev { position: absolute; right: 0.8125rem; top: 50%; transform: translateY(-50%) rotate(90deg); pointer-events: none; color: var(--neutral-500); }
/* Schedule tools */
.sched-tools { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; }
.copy-all {
font: 600 0.78125rem/1 var(--font-sans); color: var(--primary-500); cursor: pointer; background: none; border: none;
display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.5625rem; border-radius: 0.5rem;
font-family: var(--font-sans); transition: background var(--dur-fast);
}
.copy-all:hover { background: var(--secondary-50); }
/* Schedule table */
.sched-table { width: 100%; border-collapse: collapse; margin-top: 0.875rem; }
.sched-table th {
font: 600 0.6875rem/1 var(--font-sans); letter-spacing: .05em; text-transform: uppercase; color: var(--text-tertiary);
text-align: left; padding: 0 0 0.75rem; border-bottom: 1px solid var(--neutral-200);
}
.sched-table th.center, .sched-table td.center { text-align: center; }
.sched-table td { padding: 0.75rem 0; border-bottom: 1px solid var(--neutral-100); vertical-align: middle; }
.sched-table tr:last-child td { border-bottom: none; }
.sched-table td.sched-day .nm { font: 600 0.90625rem/1 var(--font-sans); color: var(--primary-900); }
.sched-table tr.off td.sched-day .nm { color: var(--neutral-400); }
.sched-table tr.off .time-input { background: var(--neutral-100); color: var(--neutral-400); pointer-events: none; }
/* Time input */
.time-input {
font: 600 0.875rem/1 var(--font-mono); color: var(--primary-900);
border: 1px solid var(--neutral-300); border-radius: 0.5625rem; padding: 0.5625rem 0.6875rem;
background: #fff; width: 7.25rem;
transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
font-variant-numeric: tabular-nums;
}
.time-input:hover { border-color: var(--neutral-400); }
.time-input:focus { outline: none; border-color: var(--secondary-500); box-shadow: 0 0 0 3px rgba(255,133,187,.25); }
/* Disabled area — CSS-driven via :has() on master toggle */
.set-card:has(#booking_enabled:not(:checked)) .disabled-area {
opacity: .5; pointer-events: none; filter: grayscale(.2);
transition: opacity var(--dur-base);
}
/* Clinic profile fields */
.clinic-profile-fields {
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.set-field { display: flex; flex-direction: column; gap: 0.3125rem; }
.set-field-label { font: 600 0.8125rem/1.3 var(--font-sans); color: var(--text-secondary); }
.set-field-input {
font-family: var(--font-sans);
font-size: 0.9375rem;
color: var(--input-text);
background: var(--input-bg);
border: 1.5px solid var(--neutral-200);
border-radius: 0.625rem;
padding: 0.5625rem 0.75rem;
outline: none;
transition: border-color 0.12s, box-shadow 0.12s;
width: 100%;
resize: vertical;
}
.set-field-input:hover { border-color: var(--neutral-400); }
.set-field-input:focus {
border-color: var(--secondary-500);
box-shadow: 0 0 0 3px rgba(255,133,187,.25);
}
/* Footer */
.set-footer {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: 1.125rem 1.5rem; border-top: 1px solid var(--neutral-100); background: var(--neutral-50);
border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.set-status { font: 500 0.8125rem/1.3 var(--font-sans); color: var(--text-tertiary); display: flex; align-items: center; gap: 0.5rem; }
.set-status.saved { color: var(--success-600); }
.set-status.dirty { color: var(--neutral-600); }
/* Toast */
.toast-wrap { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 1500; display: flex; flex-direction: column; gap: 0.625rem; align-items: center; pointer-events: none; }
.toast {
display: flex; align-items: center; gap: 0.625rem; background: var(--primary-900); color: #fff;
font: 600 0.84375rem/1.3 var(--font-sans); padding: 0.75rem 1rem; border-radius: 0.75rem; box-shadow: var(--shadow-lg);
animation: toast-in .26s var(--ease-out, cubic-bezier(.16,1,.3,1));
pointer-events: auto;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* =====================================================================
WhatsApp Integration Page (wi-*)
===================================================================== */
/* Page wrapper */
.wi-page { max-width: 35rem; margin: 0 auto; }
.wi-head { margin-bottom: 1.5rem; }
.wi-h1 { font: 700 1.75rem/1.2 var(--font-sans); letter-spacing: -0.02em; color: var(--primary-900); margin: 0 0 0.25rem; }
.wi-subtitle { font: 400 0.875rem/1.45 var(--font-sans); color: var(--text-secondary); margin: 0; }
/* Card body */
.wi-card-body {
padding: 1.75rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
}
/* WhatsApp Business chip */
.wa-chip {
display: inline-flex; align-items: center; gap: 0.5625rem;
background: #fff; border: 1px solid var(--neutral-200);
border-radius: 999px; padding: 0.375rem 0.875rem 0.375rem 0.375rem;
align-self: center;
}
.wa-mark-circle {
width: 1.875rem; height: 1.875rem; border-radius: 50%;
background: var(--whatsapp-green); color: #fff;
display: grid; place-items: center; flex-shrink: 0;
}
.wa-mark-circle.lg { width: 2.75rem; height: 2.75rem; }
.wa-chip-name { font: 700 0.8125rem/1.1 var(--font-sans); color: var(--primary-900); }
.wa-chip-sub { font: 500 0.6875rem/1.1 var(--font-sans); color: var(--neutral-600); }
/* QR panel (shown when not connected) */
.wi-qr-panel { display: contents; }
.wi-qr-title { text-align: center; }
.wi-blk-title { font: 700 1rem/1.2 var(--font-sans); color: var(--primary-900); margin: 0 0 0.25rem; letter-spacing: -0.01em; }
.wi-blk-sub { font: 400 0.78125rem/1.45 var(--font-sans); color: var(--neutral-600); margin: 0; }
/* QR code wrapper */
.qr-wrap {
background: #fff; border: 1px solid var(--neutral-200);
border-radius: 0.875rem; padding: 0.875rem;
position: relative; display: inline-flex;
box-shadow: var(--shadow-sm);
}
.qr-wrap .qr-img {
display: block;
transition: filter 0.2s, opacity 0.2s;
}
.qr-wrap .qr-logo {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 2.875rem; height: 2.875rem; border-radius: 0.6875rem; background: #fff;
display: grid; place-items: center;
box-shadow: 0 0 0 4px #fff;
}
.wa-mark-sq {
width: 2.375rem; height: 2.375rem; border-radius: 0.5625rem;
background: var(--whatsapp-green); color: #fff;
display: grid; place-items: center; flex-shrink: 0;
}
.qr-corner { position: absolute; width: 18px; height: 18px; border: 3px solid var(--secondary-500); }
.qr-corner.tl { top: 4px; left: 4px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.qr-corner.tr { top: 4px; right: 4px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.qr-corner.bl { bottom: 4px; left: 4px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.qr-corner.br { bottom: 4px; right: 4px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
/* QR state overlays */
.qr-overlay {
position: absolute; inset: 0; border-radius: 0.875rem;
display: none; flex-direction: column; align-items: center; justify-content: center;
gap: 0.625rem; text-align: center; padding: 1rem;
background: rgba(255,255,255,.88); backdrop-filter: blur(2px);
}
.qr-overlay .qr-ov-t { font: 700 0.875rem/1.25 var(--font-sans); color: var(--primary-900); }
.qr-overlay .qr-ov-d { font: 400 0.75rem/1.4 var(--font-sans); color: var(--neutral-600); max-width: 11.25rem; }
/* Spinner */
.spinner {
width: 2.125rem; height: 2.125rem; border-radius: 50%;
border: 3px solid var(--secondary-100); border-top-color: var(--secondary-500);
animation: wi-spin .8s linear infinite;
}
.spinner.wa { border-color: rgba(37,211,102,.2); border-top-color: var(--whatsapp-green); }
@keyframes wi-spin { to { transform: rotate(360deg); } }
/* State-driven visibility */
[data-state="scanning"] .qr-overlay--scanning { display: flex; }
[data-state="error"] .qr-overlay--error { display: flex; }
[data-state="scanning"] .qr-img,
[data-state="error"] .qr-img { filter: grayscale(.2); opacity: .45; }
[data-state="connected"] .wi-qr-panel-block { display: none; }
[data-state="connected"] .wi-connected-panel { display: flex; }
/* Steps 4-column grid */
.wi-steps-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 0.625rem; width: 100%;
}
.wi-step-cell { display: flex; flex-direction: column; align-items: center; gap: 0.4375rem; text-align: center; }
.wi-step-num {
width: 1.625rem; height: 1.625rem; border-radius: 50%;
background: var(--primary-500); color: #fff;
font: 700 0.8125rem/1 var(--font-sans); display: grid; place-items: center;
font-variant-numeric: tabular-nums;
}
.wi-step-label { font: 500 0.71875rem/1.35 var(--font-sans); color: var(--neutral-700); }
/* Tier note */
.wi-tier-note {
display: flex; gap: 0.625rem; align-items: flex-start;
background: var(--secondary-50); border: 1px solid var(--secondary-100);
border-radius: 0.625rem; padding: 0.6875rem 0.8125rem; width: 100%;
}
.wi-tier-ico { color: var(--secondary-600); flex-shrink: 0; margin-top: 1px; }
.wi-tier-t { font: 600 0.78125rem/1.35 var(--font-sans); color: var(--primary-900); }
.wi-tier-d { font: 400 0.75rem/1.45 var(--font-sans); color: var(--neutral-700); margin-top: 2px; }
.wi-tier-d a { color: var(--text-link); font-weight: 600; }
/* Connected panel */
.wi-connected-panel {
display: none;
flex-direction: column; align-items: center; text-align: center;
gap: 0.75rem; width: 100%;
}
.wi-connected-badge {
width: 4.5rem; height: 4.5rem; border-radius: 50%;
background: var(--success-50); color: var(--success-600);
display: grid; place-items: center;
box-shadow: 0 0 0 8px var(--success-50);
}
.wi-connected-title { font: 700 1.125rem/1.2 var(--font-sans); color: var(--primary-900); letter-spacing: -0.01em; }
.wi-connected-sub { font: 400 0.8125rem/1.4 var(--font-sans); color: var(--neutral-600); margin-top: 0.25rem; }
.wi-connected-card {
width: 100%; background: var(--neutral-50);
border: 1px solid var(--neutral-200); border-radius: 0.625rem;
padding: 0.875rem 1rem; display: flex; align-items: center; gap: 0.75rem; text-align: left;
}
.wa-mark-lg {
width: 2.75rem; height: 2.75rem; border-radius: 0.5625rem;
background: var(--whatsapp-green); color: #fff;
display: grid; place-items: center; flex-shrink: 0;
}
.wi-cc-num { font: 700 0.9375rem/1.2 var(--font-sans); color: var(--primary-900); font-variant-numeric: tabular-nums; }
.wi-cc-meta { font: 400 0.75rem/1.3 var(--font-sans); color: var(--neutral-600); margin-top: 2px; }
/* Meta rows */
.wi-meta-rows { width: 100%; }
.wi-meta-row {
display: flex; align-items: center; justify-content: space-between; gap: 0.625rem;
padding: 0.5625rem 0; border-bottom: 1px solid var(--neutral-100);
}
.wi-meta-row:last-child { border-bottom: 0; }
.wi-mr-l { display: flex; align-items: center; gap: 0.5625rem; font: 500 0.8125rem/1.2 var(--font-sans); color: var(--neutral-700); }
.wi-mr-r { font: 600 0.8125rem/1.2 var(--font-sans); color: var(--primary-900); }
.wi-mr-green { color: var(--whatsapp-green-dark); }
.live-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--whatsapp-green); box-shadow: 0 0 0 3px rgba(37,211,102,.18);
flex-shrink: 0;
}
/* Connected actions */
.wi-connected-actions { display: flex; gap: 0.5rem; justify-content: center; margin-top: 0.125rem; }
.wi-btn-danger { color: var(--error-600) !important; border-color: var(--error-100) !important; }
.wi-btn-danger:hover { border-color: var(--error-500) !important; }
/* Automations card — visible only when WhatsApp is connected */
.wi-automations { margin-top: 1.5rem; }
[data-state="disconnected"] .wi-automations,
[data-state="connecting"] .wi-automations { display: none; }
/* Message block: fields hidden when toggle is off */
.wa-msg-fields { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.wa-msg-block:not(:has(.wa-msg-toggle:checked)) .wa-msg-fields { display: none; }
.wa-msg-fields-row { display: flex; gap: 0.75rem; align-items: flex-start; }
.wa-vars-hint { font: 400 0.75rem/1.4 var(--font-sans); color: var(--neutral-500); }
.wa-vars-hint code { font-family: var(--font-mono, monospace); background: var(--neutral-100); border-radius: 0.25rem; padding: 0.0625rem 0.25rem; }
/* Regenerate button in overlay */
.btn-primary-sm {
display: inline-flex; align-items: center; gap: 0.375rem; cursor: pointer;
font: 600 0.8125rem/1 var(--font-sans); padding: 0.4375rem 0.6875rem;
border-radius: 0.5rem; border: none;
background: var(--primary-500); color: #fff;
transition: background var(--dur-fast);
}
.btn-primary-sm:hover { background: var(--primary-600); }
/* ── Financeiro ─────────────────────────────────────────────── */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.875rem; margin-bottom: 1.5rem; }
@media (max-width: 900px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
.kpi .kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.625rem; }
.kpi .ico-wrap { width: 2rem; height: 2rem; border-radius: 0.5625rem; display: grid; place-items: center; flex-shrink: 0; }
.kpi .sub { font: 500 0.75rem/1.2 var(--font-sans); color: var(--neutral-500); }
.kpi.feature { background: var(--primary-500); border: none; }
.kpi.feature .lbl { color: var(--primary-200); }
.kpi.feature .num { color: #fff; }
.kpi.feature .sub { color: var(--primary-200); }
.kpi.feature .ico-wrap { background: rgba(255,255,255,.14); color: #fff; }
/* payments table */
.tbl { width: 100%; }
.tbl-head,
.tbl-row { display: grid; grid-template-columns: 1.5fr 1.3fr 0.85fr 1fr 0.9fr; gap: 0.875rem; align-items: center; }
.tbl-head { padding: 0.75rem 1.25rem; font: 600 0.6875rem/1 var(--font-sans); letter-spacing: .05em; text-transform: uppercase; color: var(--text-tertiary); border-bottom: 1px solid var(--neutral-100); }
.tbl-row { padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--neutral-100); transition: background var(--dur-fast); }
.tbl-row:last-child { border-bottom: none; }
.tbl-row:hover { background: var(--secondary-50); }
.tbl-row .who { display: flex; align-items: center; gap: 0.6875rem; min-width: 0; }
.tbl-row .nm { font: 600 0.875rem/1.2 var(--font-sans); color: var(--primary-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl-row .svc { font: 400 0.84375rem/1.3 var(--font-sans); color: var(--neutral-700); }
.tbl-row .dt { font: 500 0.8125rem/1.2 var(--font-sans); color: var(--neutral-600); font-variant-numeric: tabular-nums; }
.tbl-row .amt { font: 700 0.90625rem/1 var(--font-sans); color: var(--primary-900); font-variant-numeric: tabular-nums; text-align: right; }
.tbl-row .amt.pend { color: var(--warning-700); }
.tbl-row .method-cell { display: inline-flex; align-items: center; gap: 0.4375rem; font: 600 0.78125rem/1 var(--font-sans); color: var(--neutral-700); }
.method-dot { width: 1.375rem; height: 1.375rem; border-radius: 0.375rem; display: grid; place-items: center; flex-shrink: 0; }
.tbl-foot { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1.25rem; background: var(--neutral-50); border-top: 1px solid var(--neutral-100); }
.tbl-foot .lbl { font: 500 0.8125rem/1 var(--font-sans); color: var(--neutral-600); }
.tbl-foot .total { font: 800 1.0625rem/1 var(--font-sans); color: var(--primary-900); font-variant-numeric: tabular-nums; }
.tbl-empty { padding: 3.5rem 1.25rem; text-align: center; }
.tbl-empty .e-ic { width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: var(--secondary-50); color: var(--secondary-500); display: grid; place-items: center; margin: 0 auto 0.875rem; }
.tbl-empty p { font: 500 0.875rem/1.5 var(--font-sans); color: var(--neutral-600); margin: 0; }
/* search + seg */
.search-mini { display: flex; align-items: center; gap: 0.5rem; background: var(--neutral-100); border-radius: 0.625rem; padding: 0.5rem 0.75rem; min-width: 17rem; }
.search-mini input { border: none; background: transparent; outline: none; font: 400 0.84375rem/1 var(--font-sans); color: var(--primary-900); width: 100%; }
.search-mini input::placeholder { color: var(--neutral-500); }
.search-mini .si { color: var(--neutral-500); flex-shrink: 0; }
.seg { display: inline-flex; background: var(--neutral-100); border-radius: 0.625rem; padding: 3px; gap: 2px; }
.seg button, .seg .btn { border: none; background: transparent; cursor: pointer; font: 600 0.78125rem/1 var(--font-sans); color: var(--neutral-600); padding: 0.4375rem 0.75rem; border-radius: 0.4375rem; transition: all var(--dur-fast); text-decoration: none; }
.seg button.on, .seg .btn.on { background: var(--primary-700); color: #fff; box-shadow: var(--shadow-xs); }
.icon-btn { width: 1.875rem; height: 1.875rem; border-radius: 0.5rem; display: grid; place-items: center; color: var(--neutral-500); cursor: pointer; background: transparent; border: none; transition: background var(--dur-fast); }
.icon-btn:hover { background: var(--neutral-100); color: var(--primary-700); }
/* payment modal extras */
.amount-wrap { position: relative; }
.amount-wrap .pre { position: absolute; left: 0.8125rem; top: 50%; transform: translateY(-50%); font: 700 0.90625rem/1 var(--font-sans); color: var(--neutral-500); pointer-events: none; }
.amount-wrap .input { padding-left: 2.625rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.method-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5625rem; }
.method-opt {
border: 1px solid var(--neutral-300); border-radius: 0.6875rem; padding: 0.6875rem 0.5rem;
display: flex; flex-direction: column; align-items: center; gap: 0.4375rem; cursor: pointer;
font: 600 0.75rem/1 var(--font-sans); color: var(--neutral-700); background: #fff;
transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.method-opt:hover { border-color: var(--secondary-300); }
.method-opt.on { border-color: var(--secondary-500); background: var(--secondary-50); color: var(--primary-900); box-shadow: 0 0 0 1px var(--secondary-500); }
.method-opt .m-ic { width: 1.75rem; height: 1.75rem; border-radius: 0.4375rem; display: grid; place-items: center; }
.status-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5625rem; }
.status-opt {
border: 1px solid var(--neutral-300); border-radius: 0.6875rem; padding: 0.75rem; cursor: pointer;
display: flex; align-items: center; gap: 0.5625rem; font: 600 0.84375rem/1 var(--font-sans); color: var(--neutral-700);
background: #fff; transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.status-opt .s-dot { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; }
.status-opt.on.paid { border-color: var(--success-500); background: var(--success-50); color: var(--success-700); box-shadow: 0 0 0 1px var(--success-500); }
.status-opt.on.pending { border-color: var(--warning-500); background: var(--warning-50); color: var(--warning-700); box-shadow: 0 0 0 1px var(--warning-500); }
.status-opt .s-dot.paid { background: var(--success-500); }
.status-opt .s-dot.pending { background: var(--warning-500); }
.badge.paid { background: var(--success-50); color: var(--success-700); }
.badge.paid .dot { background: var(--success-500); }
/* ── WhatsApp Inbox ──────────────────────────────────────────── */
.page-flush { padding: 0; display: flex; flex-direction: column; height: calc(100vh - 4rem); overflow: hidden; }
.wa-inbox { display: grid; grid-template-columns: 20rem 1fr; height: 100%; overflow: hidden; }
.wa-sidebar { border-right: 1px solid var(--neutral-200); display: flex; flex-direction: column; overflow: hidden; background: #fff; }
.wa-sidebar-head { padding: 1.125rem 1.25rem 0.875rem; border-bottom: 1px solid var(--neutral-100); }
.wa-sidebar-head h2 { font: 700 1rem/1 var(--font-sans); color: var(--primary-900); margin: 0; }
.wa-chat-list { flex: 1; overflow-y: auto; }
.wa-chat-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1.25rem; text-decoration: none; color: inherit; border-bottom: 1px solid var(--neutral-100); transition: background var(--dur-fast); cursor: pointer; }
.wa-chat-item:hover { background: var(--neutral-50); }
.wa-chat-item.active { background: var(--secondary-50); }
.wa-chat-item.unread .wa-chat-name { font-weight: 700; }
.wa-chat-info { flex: 1; min-width: 0; }
.wa-chat-name { font: 600 0.875rem/1.2 var(--font-sans); color: var(--primary-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-chat-preview { font: 400 0.75rem/1.4 var(--font-sans); color: var(--neutral-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.1875rem; }
.wa-chat-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; flex-shrink: 0; }
.wa-chat-time { font: 400 0.6875rem/1 var(--font-sans); color: var(--neutral-400); }
.wa-thread-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-body); }
turbo-frame#wa-thread { display: flex; flex-direction: column; height: 100%; }
.wa-thread { display: flex; flex-direction: column; height: 100%; }
.wa-thread-head { padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--neutral-200); display: flex; align-items: center; gap: 0.75rem; background: #fff; }
.wa-thread-title { font: 600 0.9375rem/1 var(--font-sans); color: var(--primary-900); }
.wa-messages { flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.wa-msg { display: flex; flex-direction: column; max-width: 72%; }
.wa-msg.outbound { align-self: flex-end; align-items: flex-end; }
.wa-msg.inbound { align-self: flex-start; align-items: flex-start; }
.wa-bubble { padding: 0.5625rem 0.875rem; border-radius: 1rem; font: 400 0.875rem/1.5 var(--font-sans); word-break: break-word; }
.wa-msg.outbound .wa-bubble { background: var(--secondary-500); color: #fff; border-bottom-right-radius: 0.25rem; }
.wa-msg.inbound .wa-bubble { background: #fff; color: var(--primary-900); border: 1px solid var(--neutral-200); border-bottom-left-radius: 0.25rem; }
.wa-msg-time { font: 400 0.6875rem/1 var(--font-sans); color: var(--neutral-400); margin-top: 0.1875rem; padding: 0 0.25rem; }
.wa-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--neutral-400); font: 400 0.875rem/1.5 var(--font-sans); text-align: center; gap: 0.25rem; }
.wa-compose { display: flex; align-items: center; gap: 0.625rem; padding: 0.875rem 1.25rem; border-top: 1px solid var(--neutral-200); background: #fff; flex-shrink: 0; }
.wa-compose-input { flex: 1; border: 1px solid var(--neutral-200); border-radius: 1.5rem; padding: 0.5625rem 1rem; font: 400 0.875rem/1.4 var(--font-sans); outline: none; resize: none; transition: border-color var(--dur-fast); background: var(--neutral-50); }
.wa-compose-input:focus { border-color: var(--secondary-400); background: #fff; }
.wa-send-btn { width: 2.375rem; height: 2.375rem; border-radius: 50%; background: var(--secondary-500); color: #fff; border: none; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; transition: background var(--dur-fast); }
/* ── Onboarding wizard ──────────────────────────────────────────── */
.ob-wizard { width: 100%; display: flex; flex-direction: column; align-items: center; }
.ob-steps-bar { width: 100%; max-width: 38rem; margin-bottom: 1.25rem; }
.ob-card { max-width: 38rem; }
.ob-head { margin-bottom: 1.75rem; }
.ob-step-label {
font: 600 0.6875rem/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
color: var(--secondary-500); margin-bottom: 0.375rem;
}
.ob-title {
font-family: var(--display-font); font-weight: 700; font-size: 1.375rem;
line-height: 1.2; letter-spacing: -.02em; color: var(--primary-900);
margin: 0 0 0.5rem;
}
.ob-sub { font: 400 0.875rem/1.5 var(--font-sans); color: var(--neutral-600); margin: 0; }
.ob-form { display: flex; flex-direction: column; gap: 1rem; }
.ob-hint { font: 400 0.75rem/1.3 var(--font-sans); color: var(--neutral-500); }
.ob-actions {
display: flex; justify-content: space-between; align-items: center;
margin-top: 1.75rem; gap: 0.75rem;
}
/* WhatsApp step */
.ob-wa { margin: 0 0 0; }
.ob-wa-scan {
display: flex; flex-direction: column; align-items: center; gap: 1rem;
padding: 1.5rem; background: var(--neutral-50);
border: 1px solid var(--neutral-100); border-radius: 0.875rem;
}
[data-state="connected"] .ob-wa-scan { display: none; }
.ob-wa-loading { width: 14rem; height: 14rem; display: grid; place-items: center; }
.ob-wa-hint {
font: 400 0.8125rem/1.5 var(--font-sans); color: var(--neutral-600);
text-align: center; margin: 0;
}
.ob-wa-refresh {
font: 400 0.75rem/1 var(--font-sans); color: var(--neutral-400);
text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem;
}
.ob-wa-refresh:hover { color: var(--neutral-600); }
.ob-wa-done {
display: none; align-items: center; gap: 1rem;
padding: 1.25rem; background: var(--success-50);
border: 1px solid var(--success-100); border-radius: 0.875rem;
}
[data-state="connected"] .ob-wa-done { display: flex; }
.ob-wa-done-t { font: 600 0.9375rem/1.2 var(--font-sans); color: var(--success-700); margin-bottom: 0.25rem; }
.ob-wa-done-s { font: 400 0.8125rem/1.4 var(--font-sans); color: var(--success-600); }
/* Agenda step */
.ob-toggle-row {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: 1rem 1.125rem; background: var(--neutral-50);
border: 1px solid var(--neutral-100); border-radius: 0.75rem;
}
.ob-toggle-t { font: 600 0.875rem/1.2 var(--font-sans); color: var(--primary-900); margin-bottom: 0.25rem; }
.ob-toggle-d { font: 400 0.8125rem/1.4 var(--font-sans); color: var(--neutral-600); }
.wa-send-btn:hover { background: var(--secondary-600); }