@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&display=swap');
:root { --primary:#D4AF37; --primary-medium:#C9A961; --hover:#D4AF37; --text:#FFFFFF; --muted:#D0C5C1; --bg:#0E0E0F; --card-bg:#181818; --border:#222222; --header-bg:#101010; --header-text:#FFFFFF; --accent: var(--primary); }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background: var(--bg); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.site-header { border-bottom: 1px solid var(--border); background: var(--header-bg); position: sticky; top: 0; z-index: 10; color: var(--header-text); }
.site-header .brand { font-weight: 700; color: var(--primary); display:flex; align-items:center; gap:10px; font-family: 'Playfair Display', serif; letter-spacing:0.3px; }
.site-header .brand img { width:28px; height:28px; border-radius:6px; object-fit:cover; animation: brandFloat 10s ease-in-out infinite; }
.dashboard-compact .site-header .brand img { width:24px; height:24px; }
.patient-search { position: relative; }
.patient-search input { width: 240px; max-width: 40vw; background:#1a1a1a; color:var(--text); border:1px solid var(--border); border-radius:12px; padding:10px 12px; }
.search-dropdown { position: absolute; top: 40px; left: 0; right: 0; display:none; background: #121212; border:1px solid var(--border); border-radius:12px; box-shadow: 0 10px 24px rgba(0,0,0,0.35); z-index: 12; overflow: hidden; }
.search-dropdown.open { display:block; }
.search-item { display:block; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.06); color:var(--text); text-decoration:none; }
.search-item:hover { background: rgba(212,175,55,0.08); }
.search-item:last-child { border-bottom: none; }
.search-empty { padding:10px 12px; color: var(--muted); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav a { margin-left: 16px; text-decoration: none; color: var(--header-text); padding: 8px 10px; border-radius: 8px; position: relative; }
.nav a.active, .nav a:hover { background: rgba(212,175,55,0.12); color: var(--header-text); }
.hero { padding: 64px 0; background: linear-gradient(180deg, var(--bg), #121212); }
.hero h1 { font-size: 32px; margin: 0 0 8px; }
.hero p { color: var(--muted); margin: 0 0 16px; }
.btn { display: inline-block; background-image: linear-gradient(90deg, var(--primary-medium), var(--primary)); color: #111; padding: 12px 16px; border-radius: 12px; text-decoration: none; border: 1px solid var(--border); cursor: pointer; font-weight:600; box-shadow: 0 8px 22px rgba(0,0,0,0.35); transition: transform .15s ease, filter .15s ease; position:relative; overflow:hidden; }
.btn:hover { filter: brightness(1.03); transform: translateY(-1px); }
.btn:hover { filter: brightness(1.03); transform: translateY(-1px); }
.features { padding: 40px 0; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid.two-cols { grid-template-columns: repeat(2, 1fr); align-items: start; }
.card { border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 16px; background: radial-gradient(1200px 400px at 30% 0%, rgba(217,164,143,0.08) 0%, rgba(0,0,0,0) 35%), linear-gradient(180deg, #1a1a1a, #0a0a0a); box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.page-header { padding: 32px 0; background: var(--header-bg); border-bottom: 1px solid var(--border); }
.page-header h1 { font-family: 'Cinzel', serif; text-transform: uppercase; letter-spacing: 0.5px; }
.page-toolbar { display:flex; justify-content:space-between; align-items:center; }
.page-title { font-family: 'Cinzel', serif; text-transform: uppercase; letter-spacing: 0.6px; }
.form { max-width: 760px; margin: 24px auto; }
.form-row { display: flex; flex-direction: column; margin-bottom: 16px; }
.form label { margin-bottom: 6px; font-weight: 600; }
.form input, .form select, .form textarea { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; background:#1a1a1a; color:var(--text); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(217,164,143,0.2); }
.currency-input { position: relative; }
.currency-input .currency-prefix { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; }
.currency-input input { padding-left: 36px; }
.alert { padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; }
.alert-error { background: #2b1e1e; color: #ffb4b4; border:1px solid #442626; }
.site-footer { border-top: 1px solid var(--border); padding: 24px 0; margin-top: 40px; }
h1 { font-size: 44px; font-weight: 700; letter-spacing: 0.2px; line-height: 1.15; color: var(--primary); font-family: 'Playfair Display', serif; }
.muted { color: var(--muted); }
.money { color: var(--primary); font-weight: 700; }
.text-positive { color:#22c55e; }
.text-negative { color:#ef4444; }
.list { display:flex; flex-direction:column; gap:10px; }
.list-item { display:flex; justify-content:space-between; align-items:center; padding:16px; border:1px solid rgba(255,255,255,0.06); border-radius:16px; background:#121212; text-decoration:none; color:var(--text); box-shadow: inset 0 -1px 0 rgba(255,255,255,0.04); transition: transform .25s ease, opacity .25s ease, border-color .2s ease; opacity:.0; transform: translateY(6px); }
.list-item:hover { border-color: var(--hover); }
.list-item .label { font-weight:600; }
.list-item .meta { color: var(--muted); }
.list-item.in-view { opacity:1; transform: translateY(0); }
.list-item::after { content:'›'; color: var(--muted); margin-left:12px; }
.card h3 { margin-top:0; margin-bottom:12px; font-family: 'Playfair Display', serif; letter-spacing: .2px; }
.nav a::after { content:''; position:absolute; left:12px; right:12px; bottom:6px; height:2px; background-image: linear-gradient(90deg, #c9a961, #d4af37); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.nav a:hover::after { transform: scaleX(1); }
.gold-gradient { background-image: linear-gradient(135deg, #c9a961, #d4af37); }
.gold-glow { box-shadow: 0 0 0 1px rgba(212,175,55,0.32), 0 8px 32px rgba(201,169,97,0.26); }
.card-hover { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,.35); border-color: var(--hover); }
.fade-in { animation: fadeInUp .5s ease both; }
@keyframes fadeInUp { from { opacity:0; transform: translateY(6px);} to { opacity:1; transform: translateY(0);} }
.bg-decor { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .06; }
.bg-decor::after { content:''; position: fixed; inset:0; pointer-events:none; background-image: radial-gradient(circle at 20px 20px, rgba(212,175,55,0.12) 0, rgba(212,175,55,0) 26px); background-size: 140px 140px; opacity:.04; }
.bg-decor .blob { position: absolute; width: 360px; height: 360px; border-radius: 50%; filter: blur(60px); }
.bg-decor .blob.top-right { top: -60px; right: -60px; background: #c9a961; }
.bg-decor .blob.bottom-left { bottom: -60px; left: -60px; background: #d4af37; }
.card a { color: var(--text); text-decoration: none; }
.card a:hover { color: var(--primary); }
.card a:visited { color: var(--text); }
.btn-lg { padding: 16px 22px; border-radius: 14px; font-weight: 600; font-size: 15px; }
.btn .ripple { position:absolute; width:6px; height:6px; border-radius:50%; background: rgba(212,175,55,0.5); transform: translate(-50%,-50%); animation: ripple .6s ease-out forwards; }
@keyframes ripple { from { opacity:.6; transform: translate(-50%,-50%) scale(1);} to { opacity:0; transform: translate(-50%,-50%) scale(24);} }
.gradient-text { background-image: linear-gradient(90deg, #c9a961, #d4af37, #e7bbaa); -webkit-background-clip: text; background-clip: text; color: transparent; text-transform: uppercase; }
.site-header .brand .gradient-text { background-image: linear-gradient(100deg, #c9a961, #d4af37 45%, #e7bbaa 78%, #f0cdbd 100%); background-size: 200% 100%; animation: gradShift 12s linear infinite; }
.user-name { font-size: 32px; font-weight: 800; line-height: 1.1; }
.logo-large { width: 100%; max-width: 260px; max-height: 160px; height: auto; display: block; margin-bottom: 8px; object-fit: contain; filter: drop-shadow(0 6px 20px rgba(0,0,0,0.35)); animation: logoFloat 6s ease-in-out infinite, logoPulse 7s ease-in-out infinite; }
.pill { display:inline-block; padding:4px 10px; border-radius:999px; font-size:11px; border:1px solid rgba(217,164,143,0.24); color:#c9a961; background: rgba(217,164,143,0.08); }
.pill.confirmed { color:#22c55e; border-color: rgba(34,197,94,0.24); background: rgba(34,197,94,0.10); }
.pill.pending { color:#3b82f6; border-color: rgba(59,130,246,0.24); background: rgba(59,130,246,0.10); }
.stat-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.stat-icon { width:44px; height:44px; border-radius:12px; background: linear-gradient(135deg, rgba(201,169,97,0.18), rgba(212,175,55,0.18)); display:flex; align-items:center; justify-content:center; }
.stat-icon svg { width:22px; height:22px; }
.card-label { color: var(--muted); font-size:12px; margin-bottom:6px; }
.card-value { font-size:44px; font-weight:700; color: var(--text); margin-bottom:6px; }
.card-trend { color:#8a8a8a; font-size:12px; }
.list-item .right { display:flex; align-items:center; gap:10px; }
.status-badge { display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px; border:1px solid #2a2a2a; }
.status-confirmed { color:#22c55e; border-color: rgba(34,197,94,0.24); background: rgba(34,197,94,0.10); }
.status-pending { color:#3b82f6; border-color: rgba(59,130,246,0.24); background: rgba(59,130,246,0.10); }
.count-pill { float:right; margin-left:8px; }
.quick-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; }
.quick-card { display:flex; align-items:center; gap:16px; padding:24px; min-height:120px; background-image: linear-gradient(180deg, #c9a961, #d4af37); border-radius:22px; color:#111; text-decoration:none; box-shadow: 0 10px 32px rgba(0,0,0,0.35); transition: transform .2s ease, filter .2s ease; }
.quick-card:hover { filter: brightness(1.02); transform: translateY(-2px); }
.qc-icon { width:42px; height:42px; border-radius:50%; background: rgba(0,0,0,0.14); display:flex; align-items:center; justify-content:center; }
.qc-icon svg { width:18px; height:18px; }
.meta svg { width:14px; height:14px; vertical-align:-2px; margin-right:4px; opacity:.85; }
.qc-label { font-weight:600; }
.metrics-row { align-items: start; }
.promo-card { display:flex; align-items:center; gap:14px; padding:20px; background: linear-gradient(180deg, #1a1a1a, #121212); border:1px solid var(--border); border-radius:16px; color:var(--text); }
.promo-icon { width:40px; height:40px; border-radius:50%; background-image: linear-gradient(135deg, #c9a961, #d4af37); display:flex; align-items:center; justify-content:center; color:#111; font-weight:700; }
.promo-sub { color: var(--muted); font-size:13px; }
.shimmer { position:relative; overflow:hidden; }
.shimmer::before { content:''; position:absolute; inset:0; transform: translateX(-100%); background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.06), rgba(255,255,255,0)); animation: shimmerMove 2.8s infinite; }
@keyframes shimmerMove { 0% { transform: translateX(-100%);} 60% { transform: translateX(100%);} 100% { transform: translateX(100%);} }
@media (max-width: 768px) { .grid { grid-template-columns: 1fr; } .site-header .nav a { margin-left: 8px; } }
@media (max-width: 1024px) { .grid { grid-template-columns: repeat(2, 1fr); } .quick-grid { grid-template-columns: 1fr 1fr; } .login-card { max-width: 720px; padding: 32px; } .container { padding: 0 14px; } }
@media (max-width: 768px) { .container { padding: 0 12px; } .site-header .container { height: 56px; } .site-header .nav { display:flex; flex-wrap:wrap; gap:4px; } .nav a { margin-left: 8px; padding: 8px 10px; font-size:14px; } .hero { padding: 48px 0; } .hero h1 { font-size: 28px; } .grid { grid-template-columns: 1fr; } .grid.two-cols { grid-template-columns: 1fr; } .quick-grid { grid-template-columns: 1fr; } .card { padding: 14px; border-radius: 16px; } .login-card { max-width: 94vw; padding: 24px; border-radius: 18px; } .nurse-anim { width: 160px; } .btn-lg { width: 100%; } .bg-decor .blob { width: 280px; height: 280px; filter: blur(52px); } .page-toolbar { flex-wrap:wrap; gap:8px; } #pdfFrame { height: 70vh; } }
@media (max-width: 480px) { .site-header .container { height: 52px; } .site-header .nav { gap:2px; } .nav a { margin-left: 6px; padding: 6px 8px; font-size:13px; } .hero h1 { font-size: 24px; } .login-card { padding: 18px; border-radius: 16px; } .form { margin: 16px auto; } .form input, .form select, .form textarea { font-size: 15px; padding: 10px 12px; } .nurse-anim { width: 140px; } #pdfFrame { height: 60vh; } }
/* login */
.login-page { min-height: 100vh; display:flex; align-items:center; justify-content:center; padding:24px; position:relative; z-index:1; }
.login-card { max-width:880px;margin:0 auto;padding:36px;border-radius:20px;background:var(--card-bg);color:var(--text);border:1px solid var(--border); box-shadow: 0 10px 32px rgba(0,0,0,0.35); }
.login-card .brand { display:flex;align-items:center;gap:12px;margin-bottom:16px;color:var(--primary); }
.login-card input { background:#1a1a1a;color:var(--text);border-color:var(--border); font-size:16px; }
.login-card .btn { width:100%;background-image: linear-gradient(90deg, var(--primary-medium), var(--primary));color:#111; }
.login-card .form { max-width:100%; margin:0; }
.nurse-anim { width:200px; margin:0 auto 12px; }
.nurse-anim svg { display:block; width:100%; height:auto; }
.ekg { stroke: var(--primary); stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:160; animation: ekgMove 2.8s linear infinite; }
.stroke-primary { stroke: var(--primary); }
.fill-primary { fill: var(--primary); }
.pulse { transform-origin:center; animation: pulseGlow 1.9s ease-in-out infinite; }
.logo-large { width:100%; max-width:260px; max-height:160px; height:auto; display:block; margin-bottom:8px; object-fit:contain; filter: drop-shadow(0 6px 20px rgba(0,0,0,0.35)); animation: logoFloat 6s ease-in-out infinite, logoPulse 7s ease-in-out infinite; }
.ai-assistant { position: fixed; right: 24px; bottom: 24px; display:flex; align-items:flex-end; gap:12px; z-index: 20; }
.ai-avatar { width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(120px 120px at 50% 30%, rgba(217,164,143,0.22), rgba(0,0,0,0)); border: 1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.ai-bubble { max-width: 280px; background: linear-gradient(180deg, #1a1a1a, #121212); border: 1px solid var(--border); color: var(--text); padding: 12px 14px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); position: relative; }
.ai-bubble .ai-close { position:absolute; top:8px; right:8px; background: transparent; border: none; color: var(--muted); font-size: 18px; cursor: pointer; }
.ai-bubble .ai-greet { font-weight: 600; margin-bottom: 8px; }
.ai-panel { position: fixed; right: 24px; bottom: 128px; width: 340px; max-width: calc(100vw - 48px); background: linear-gradient(180deg, #1a1a1a, #121212); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.45); display:none; flex-direction: column; overflow: hidden; z-index: 20; }
.ai-panel.open { display:flex; }
.ai-panel-header { padding: 12px 14px; font-weight: 700; border-bottom: 1px solid var(--border); }
.ai-panel-body { padding: 12px; display:flex; flex-direction: column; gap:10px; max-height: 240px; overflow:auto; }
.ai-msg { display:flex; gap:8px; align-items:flex-start; }
.ai-msg .bubble { max-width: 80%; padding:10px 12px; border-radius: 12px; border: 1px solid var(--border); }
.ai-msg.user .bubble { background: #101010; }
.ai-msg.bot .bubble { background: #141414; }
.ai-form { display:flex; gap:8px; padding: 12px; border-top: 1px solid var(--border); }
.ai-form input { flex:1; background:#1a1a1a; color:var(--text); border:1px solid var(--border); border-radius:12px; padding:10px 12px; }
.ai-form button { white-space: nowrap; }
.ai-avatar svg .skin { fill: #f1d2c6; }
.ai-avatar svg .hair { fill: #b35231; }
.ai-avatar svg .eye { fill: #1a1a1a; }
.ai-avatar svg .cheek { fill: rgba(217,164,143,0.35); }
.ai-avatar .blink { animation: blink 4s infinite; transform-origin: center; }
@keyframes blink { 0%, 96%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.1); } 99% { transform: scaleY(1); } }
.ai-avatar .hairMove { animation: hairMove 6s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes hairMove { 0% { transform: rotate(0deg); } 50% { transform: rotate(1.4deg); } 100% { transform: rotate(0deg); } }
@keyframes ekgMove { from { stroke-dashoffset:160; } to { stroke-dashoffset:0; } }
@keyframes pulseGlow { 0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(212,175,55,0)); } 50% { transform: scale(1.08); filter: drop-shadow(0 0 12px rgba(212,175,55,0.45)); } 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(212,175,55,0)); } }
@keyframes logoFloat { 0% { transform: translateY(0); } 50% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
@keyframes logoPulse { 0%, 100% { filter: drop-shadow(0 6px 20px rgba(0,0,0,0.35)) brightness(1); } 50% { filter: drop-shadow(0 10px 28px rgba(212,175,55,0.35)) brightness(1.06); } }
@keyframes gradShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; }
}
@keyframes brandFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
.dashboard-simple h1 { color: var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: 28px; font-weight: 600; line-height: 1.2; }
.dashboard-simple .gradient-text { color: var(--text); background: none; -webkit-background-clip: initial; background-clip: initial; }
.dashboard-simple .card { background: #141414; box-shadow: none; border: 1px solid #242424; }
.dashboard-simple .shimmer::before { display: none; }
.dashboard-simple .stat-top, .dashboard-simple .pill, .dashboard-simple .stat-icon, .dashboard-simple .card-trend { display: none; }
.dashboard-simple .card-value { font-size: 32px; }
.dashboard-simple .btn { background: #222; color: var(--text); border: 1px solid #2a2a2a; box-shadow: none; }
.dashboard-simple .btn:hover { filter: none; transform: none; }
.dashboard-simple .quick-card { background: #171717; color: var(--text); box-shadow: none; }
.dashboard-simple .qc-icon { background: #202020; }
.dashboard-simple .logo-large { display: none; }
.dashboard-simple .bg-decor { display: none; }
.dashboard-compact h1 { font-size: 36px; line-height: 1.2; }
.dashboard-compact .user-name { font-size: 26px; }
.dashboard-compact .grid { gap: 12px; }
.dashboard-compact .card { padding: 12px; border-radius: 12px; }
.dashboard-compact .stat-icon { width: 36px; height: 36px; }
.dashboard-compact .card-value { font-size: 36px; }
.dashboard-compact .btn-lg { padding: 12px 16px; border-radius: 12px; font-size: 14px; }
.dashboard-compact .quick-card { padding: 18px; min-height: 96px; border-radius: 18px; }
.dashboard-compact .qc-icon { width: 36px; height: 36px; }
.dashboard-compact .list-item { padding: 12px; }
.dashboard-compact .bg-decor .blob { width: 300px; height: 300px; filter: blur(52px); }
.dashboard-compact main.container { padding: 12px !important; }
.dashboard-compact .site-header .container { height: 50px; }
.dashboard-compact .nav a { margin-left: 10px; padding: 5px 7px; }
.dashboard-compact h1 { font-size: 26px; }
.dashboard-compact .user-name { font-size: 22px; }
.dashboard-compact .muted { font-size: 12px; margin-top: 2px !important; }
.dashboard-compact .card { padding: 10px; border-radius: 10px; }
.dashboard-compact .card h3 { margin-bottom: 6px; }
.dashboard-compact .card-label { margin-bottom: 3px; font-size: 11px; }
.card-patients { padding: 8px; }
.card-patients .stat-icon { width: 30px; height: 30px; }
.card-patients .card-label { font-size: 11px; }
.card-patients .card-value { font-size: 28px; }
.card-patients .card-trend { font-size: 11px; }
.patient-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.patient-grid .card-dados { grid-column: 1 / -1; }
.patient-grid > .card { height: 100%; }
.patient-column { display:flex; flex-direction:column; gap: 14px; }
@media (max-width: 768px) { .patient-grid { grid-template-columns: 1fr; } .patient-column { gap: 10px; } }
.patient-compact main.container { padding: 12px !important; }
.patient-compact .page-title { font-size: 24px; }
.patient-compact .card { padding: 12px; border-radius: 12px; }
.patient-compact .card h3 { margin-bottom: 8px; }
.patient-compact .form { margin: 16px auto; }
.patient-compact .form-row { margin-bottom: 10px; }
.patient-compact .grid.two-cols { gap: 10px; }
.patient-compact .patient-grid { gap: 10px; }
.patient-compact .list-item { padding: 12px; }
.dashboard-compact .card-value { font-size: 28px; }
.dashboard-compact .grid { gap: 8px; }
.dashboard-compact .stat-icon { width: 30px; height: 30px; }
.dashboard-compact .btn-lg { padding: 9px 12px; border-radius: 10px; font-size: 13px; }
.dashboard-compact .quick-card { padding: 14px; min-height: 78px; border-radius: 14px; }
.dashboard-compact .qc-icon { width: 30px; height: 30px; }
.dashboard-compact .list-item { padding: 10px; }
.dashboard-compact .status-badge { padding: 4px 8px; font-size: 11px; }
.dashboard-compact .logo-large { max-width: 160px; max-height: 70px; margin-bottom: 4px; }
.dashboard-compact .promo-card { padding: 14px; margin-top: 10px; }
.dashboard-compact .bg-decor .blob { width: 240px; height: 240px; filter: blur(46px); }