:root { --bg:#f7f7fb; --card:#fff; --text:#101828; --muted:#667085; --primary:#0b5fff; --border:#e4e7ec; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:var(--bg); color:var(--text); }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; gap:12px; }
.topbar a { color:var(--text); text-decoration:none; margin-left:14px; font-weight:600; }
.brand { font-weight:800; font-size:18px; }
.topbar-left { display:flex; align-items:center; gap:12px; }
.menu-toggle { display:none; border:none; background:#fff; color:#374151; border:1px solid var(--border); border-radius:10px; width:36px; height:36px; padding:0; font-size:18px; cursor:pointer; box-shadow:0 4px 10px rgba(16,24,40,0.08); }
.topbar-right { display:flex; align-items:center; gap:10px; }
.login-link { background:#f3f4f6; border:1px solid var(--border); padding:6px 12px; border-radius:999px; }
.nav-links { display:flex; align-items:center; margin:0 auto; }
.container { max-width:960px; margin:0 auto; padding:24px; }
.muted { color: var(--muted); }
.card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; margin-bottom:16px; box-shadow:0 4px 16px rgba(16,24,40,0.06); }
.link-card { display:flex; align-items:center; justify-content:space-between; gap:12px; text-decoration:none; color:var(--text); font-weight:700; border:1px solid #eaeef5; background:#f9fafb; }
.link-card:hover { border-color:#c7d2fe; background:#eef2ff; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
label { display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:14px; color:var(--muted); }
.inline-check { flex-direction:row; align-items:center; gap:8px; font-weight:600; color:var(--text); }
.inline-check input { width:auto; }
.inline-check span { font-weight:600; color:var(--text); }
input, select, textarea { padding:10px 12px; border:1px solid var(--border); border-radius:12px; font-size:14px; }
button { background:var(--primary); color:#fff; border:none; padding:10px 14px; border-radius:10px; font-weight:700; cursor:pointer; }
button.secondary { background:#111827; }
.notice { padding:10px 12px; border-radius:12px; background:#fef3c7; color:#92400e; margin-top:10px; }
.footer { text-align:center; padding:16px; color:var(--muted); }
.table { width:100%; border-collapse:collapse; }
.table th, .table td { border-bottom:1px solid var(--border); padding:10px; text-align:left; }
.table-responsive { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:12px; background:#fff; }
.table.sortable th { cursor:pointer; position:relative; padding-right:22px; }
.table.sortable th.sorted::after { content:'▲'; position:absolute; right:8px; font-size:10px; color:#98a2b3; }
.table.sortable th.sorted.desc::after { content:'▼'; }
.badge { display:inline-block; padding:4px 8px; border-radius:999px; background:#e0f2fe; color:#075985; font-size:12px; }

.hero { display:flex; flex-direction:column; gap:10px; }
.hero h1 { font-size:32px; margin:0; }
.lead { font-size:16px; line-height:1.6; color:var(--muted); }
.actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.feature-list { margin:0; padding-left:20px; color:var(--muted); line-height:1.6; }
.feature-list li { margin-bottom:6px; }
.steps { margin:0; padding-left:20px; line-height:1.6; }
.steps li { margin-bottom:6px; }
.text-link { color: var(--primary); font-weight:700; text-decoration:none; }
.faq h4 { margin-bottom:6px; }
.faq p { margin-top:0; color: var(--muted); }

.stat-card { border:1px solid #eef2f7; background:#fbfdff; }
.stat-value { font-size:28px; font-weight:800; margin:8px 0; }
.action-card p { color: var(--muted); line-height:1.5; }

.view-toggle { display:flex; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.view-bar { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.filters { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; flex:1; justify-content:flex-end; }
.filters label { min-width:160px; }
.map-wrap { margin-top:12px; }
.map { width:100%; height:420px; border-radius:16px; border:1px solid var(--border); }
.map-info { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; max-width:260px; }
.map-info-header { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:6px; }
.map-info-title { font-size:14px; font-weight:800; color:var(--text); }
.map-info-sub { font-size:12px; color:var(--muted); }
.map-info-body { font-size:12px; color:#111827; line-height:1.4; margin-bottom:8px; }
.map-info-actions { display:flex; gap:8px; flex-wrap:wrap; }
.btn-primary, .btn-outline { display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:10px; padding:6px 10px; font-size:12px; font-weight:700; text-decoration:none; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-outline { border:1px solid var(--border); color:#111827; background:#fff; }

.cta-bar { display:flex; align-items:center; justify-content:center; gap:16px; padding:12px 16px; background:#111827; color:#fff; position:sticky; bottom:0; flex-wrap:wrap; }
.cta-link { color:#fff; background:#0b5fff; padding:8px 12px; border-radius:10px; text-decoration:none; font-weight:700; display:inline-flex; align-items:center; gap:8px; }
.whatsapp-link { background:#25D366; color:#0b1f13; }
.whatsapp-link::before {
	content: "";
	width: 18px;
	height: 18px;
	display:inline-block;
	background-repeat:no-repeat;
	background-size:contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%230b1f13' d='M16 3C9.4 3 4 8.4 4 15c0 2.4.7 4.7 2.1 6.6L4 29l7.7-2c1.8 1 3.9 1.6 6.3 1.6 6.6 0 12-5.4 12-12S22.6 3 16 3zm0 22.2c-2 0-3.9-.6-5.5-1.6l-.4-.2-4.6 1.2 1.2-4.4-.3-.4c-1-1.5-1.6-3.4-1.6-5.5 0-5 4.1-9.1 9.1-9.1s9.1 4.1 9.1 9.1-4.1 9.1-9.1 9.1zm5-6.5c-.3-.1-1.8-.9-2.1-1s-.5-.1-.7.2-.8 1-1 1.2-.4.2-.7.1c-.3-.1-1.2-.4-2.3-1.4-.8-.7-1.4-1.6-1.6-1.9-.2-.3 0-.5.1-.7.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2.1-.4 0-.6-.1-.1-.7-1.7-1-2.3-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4-.3.3-1.2 1.2-1.2 2.8s1.2 3.2 1.4 3.4c.2.2 2.4 3.7 5.9 5.1.8.3 1.5.5 2 .6.8.2 1.6.2 2.2.1.7-.1 1.8-.7 2.1-1.4.3-.7.3-1.3.2-1.4-.1-.1-.3-.2-.6-.3z'/%3E%3C/svg%3E");
}

.profile { position: relative; display: inline-flex; }
.profile-btn { display:flex; align-items:center; gap:8px; background:#f3f4f6; color:#111827; border:1px solid var(--border); padding:6px 10px; border-radius:999px; font-weight:700; cursor:pointer; }
.profile-btn .avatar { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:#0b5fff; color:#fff; font-size:12px; }
.profile-menu { display:none; position:absolute; right:0; top:40px; min-width:200px; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 8px 20px rgba(16,24,40,0.1); padding:8px; z-index:20; }
.profile-menu a { display:block; padding:8px 10px; color:#111827; text-decoration:none; font-weight:600; }
.profile-menu a:hover { background:#f9fafb; border-radius:8px; }
.profile:hover .profile-menu { display:block; }

.notifications { position: relative; margin-right:8px; }
.notif-btn { position:relative; border:none; background:#f3f4f6; border:1px solid var(--border); padding:6px 10px; border-radius:999px; cursor:pointer; font-size:16px; }
.notif-badge { position:absolute; top:-4px; right:-4px; background:#ef4444; color:#fff; font-size:10px; padding:2px 6px; border-radius:999px; }
.notif-menu { display:none; position:absolute; right:0; top:40px; min-width:240px; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 8px 20px rgba(16,24,40,0.1); padding:8px; z-index:20; }
.notifications:hover .notif-menu { display:block; }
.notifications.open .notif-menu { display:block; }
.notifications:focus-within .notif-menu { display:block; }
.notif-title { font-weight:700; padding:6px 8px; }
.notif-item { padding:6px 8px; font-size:13px; color:#111827; border-top:1px solid #f2f4f7; }
.notif-link { display:block; margin-top:6px; padding:6px 8px; color:#0b5fff; text-decoration:none; font-weight:700; }

@media (max-width: 720px) {
	.topbar { display:grid; grid-template-columns:40px 1fr 40px; align-items:center; }
	.topbar-left { grid-column:1 / 3; justify-content:flex-start; }
	.menu-toggle { display:inline-flex; justify-content:center; }
	.brand { text-align:center; margin:0 auto; }
	.topbar-right { justify-content:flex-end; }
	.topbar a { margin-left:0; }
	.nav-links { display:none; flex-direction:column; align-items:flex-start; gap:10px; padding:12px 0; width:100%; grid-column:1 / -1; }
	.menu-open .nav-links { display:flex; }
	.profile-btn .profile-name { display:none; }
	.cta-bar { flex-wrap:nowrap; gap:8px; font-size:12px; padding:10px 12px; }
	.cta-bar > div { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60vw; }
	.cta-link { padding:6px 10px; font-size:12px; }
	.hero h1 { font-size:26px; }
	.actions { width:100%; }
	button { width:100%; }
	.view-bar { flex-direction:column; align-items:stretch; }
	.filters { justify-content:flex-start; width:100%; }
	.filters label { min-width:0; width:100%; }
}