.panel, .kpi-card, .profile-head { border: 1px solid var(--line); border-radius: 6px; background: var(--white); box-shadow: var(--shadow); }
.panel { display: flex; flex-direction: column; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 19px 23px 14px; border-bottom: 1px solid var(--line); }
.panel-head > span { color: var(--muted); font-size: 13px; }
.panel-body { flex: 1; padding: 20px 23px 24px; }
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; margin-bottom: 28px; }
.kpi-card { padding: 20px 22px; border-left: 3px solid var(--gold); }
.kpi-value { display: block; margin-top: 7px; color: var(--navy); font: 700 38px/1 "Cormorant Garamond", Georgia, serif; }
.kpi-value.money { font-size: 34px; }
.delta { display: block; margin-top: 8px; color: var(--ink-soft); font-size: 13px; }
.delta.ok { color: var(--ok); }.delta.aviso { color: var(--warn); }.delta.erro { color: var(--danger); }
.panel-row { display: grid; gap: 20px; margin-bottom: 24px; }.dashboard-grid { grid-template-columns: 1.55fr 1fr; }
.chart-bars { display: flex; align-items: flex-end; gap: 10px; height: 230px; padding-top: 28px; }
.bar-col { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 7px; }
.bar { width: min(100%, 30px); min-height: 5px; border-radius: 3px 3px 1px 1px; background: linear-gradient(var(--gold-soft), var(--gold-dark)); }
.bar-col.now .bar { background: linear-gradient(var(--navy-3), var(--navy)); }.bar-value { color: var(--navy); font-size: 12px; font-weight: 700; }.bar-label { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.compact-list { display: flex; flex-direction: column; padding-top: 7px; padding-bottom: 10px; }
.person-row, .touchpoint-row, .payment-row { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.person-row:last-child, .touchpoint-row:last-child, .payment-row:last-child { border-bottom: 0; }
.person-row > span:nth-child(2), .touchpoint-row > span:nth-child(2), .payment-row > span { min-width: 0; flex: 1; }
.person-row strong, .person-row small, .touchpoint-row strong, .touchpoint-row small, .payment-row strong, .payment-row small { display: block; }
.person-row strong, .touchpoint-row strong { overflow: hidden; color: var(--navy); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.person-row small, .touchpoint-row small, .payment-row small { color: var(--muted); font-size: 12px; }
.person-row time, .touchpoint-row time, .payment-row time { color: var(--ink-soft); font-size: 12px; white-space: nowrap; }
.section-heading, .page-actions { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 30px 0 15px; }
.section-heading h2, .page-actions h2 { margin-top: 3px; }.page-actions { margin-top: 0; }
.text-link { color: var(--gold-dark); font-size: 13px; font-weight: 700; }.text-link:hover { text-decoration: underline; }
.month-chip { display: inline-flex; padding: 4px 9px; border-radius: 20px; background: var(--ok-bg); color: var(--ok); font-size: 11px; font-weight: 700; text-transform: uppercase; white-space: nowrap; }.month-chip.late { background: var(--danger-bg); color: var(--danger); }
.empty-state { display: grid; place-items: center; min-height: 110px; padding: 20px; color: var(--muted); text-align: center; }.empty-state strong { color: var(--navy); }.empty-state span { margin-top: 3px; font-size: 13px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--white); box-shadow: var(--shadow); }
.data-table { min-width: 900px; font-size: 14px; }.data-table th { padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--cream); color: var(--muted); font-size: 11px; letter-spacing: .08em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.data-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }.data-table tbody tr:last-child td { border-bottom: 0; }.data-table tbody tr:hover { background: #fbf9f4; }
.data-table.data-table--compact { min-width: 0; }
.client-name { display: flex; align-items: center; gap: 9px; color: var(--navy); font-weight: 600; }.client-name small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
.badge, .pill-tag, .level-badge { display: inline-flex; align-items: center; border-radius: 20px; white-space: nowrap; }
.badge { padding: 4px 9px; background: var(--cream-2); color: var(--ink-soft); font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.badge.ok, .status-ativa, .status-renovada, .status-feito { background: var(--ok-bg); color: var(--ok); }.status-vencendo { background: var(--warn-bg); color: var(--warn); }.status-vencida, .status-cancelada, .status-pulado { background: var(--danger-bg); color: var(--danger); }.status-pendente { background: var(--cream-2); color: var(--ink-soft); }
.pill-tag { padding: 4px 9px; border: 1px solid var(--line); background: var(--white); color: var(--ink-soft); font-size: 12px; font-weight: 600; }.tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.level-badge { gap: 6px; padding: 5px 12px 5px 9px; border: 1px solid var(--gold); color: var(--gold-dark); background: linear-gradient(90deg, rgba(201, 169, 110, .11), transparent); font: 700 13px "Cormorant Garamond", Georgia, serif; }
.level-badge i { width: 8px; height: 8px; transform: rotate(45deg); background: var(--gold); }.level-badge.tier-2 { border-color: #aeb8c5; color: #596574; }.level-badge.tier-2 i { background: #94a1af; }.level-badge.tier-3 { border-color: #b4935e; color: #78592d; }.level-badge.tier-3 i { background: #b4935e; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }.filter-bar input { min-width: 220px; flex: 1; }.filter-bar select { min-width: 145px; }
input, select, textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 4px; outline: 0; background: var(--white); color: var(--ink); }
.filter-bar input, .filter-bar select { width: auto; }.form-stack { display: flex; flex-direction: column; gap: 14px; }.form-stack label, .form-grid label, .inline-form label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.form-grid.two { gap: 10px; }.span-2 { grid-column: span 2; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 169, 110, .15); }.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 23px; border-top: 1px solid var(--line); }.form-panel { max-width: 850px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 17px; border: 1px solid transparent; border-radius: 4px; font-size: 13px; font-weight: 700; transition: .15s ease; }.btn:hover { transform: translateY(-1px); }.btn-primary { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: var(--navy); }.btn-navy { background: var(--navy); color: var(--cream); }.btn-outline { border-color: var(--line); background: transparent; color: var(--ink-soft); }.btn-outline:hover { border-color: var(--gold); color: var(--gold-dark); }.btn-sm { padding: 7px 11px; font-size: 12px; }.btn-wide { width: 100%; }
.flash { margin-bottom: 18px; padding: 11px 14px; border-left: 3px solid var(--ok); border-radius: 4px; background: var(--ok-bg); color: var(--ok); font-size: 14px; }.flash.erro { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }.flash.aviso { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
.profile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 27px 29px; margin-bottom: 21px; }.profile-id { display: flex; gap: 19px; }.profile-id h2 { margin-top: 3px; font-size: 28px; }.profile-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 7px; color: var(--ink-soft); font-size: 13px; }.profile-badges { margin-top: 11px; }.profile-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }.profile-actions small { color: var(--muted); }
.detail-grid { display: grid; grid-template-columns: minmax(340px, .9fr) minmax(480px, 1.25fr); gap: 20px; align-items: start; }.detail-stack { display: grid; gap: 20px; }.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin: 0; }.info-grid dt { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.info-grid dd { margin: 3px 0 0; color: var(--navy); font-weight: 500; }.tags-edit { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }.tags-edit form { margin: 0; }
.tag-editable, .tag-add { padding: 6px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }.tag-editable { border: 1px solid var(--line); background: var(--cream); color: var(--ink-soft); }.tag-editable b { color: var(--muted); }.tag-form { display: flex; gap: 5px; }.tag-form input { width: 105px; padding: 5px 9px; }.tag-add { border: 1px dashed var(--gold); background: transparent; color: var(--gold-dark); }
.inline-form { display: flex; align-items: flex-end; gap: 8px; }.inline-form label { flex: 1; }.compact-form { gap: 18px; }.payment-row strong { color: var(--navy); }.timeline { position: relative; padding-left: 28px; }.timeline::before { position: absolute; top: 27px; bottom: 30px; left: 43px; width: 1px; background: var(--line); content: ""; }.timeline-item { position: relative; display: flex; gap: 16px; padding-bottom: 24px; }.timeline-node { z-index: 1; display: flex; flex: 0 0 32px; align-items: center; justify-content: center; width: 32px; height: 32px; border: 2px solid var(--white); border-radius: 50%; outline: 1px solid var(--line); background: var(--cream-2); color: var(--muted); font: 700 13px "Cormorant Garamond", Georgia, serif; }.timeline-item.feito .timeline-node { outline-color: var(--ok); background: var(--ok); color: var(--white); }
.timeline-content { min-width: 0; flex: 1; }.timeline-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.timeline-content h3 { margin-top: 4px; }.timeline-content p { margin-top: 4px; color: var(--ink-soft); font-size: 13px; }.event-form { display: grid; grid-template-columns: 100px 1fr auto; gap: 6px; margin-top: 9px; }.event-form input, .event-form select { padding: 6px 8px; font-size: 12px; }
.quick-action { display: flex; gap: 6px; }.quick-action select { min-width: 95px; padding: 6px; }.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }.level-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.level-number { color: var(--gold-soft); font: 700 22px "Cormorant Garamond", Georgia, serif; }.helper { color: var(--muted); font-size: 13px; }
.login-page { min-height: 100vh; background: var(--navy); }.login-shell { display: grid; grid-template-columns: 1.2fr minmax(360px, .8fr); min-height: 100vh; }.login-story { display: flex; flex-direction: column; justify-content: space-between; padding: 58px 7vw; background: radial-gradient(circle at 80% 20%, rgba(201, 169, 110, .18), transparent 35%), linear-gradient(145deg, var(--navy), #0a1420); color: var(--cream); }.login-story img { width: 195px; }.login-story h1 { max-width: 620px; margin-top: 15px; color: var(--cream); font-size: clamp(42px, 5vw, 72px); }.login-story p { max-width: 550px; margin-top: 17px; color: rgba(245, 240, 232, .64); font-size: 15px; }.login-story small { color: rgba(245, 240, 232, .42); }.login-card { display: flex; flex-direction: column; justify-content: center; padding: 10vw; background: var(--cream); }.login-card h2 { margin-top: 5px; font-size: 34px; }.login-card > div > p { margin: 6px 0 24px; color: var(--muted); }.login-help { margin-top: 18px; color: var(--muted); font-size: 12px; text-align: center; }
@media (max-width: 1500px) { .settings-grid { grid-template-columns: 1fr; }.settings-grid > aside { max-width: 460px; } }
@media (max-width: 1180px) { .kpi-row { grid-template-columns: repeat(2, 1fr); }.detail-grid { grid-template-columns: 1fr; }.level-cards { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .dashboard-grid, .settings-grid { grid-template-columns: 1fr; }.login-shell { grid-template-columns: 1fr; }.login-story { display: none; }.login-card { min-height: 100vh; padding: 10vw 20vw; } }
@media (max-width: 650px) { .kpi-row { grid-template-columns: 1fr; }.profile-head, .profile-id, .page-actions { flex-direction: column; }.profile-actions { align-items: stretch; width: 100%; }.form-grid { grid-template-columns: 1fr; }.span-2 { grid-column: span 1; }.event-form, .inline-form { display: grid; grid-template-columns: 1fr; }.chart-bars { gap: 5px; }.login-card { padding: 24px; } }