/* ClickAgenda • Modern UI v1 — somente apresentação, sem alterar regras de negócio */
:root {--primary:#29243e;--secondary:#a879e5;--accent:#d878a8;--bg:#f8f7fc;--card:#fff;--text:#302c41;--text-light:#777287;--ca-stroke:#ece9f3;--ca-shadow:0 16px 48px rgba(43,31,72,.065);}
html {scroll-behavior:smooth}
body {font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--text);letter-spacing:-.01em}
h1,h2,h3,h4,.section-title {font-family:Manrope,'DM Sans',sans-serif;letter-spacing:-.045em}
.container {max-width:1450px}
.navbar {background:rgba(255,255,255,.96);color:var(--text);border-bottom:1px solid var(--ca-stroke);box-shadow:0 4px 20px rgba(52,37,87,.035);backdrop-filter:blur(16px);padding:.82rem 0}
.logo {color:#2e2842;font-weight:800;letter-spacing:-.055em}
.logo i {background:#f2e8fc;color:#9061c5;border-radius:13px;width:38px;height:38px;display:inline-grid;place-items:center;font-size:17px}
.nav-links a {color:#575169;font-weight:600}
.nav-links a:hover {color:#8c58ca}
.user-avatar {background:linear-gradient(135deg,#a97adf,#e5a0c1);color:white;border:3px solid #faf7ff;box-shadow:0 4px 14px #a879e53d}
.btn {border-radius:12px;font-weight:700;font-family:inherit;letter-spacing:-.015em;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;line-height:1.35}
.btn-primary {background:#9363d3;color:#fff;box-shadow:0 6px 16px #9363d32f}
.btn-primary:hover {background:#8053be;color:#fff;box-shadow:0 10px 22px #9363d33b;transform:translateY(-2px)}
.btn-secondary {background:#f5f0fa;color:#654992;border:1px solid #e9dff4}
.btn-secondary:hover {background:#eee3fa;color:#56377d}
.hero {background:radial-gradient(ellipse at 80% 5%,#ecd9fd 0,transparent 44%),radial-gradient(ellipse at 8% 85%,#fbe5ef 0,transparent 36%),linear-gradient(150deg,#faf8ff,#f9f6fc);color:#302642;padding:7rem 0 7.5rem}
.hero h1 {color:#2c2440;font-size:clamp(2.5rem,5vw,4.6rem);line-height:1.12;max-width:850px;margin-left:auto;margin-right:auto;letter-spacing:-.065em}
.hero p {color:#6e667d;max-width:680px;margin-left:auto;margin-right:auto}
.features {background:#fff}
.feature-card {border:1px solid var(--ca-stroke);box-shadow:var(--ca-shadow);border-radius:22px}
.feature-icon {background:#f0e6fb;color:#8759c7;border-radius:17px}
.feature-icon i {color:#8759c7}
.feature-list li i {color:#9965cc}
.dashboard {background:var(--bg);padding:2rem 0 5rem;min-height:calc(100vh - 75px)}
.dashboard>.container>.section-title {font-size:.86rem;text-align:left!important;margin:0 0 1.1rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#8c7e9f}
.dashboard-container {grid-template-columns:minmax(210px,242px) minmax(0,1fr);gap:1.5rem;margin-top:0;align-items:start}
.sidebar {background:#fff;border-radius:22px;border:1px solid var(--ca-stroke);box-shadow:var(--ca-shadow);padding:1.15rem;position:sticky;top:96px}
.ca-side-brand {display:flex;gap:12px;align-items:center;padding:10px 9px 21px;border-bottom:1px solid var(--ca-stroke);margin-bottom:18px}
.ca-side-brand strong {display:block;font-size:1rem;color:#332940}
.ca-side-brand small {display:block;font-size:.73rem;color:#9a91a8;margin-top:1px}
.ca-side-symbol {background:linear-gradient(135deg,#9d6bdd,#e8acd0);color:#fff;width:40px;height:40px;display:grid;place-items:center;border-radius:13px;flex:none}
.ca-side-caption {padding:0 13px 8px;letter-spacing:.16em;font-size:.65rem;color:#a9a1b5;font-weight:800}
.sidebar-item {padding:.88rem .9rem;border-radius:12px;margin-bottom:.32rem;color:#706b7e;font-weight:700;font-size:.88rem;gap:12px}
.sidebar-item i {font-size:16px;text-align:center;color:#a19aaf}
.sidebar-item:hover {background:#f6f1fb;color:#835bbb}
.sidebar-item.active {background:#f0e7fb;color:#7546b4;box-shadow:inset 3px 0 #9b6bd5}
.sidebar-item.active i {color:#8651c6}
.main-content {background:transparent;border-radius:0;padding:0;box-shadow:none;min-width:0}
.ca-overview-heading {display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:1.8rem}
.ca-overview-heading h3 {font-size:clamp(1.52rem,2.3vw,2.2rem);font-weight:800;line-height:1.22;margin:.4rem 0 .3rem;color:#30273f}
.ca-overview-heading p {color:#80798c;font-size:.94rem}
.ca-eyebrow,.ca-mini-label {font-size:.65rem;font-weight:800;letter-spacing:.17em;color:#9a78bc}
.ca-eyebrow i {font-size:7px;vertical-align:middle;margin-right:4px;color:#bd8edb}
.ca-heading-dot {color:#ae7edb}
.ca-quick-action {white-space:nowrap}
.stats-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-bottom:1.5rem}
.stat-card {position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:160px;background:#fff!important;border:1px solid var(--ca-stroke);box-shadow:var(--ca-shadow);border-radius:20px;color:#302b40!important;padding:1.4rem;overflow:hidden}
.stat-card:after {content:'';position:absolute;width:110px;height:110px;right:-50px;top:-55px;border-radius:50%;background:rgba(173,124,217,.06)}
.ca-stat-icon {position:absolute;top:18px;right:18px;width:38px;height:38px;background:#f3ebfc;border-radius:12px;color:#9666d0;display:grid;place-items:center}
.stat-card:nth-child(2) .ca-stat-icon {background:#fdeef4;color:#ce7b9f}
.stat-card:nth-child(3) .ca-stat-icon {background:#e7f7f1;color:#36a889}
.stat-card:nth-child(4) .ca-stat-icon {background:#fff3e2;color:#d9a053}
.stat-number {color:#322742!important;font-family:Manrope,system-ui,sans-serif;font-weight:800;font-size:clamp(1.6rem,2.5vw,2.25rem);letter-spacing:-.06em;line-height:1.12}
.stat-label {color:#837b91!important;font-size:.8rem;font-weight:700;opacity:1!important;margin-top:.7rem}
.calendar-section,.appointments-list,#appointments-section,#clients-section,#services-section,#my-link-section,#settings-section {background:#fff;border:1px solid var(--ca-stroke);box-shadow:var(--ca-shadow);border-radius:22px;padding:1.5rem}
.calendar-section {margin-top:0;margin-bottom:1.4rem}
.calendar-header {gap:12px;flex-wrap:wrap;margin-bottom:1.35rem}
.calendar-header h3,.appointments-list h3 {font-size:1.18rem;color:#33283f;margin:.2rem 0}
.appointments-list {margin-top:0}
.ca-appointments-heading {margin-bottom:.8rem}
.calendar-day {border-radius:14px;border:1px solid #eeeaf4;background:#fcfbfe;transition:transform .15s ease,border-color .15s ease}
.calendar-day:hover {transform:translateY(-2px);border-color:#d7b9ee}
.calendar-day.today,.calendar-day.selected {background:#f2e8fc;border-color:#ad7fdc;color:#754cb2}
.settings-card,.service-form-wrapper,.client-card,.service-card,.appointment-card {border-radius:18px!important;border-color:var(--ca-stroke)!important;box-shadow:0 6px 25px rgba(50,32,81,.035)}
.settings-card {background:white}
#settings-section>.section-title {font-size:1.45rem!important;text-align:left}
input,select,textarea {font-family:inherit}
.form-group input,.form-group select,.form-group textarea,.filters-bar input,.filters-bar select,.search-bar input,.ca-auto-card input,.ca-auto-card select {border:1px solid #e5dfec;border-radius:11px;background:#fff;color:#383047;outline-offset:2px}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus,.filters-bar input:focus,.filters-bar select:focus {border-color:#a67cda;box-shadow:0 0 0 4px #a778dc1e}
.modal-content {border-radius:22px;box-shadow:0 24px 75px #21152b33}
.modal-header {border-radius:22px 22px 0 0}
#lista-agendamentos-completa,#lista-clientes {min-width:0}
#settings-section .settings-card {max-width:100%}
@media(max-width:1100px){.stats-grid {grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-container {grid-template-columns:210px minmax(0,1fr);gap:1rem}.dashboard>.container {padding:0 1.3rem}}
@media(max-width:768px){.dashboard {padding:1.2rem 0 3rem}.dashboard>.container {padding:0 1rem}.dashboard-container {display:flex;flex-direction:column;gap:1rem}.sidebar {position:relative;top:auto;display:flex;flex-wrap:nowrap;overflow-x:auto;width:100%;padding:.55rem;gap:.25rem;border-radius:15px;scrollbar-width:thin}.ca-side-brand,.ca-side-caption {display:none}.sidebar-item {flex:none;white-space:nowrap;margin:0;padding:.75rem .85rem;font-size:.8rem}.sidebar-item i {width:auto}.main-content {width:100%}.stats-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.stat-card {min-height:135px;padding:1rem;border-radius:16px}.ca-stat-icon {top:11px;right:12px;width:30px;height:30px;font-size:13px}.stat-number {font-size:1.65rem}.stat-label {font-size:.73rem}.ca-overview-heading {align-items:flex-start;flex-direction:column;margin-bottom:1.25rem}.ca-overview-heading p {font-size:.85rem}.ca-quick-action {width:100%;text-align:center}.calendar-section,.appointments-list,#appointments-section,#clients-section,#services-section,#my-link-section,#settings-section {padding:1.05rem;border-radius:17px}.calendar-header {align-items:flex-start}.calendar-header>.btn {width:100%;text-align:center}.hero {padding:4.5rem 0}.hero h1 {font-size:2.5rem}.navbar {padding:.7rem 0}.container {padding:0 1rem}.modal-content {width:min(100%,520px)!important}}
@media(max-width:410px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stat-number{font-size:1.35rem}.stat-label{font-size:.69rem}.sidebar-item span{font-size:.77rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ClickAgenda V2 — correções de contraste, avatar e automações */
.navbar .notification-bell-icon {color:#504065!important;background:#f4eefb!important;border:1px solid #e8dcf5;border-radius:13px;display:grid;place-items:center;width:43px;height:43px;padding:0!important;cursor:pointer;box-shadow:none!important;transition:background .2s,transform .2s}
.navbar .notification-bell-icon i {color:#604475!important;font-size:19px}
.navbar .notification-bell-icon:hover,.navbar .notification-bell-icon:focus-visible {background:#e9dcf7!important;transform:translateY(-1px);outline:2px solid #b891e8;outline-offset:2px}
.navbar .user-avatar {background-color:#9765ce!important;background-image:linear-gradient(135deg,#9161ce,#ca89c9);color:#fff!important;min-width:45px;width:45px;height:45px;border:2px solid #fff!important;box-shadow:0 3px 15px #9f79ce40!important;font-weight:800!important;text-shadow:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
.navbar .user-avatar span {color:#fff!important;display:inline-block!important;font-size:15px;font-weight:800;line-height:1}
#settings-profile-preview {background:linear-gradient(135deg,#9161ce,#d08dbf)!important;color:#fff!important;display:flex;align-items:center;justify-content:center;overflow:hidden}
#settings-profile-preview span {color:#fff!important;font-weight:800}
.ca-auto-card {max-width:unset!important;padding:0!important;overflow:hidden;border:1px solid #ebe5f3!important;background:#fff!important}
.ca-auto-heading {display:flex;align-items:center;gap:16px;padding:27px 29px;background:linear-gradient(110deg,#f7f0fe 0%,#fff5f9 100%);border-bottom:1px solid #eee6f5}
.ca-auto-heading-icon {width:52px;height:52px;display:grid;place-items:center;background:#fff;border:1px solid #ead9f8;color:#9162ce;border-radius:17px;flex:none;font-size:21px;box-shadow:0 6px 16px #9972c620}
.ca-auto-eyebrow {display:block;font-size:10px;font-weight:800;letter-spacing:.14em;color:#9d71c0;margin-bottom:4px}
.ca-auto-heading h3 {margin:0 0 4px!important;font-size:clamp(1.2rem,2vw,1.55rem)!important;color:#352744}
.ca-auto-heading p {color:#756b7f;margin:0;font-size:.91rem}
.ca-auto-card form {display:block!important}
.ca-auto-section {padding:25px 29px;border-bottom:1px solid #f0ecf5}
.ca-auto-section-title {display:flex;align-items:flex-start;gap:13px;margin-bottom:17px}
.ca-auto-section-icon {display:grid;place-items:center;width:37px;height:37px;border-radius:12px;background:#f4edfc;color:#9163c9;flex:none}
.ca-auto-section-title h4 {font-size:1rem;color:#342940;margin:0 0 4px;font-weight:800}
.ca-auto-section-title p {font-size:.84rem;color:#837b8e;margin:0}
.ca-auto-toggle-row {display:flex!important;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border:1px solid #eae3f2;background:#fcfbfe;border-radius:15px;cursor:pointer;margin:0!important}
.ca-auto-toggle-row>span:first-child {display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.ca-auto-toggle-row strong {color:#362c41;font-size:.9rem;line-height:1.45}
.ca-auto-toggle-row small {font-size:.76rem;color:#847a90;line-height:1.5}
.ca-auto-switch {position:absolute;opacity:0;width:1px!important;height:1px!important;pointer-events:none}
.ca-auto-switch-track {position:relative;width:46px;height:26px;border-radius:99px;background:#d5cddd;transition:background .2s;flex:none}
.ca-auto-switch-track:after {content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:white;box-shadow:0 2px 5px #49384c35;transition:transform .2s}
.ca-auto-switch:checked+.ca-auto-switch-track {background:#9261d2}
.ca-auto-switch:checked+.ca-auto-switch-track:after {transform:translateX(20px)}
.ca-auto-switch:focus-visible+.ca-auto-switch-track {outline:3px solid #bca0ed;outline-offset:3px}
.ca-auto-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:17px}
.ca-auto-field {min-width:0}
.ca-auto-field label {display:block;font-size:.84rem!important;font-weight:750;margin:0 0 9px!important;color:#51445f}
.ca-auto-field input,.ca-auto-field select {min-width:0!important;width:100%!important;min-height:46px;border:1px solid #ded6e9!important;border-radius:12px!important;padding:10px 13px!important;color:#352b41!important;background:white!important;font-size:.9rem}
.ca-auto-field input:focus,.ca-auto-field select:focus {outline:none;border-color:#9b71d7!important;box-shadow:0 0 0 4px #9872ca1a}
.ca-auto-field small {display:block;margin-top:7px;color:#8c8395;font-size:.72rem}
.ca-auto-field[hidden] {display:none!important}
.ca-auto-input-unit {display:flex;align-items:center;gap:9px}
.ca-auto-input-unit span {font-size:.79rem;color:#867b91}
.ca-auto-actions {padding:22px 29px 25px;display:flex;flex-direction:column;gap:13px}
.ca-auto-note {display:flex;gap:9px;align-items:flex-start;background:#f8f5fc;border:1px solid #f0eafa;border-radius:12px;padding:13px 15px;color:#766b83!important;font-size:.81rem!important;margin:0!important}
.ca-auto-note i {margin-top:2px;color:#9261d2}
#ca-auto-save {align-self:flex-end;width:auto!important;min-width:210px;padding:13px 22px!important;border-radius:12px!important}
#ca-auto-feedback {min-height:0;margin:0;color:#5b4770}
@media(max-width:640px){.ca-auto-heading {padding:20px 17px;gap:11px}.ca-auto-heading-icon {width:44px;height:44px}.ca-auto-section {padding:21px 17px}.ca-auto-actions {padding:19px 17px}.ca-auto-fields {grid-template-columns:1fr}.ca-auto-toggle-row {padding:14px}.ca-auto-toggle-row small {font-size:.72rem}#ca-auto-save {width:100%!important;align-self:stretch}}


/* ===== ClickAgenda refresh UI (Oct 2026) ===== */
:root {
  --ca-purple-900:#241d38;
  --ca-purple-700:#6f4fb0;
  --ca-purple-600:#8f67d7;
  --ca-gold-500:#d6a93b;
  --ca-gold-600:#c9971c;
  --ca-surface:#ffffff;
  --ca-surface-soft:#fcf9ff;
  --ca-border:#e7def1;
  --ca-shadow-lg:0 24px 70px rgba(44,27,69,.14);
}
body {background:linear-gradient(180deg,#fbf9fe 0%,#f7f2fc 100%); color:#2f2940;}
.hero {position:relative; overflow:hidden;}
.hero::after {content:''; position:absolute; inset:auto -12% -24% auto; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle,#e9d3fb 0%,rgba(233,211,251,0) 70%); pointer-events:none;}
.hero-badge {display:inline-flex; align-items:center; gap:.55rem; padding:.7rem 1rem; border-radius:999px; border:1px solid #eadcf6; background:rgba(255,255,255,.85); color:#6d5398; font-weight:700; font-size:.83rem; margin-bottom:1.35rem; box-shadow:0 12px 34px rgba(102,71,145,.08);}
.hero-badge i {color:var(--ca-gold-500);}
.hero h1 {max-width:920px;}
.hero p {font-size:1.08rem; color:#5c556d;}
.logo i,.login-logo i {background:linear-gradient(135deg,#f2e7ff,#fef6e5)!important; color:#7c52bf!important; box-shadow:inset 0 0 0 1px rgba(124,82,191,.08);}
.login-modal-content {max-width:680px!important; background:linear-gradient(180deg,#fff 0%,#fcf9ff 100%); padding:2rem!important; border:1px solid #eadff5; box-shadow:var(--ca-shadow-lg)!important;}
.modal-content .modal-header {padding-bottom:1rem; margin-bottom:1.25rem; border-bottom:1px solid #efe7f6;}
.close-modal {width:42px; height:42px; border-radius:50%; border:1px solid #eadff4; background:#faf7fe; color:#8f7ea9; font-size:1.65rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; transition:.2s ease;}
.close-modal:hover {background:#f1e8fb; color:#6d4ba8; transform:translateY(-1px);}
.auth-view-header {text-align:center; margin-bottom:1.4rem;}
.auth-kicker {display:inline-block; font-size:.72rem; letter-spacing:.18em; font-weight:800; color:#9f7cc3; margin-bottom:.5rem;}
.auth-grid {display:grid; gap:1rem;}
.auth-grid-2 {grid-template-columns:repeat(2,minmax(0,1fr));}
.auth-submit-btn {min-height:54px; font-size:1rem;}
.auth-footer-inline {padding-top:1rem;}
.compact-checkbox .checkbox-container {align-items:flex-start;}
.modern-info-box {background:linear-gradient(135deg,#f7f1ff 0%,#fff9ef 100%); border-left:5px solid var(--ca-gold-500); box-shadow:0 8px 24px rgba(116,77,181,.06);}
.modern-info-box i {background:linear-gradient(135deg,var(--ca-gold-500),#f0c55b);}
.subtle-info-box {background:linear-gradient(135deg,#f8f5fd 0%,#fff 100%);}
.form-title {font-size:2rem; color:#2c2440;}
.form-description {max-width:520px; margin-left:auto; margin-right:auto; color:#6d667a;}
.form-group label {font-weight:700; color:#382f49; margin-bottom:.55rem; display:block;}
.input-with-icon input, .input-with-icon select, .input-with-icon textarea {height:54px!important; border-radius:18px!important; border:1px solid #dfd4ea!important; background:#fff!important; color:#302a40; font-size:.98rem; box-shadow:0 4px 14px rgba(65,38,97,.03);}
.input-with-icon input::placeholder, .form-group textarea::placeholder {color:#a29aac;}
.input-with-icon > i:first-child {left:16px!important; color:#b58f2e!important;}
.toggle-password {right:16px!important; color:#9b8eb0!important;}
.form-options {padding:1rem 1.15rem; border:1px solid #efe7f6; background:#faf8fd; border-radius:16px;}
.form-footer {border-top:1px solid #f0eaf6;}
.link-input-group {display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.75rem; align-items:center;}
.link-input-group input {min-height:52px; border-radius:16px; border:1px solid #dfd4ea; padding:0 1rem;}
.link-actions {margin-top:1rem; padding:1rem 1.1rem; border-radius:16px; background:linear-gradient(135deg,#f8f3fe 0%,#fff 100%); border:1px solid #ece1f8;}
.link-actions p {margin:0 0 .85rem; color:#655c72;}
#my-link-section .settings-card:first-child {background:linear-gradient(180deg,#fff 0%,#fcf9ff 100%);}
.whatsapp-info-box {border-radius:18px!important;}
@media (max-width: 768px) {
  .auth-grid-2, .link-input-group {grid-template-columns:1fr;}
  .login-modal-content {padding:1.3rem!important; border-radius:20px!important;}
  .form-title {font-size:1.65rem;}
  .hero-badge {font-size:.75rem; padding:.6rem .9rem;}
}

.logo {gap:.8rem;}
.logo span, .login-logo h2 {font-weight:800; letter-spacing:-.03em;}
.logo i,.login-logo i {min-width:46px; min-height:46px; border-radius:15px; display:inline-flex; align-items:center; justify-content:center;}
.login-logo {display:flex!important; align-items:center!important; gap:.85rem!important; flex-wrap:nowrap!important; justify-content:flex-start!important; margin:0!important;}
.login-logo h2 {font-size:2rem; margin:0;}
.modal-header {display:flex; align-items:center; gap:1rem;}
.modal-header .close-modal {position:static!important; margin-left:auto; flex-shrink:0;}
.modal-content {overflow-x:hidden;}
.feature-card {transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.feature-card:hover {transform:translateY(-4px); box-shadow:0 18px 42px rgba(61,32,102,.08);}
.feature-icon {width:74px; height:74px; border-radius:22px!important; background:linear-gradient(135deg,#f3e8ff 0%,#fff7e8 100%)!important; box-shadow:0 12px 24px rgba(144,106,206,.10);}
.feature-icon i {font-size:1.5rem; color:#8a61cb!important;}
.close-modal i {pointer-events:none;}
#new-appointment-modal .modal-header .close-modal,
#new-service-modal .modal-header .close-modal,
#edit-service-modal .modal-header .close-modal,
#edit-appointment-modal .modal-header .close-modal,
#whatsapp-method-modal .modal-header .close-modal,
#whatsapp-qr-modal .modal-header .close-modal,
#whatsapp-code-modal .modal-header .close-modal {background:rgba(255,255,255,.14)!important; border-color:rgba(255,255,255,.24)!important; color:#fff!important;}
#new-appointment-modal .modal-header .close-modal:hover,
#new-service-modal .modal-header .close-modal:hover,
#edit-service-modal .modal-header .close-modal:hover,
#edit-appointment-modal .modal-header .close-modal:hover,
#whatsapp-method-modal .modal-header .close-modal:hover,
#whatsapp-qr-modal .modal-header .close-modal:hover,
#whatsapp-code-modal .modal-header .close-modal:hover {background:rgba(255,255,255,.24)!important;}
#my-link-section .card-header-row h3 i {color:#9160d2;}
@media (max-width: 768px) {
  .modal-content {width:min(100%, 94vw)!important; max-height:86vh!important; border-radius:22px!important;}
  .modal-content .modal-header {margin-bottom:1rem;}
  .close-modal {width:40px; height:40px; font-size:1.35rem;}
  .hero h1 {font-size:2.2rem!important; line-height:1.08;}
  .hero p {font-size:1rem;}
  .hero-badge {margin-bottom:1rem;}
  .whatsapp-method-grid {grid-template-columns:1fr!important;}
}


/* ============================================================================
   ClickAgenda UI refinements — 09/10/2026
   Only hero, auth modal, its close buttons, and copy-link toast.
   ============================================================================ */

/* Restore the original Manrope display lettering; remove the washed-out white
   gradient inherited from the legacy style.css. */
.hero h1 {
    font-family: 'Manrope', 'DM Sans', system-ui, sans-serif !important;
    font-weight: 800;
    line-height: 1.13;
    letter-spacing: -.055em;
    background: linear-gradient(105deg, #2d2347 5%, #614392 56%, #7956b1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #34254f;
    text-wrap: balance;
}

/* X icon: center the SVG font symbol geometrically, not with a font baseline. */
.modal .modal-header .close-modal {
    appearance: none;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 42px;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px;
    padding: 0 !important;
    margin-left: auto !important;
    line-height: 1 !important;
    border-radius: 50%;
    cursor: pointer;
}
.modal .modal-header .close-modal i {
    display: block;
    font-size: 18px;
    line-height: 1;
    width: 18px;
    height: 18px;
    text-align: center;
    pointer-events: none;
}
.modal .modal-header .close-modal:focus-visible {
    outline: 3px solid #ba8af0;
    outline-offset: 2px;
}

/* Symmetrical login intro: title and subtitle start on the same left edge. */
#login-form .form-title,
#login-form .form-description {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: none;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
#login-form .form-title {
    font-size: clamp(1.55rem, 3.5vw, 2rem);
    line-height: 1.25;
    margin-top: 0;
    margin-bottom: .35rem;
    letter-spacing: -.035em;
}
#login-form .form-description {
    font-size: .96rem;
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 1.6rem;
}

/* Undo legacy mobile form-options stacking and checkbox's 1.5rem bottom margin. */
#login-form .form-options {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .5rem !important;
    flex-wrap: nowrap !important;
    padding: .9rem 1rem !important;
    padding-bottom: .9rem !important;
    margin-bottom: 1.3rem !important;
    background: #faf8fe;
    border: 1px solid #eee5f8;
    border-radius: 15px;
}
#login-form .form-options .checkbox-container {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 1 auto;
    gap: .45rem !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap;
    line-height: 1.35 !important;
}
#login-form .form-options .checkbox-container input[type=checkbox] {
    top: 0 !important;
    margin: 0 !important;
    flex: 0 0 18px;
}
#login-form .form-options .checkbox-text {
    font-size: .86rem !important;
    margin: 0 !important;
    white-space: nowrap;
}
#login-form .form-options .forgot-link {
    display: inline-block;
    margin: 0 !important;
    padding: 0 !important;
    font-size: .86rem !important;
    white-space: nowrap;
    text-align: right;
    line-height: 1.35;
}

/* Refined feedback: the existing toast component replaces native alerts. */
#toast-container .toast.success {
    border-radius: 17px;
    border: 1px solid #d6e9de;
    border-left: 5px solid #32ae78;
    box-shadow: 0 14px 38px rgba(39, 31, 54, .14);
    background: #fff;
}
#toast-container .toast.success .toast-title {
    color: #2e2443;
}
#toast-container .toast.success .toast-icon {
    color: #1c975e;
    background: #e7f7ed;
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: clamp(2.05rem, 7.6vw, 3rem) !important;
        letter-spacing: -.05em;
        line-height: 1.17;
    }
    #login-form .form-title {
        font-size: 1.65rem;
    }
    #login-form .form-options {
        padding: .8rem .75rem !important;
    }
    .modal .modal-header .close-modal {
        width: 42px !important;
        height: 42px !important;
        flex-basis: 42px;
    }
}
@media (max-width: 360px) {
    #login-form .form-options .checkbox-text,
    #login-form .form-options .forgot-link {
        font-size: .77rem !important;
    }
    #login-form .form-options {gap: .35rem !important;}
}

/* ===== Refinamentos: clientes, agendamento digitável e serviços compactos ===== */
.ca-section-toolbar {display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.15rem}
.ca-section-toolbar h3 {margin:0 0 .3rem;color:#2d2440;font-size:1.4rem}
.ca-section-toolbar p {margin:0;color:#787085;font-size:.91rem}
.ca-section-toolbar p i {color:#9c75d4;margin-right:.3rem}
.ca-section-toolbar .btn {display:inline-flex;align-items:center;gap:.5rem;min-height:44px}
.ca-client-modal-content {max-width:520px!important;width:min(94vw,520px)!important}
.ca-client-modal-content .modal-header {display:flex;align-items:center;justify-content:space-between;gap:1rem}
.ca-client-modal-content .modal-header h2 {font-size:1.36rem;margin:0;display:flex;align-items:center;gap:.6rem}
.ca-client-modal-content .modal-header h2 i {color:#9364d3}
.ca-client-intro {margin:-.15rem 0 1.3rem;line-height:1.6;color:#71687f;font-size:.92rem}
.ca-client-modal-content .form-group {margin-bottom:1rem}
.ca-client-modal-content .form-group label {font-weight:700;color:#342c44}
.ca-client-modal-content .form-group input,.ca-client-modal-content .form-group textarea {width:100%;border:1px solid #e5ddeb;border-radius:13px;padding:.85rem 1rem;background:#fff;font:inherit;font-size:1rem;box-sizing:border-box}
.ca-client-modal-content .form-group input:focus,.ca-client-modal-content .form-group textarea:focus {border-color:#9569d5;outline:3px solid #e9dcf9}
.ca-full-btn {width:100%;display:flex;justify-content:center;align-items:center;gap:.5rem;min-height:48px}

/* O cabecalho do agendamento sempre mostra um botao de fechar visivel. */
#new-appointment-modal .modal-content {width:min(94vw,760px)!important;max-width:760px!important;max-height:min(90dvh,850px)!important;padding:1.7rem!important;overflow-y:auto!important;position:relative}
#new-appointment-modal .modal-header {position:sticky!important;top:-1.7rem!important;z-index:4!important;min-height:62px;display:flex!important;align-items:center!important;gap:1rem!important;padding:1rem 0!important;margin:0 0 1.3rem!important;border-radius:0!important;background:#fff!important;border-bottom:1px solid #eee6f5!important;color:#322942!important}
#new-appointment-modal .modal-header h2 {color:#322942!important;font-size:1.38rem!important;margin:0!important;line-height:1.2;min-width:0}
#new-appointment-modal .modal-header h2 i {color:#9566d1!important}
#new-appointment-modal .modal-header .close-modal {position:static!important;flex:none!important;margin:0 0 0 auto!important;width:40px!important;height:40px!important;border:1px solid #e9e0f2!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;background:#f7f3fc!important;color:#75608f!important;opacity:1!important;line-height:1!important;font-size:20px!important;padding:0!important}
#new-appointment-modal .modal-header .close-modal i {margin:0!important;line-height:1!important}
#new-appointment-modal .modal-header .close-modal:hover {background:#ebdff8!important}
#new-appointment-modal #appointment-form {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:.45rem}
#new-appointment-modal #appointment-form>.form-group {grid-column:span 1;min-width:0;margin-bottom:.75rem}
#new-appointment-modal #appointment-form>.form-row {grid-column:1/-1;margin:0;gap:1rem}
#new-appointment-modal #appointment-form>.form-group[style*="span 2"],
#new-appointment-modal #appointment-form>#novos-campos-cliente,
#new-appointment-modal #appointment-form>button[type="submit"] {grid-column:1/-1!important}
#new-appointment-modal #appointment-form label {font-weight:700;color:#30283e}
#new-appointment-modal #appointment-form label i {color:#af8833!important}
#new-appointment-modal #appointment-form select,
#new-appointment-modal #appointment-form textarea,
#new-appointment-modal #appointment-form input[type="text"]:not(.ca-native-picker) {border:1px solid #e3dce9;background:#fff;border-radius:13px;min-height:48px;font-size:1rem}
.ca-typed-datetime-row .form-group {min-width:0;margin-bottom:.7rem}
.ca-date-time-control {display:flex;align-items:center;position:relative;gap:0;min-width:0}
#new-appointment-modal .ca-date-time-control>input[type="text"] {flex:1;width:100%;min-width:0;height:50px;border:1px solid #e3dce9!important;border-right:0!important;border-radius:13px 0 0 13px!important;padding:.75rem .8rem;font-size:1rem;outline:none}
#new-appointment-modal .ca-date-time-control>input[type="text"]:focus {border-color:#9f74d8!important;box-shadow:0 0 0 3px rgba(151,104,212,.12)}
.ca-picker-button {width:48px;height:50px;flex:none;border:1px solid #e3dce9;border-left:0;border-radius:0 13px 13px 0;background:#f7f3fc;color:#8057b9;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:17px}
.ca-picker-button:hover {background:#eee4f8}
.ca-picker-button:focus-visible {outline:3px solid #a57bdc;outline-offset:2px}
.ca-native-picker {position:absolute!important;right:0;bottom:0;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;border:0!important;padding:0!important;min-height:0!important}
.ca-field-help {display:block;color:#847b91;margin-top:.3rem;font-size:.76rem}

/* Cards dos servicos em linhas compactas com pesquisa. */
.ca-services-directory {margin-top:1.5rem}
.ca-services-toolbar {display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:.95rem}
.ca-services-toolbar h3 {display:flex;align-items:center;gap:.65rem;color:#32283f;margin:0 0 .2rem;font-size:1.2rem}
.ca-services-toolbar p {color:#81798b;font-size:.84rem;margin:0}
.ca-count-badge {display:inline-flex;align-items:center;justify-content:center;background:#efe5fa;color:#7a4bb8;border-radius:99px;font-size:.77rem;min-width:28px;height:26px;padding:0 .4rem}
.ca-services-search {display:flex;align-items:center;gap:.55rem;border:1px solid #e6def0;background:#fff;padding:.65rem .85rem;border-radius:13px;color:#9b7aca;width:100%;max-width:265px;min-height:45px;box-sizing:border-box}
.ca-services-search input {border:0!important;outline:0!important;width:100%;min-width:0;font-size:.92rem;background:transparent!important;box-shadow:none!important;color:#31283f}
#lista-de-servicos.ca-services-list {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;align-content:start!important}
#lista-de-servicos .service-card.ca-service-item {display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:.8rem!important;min-height:88px!important;height:auto!important;padding:.75rem .85rem!important;margin:0!important;border:1px solid #eee7f4!important;border-left:3px solid #d4b04c!important;border-radius:14px!important;background:#fff!important;box-shadow:0 4px 14px rgba(50,30,76,.04)!important;position:relative!important;transform:none!important}
#lista-de-servicos .service-card.ca-service-item:hover {border-color:#d9c8eb!important;box-shadow:0 8px 24px rgba(50,30,76,.09)!important}
#lista-de-servicos .ca-service-summary {min-width:0;display:flex;flex-direction:column;gap:.33rem;flex:1}
#lista-de-servicos .ca-service-summary h4 {font-size:.92rem!important;line-height:1.33!important;margin:0!important;min-width:0;word-break:break-word;color:#30273f!important}
#lista-de-servicos .ca-service-summary h4 i {font-size:.9rem;color:#a57ad3;margin-right:.2rem}
#lista-de-servicos .ca-service-duration {font-size:.79rem;color:#7f748a}
#lista-de-servicos .ca-service-side {display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:.5rem;flex:none;min-width:88px}
#lista-de-servicos .ca-service-value {font-size:.98rem!important;line-height:1!important;color:#bd9129!important;font-weight:800!important;white-space:nowrap;margin:0!important}
#lista-de-servicos .ca-service-actions {display:flex;align-items:center;gap:.35rem;border:0!important;padding:0!important;margin:0!important}
#lista-de-servicos .ca-service-action {position:static!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:33px!important;height:33px!important;padding:0!important;border:1px solid #ece4f4!important;border-radius:10px!important;background:#f7f2fc!important;color:#8457b8!important;cursor:pointer!important;box-shadow:none!important}
#lista-de-servicos .ca-service-action.ca-service-remove {background:#fff7f7!important;border-color:#f9e4e4!important;color:#d96060!important}
#lista-de-servicos .ca-service-action:hover {filter:brightness(.95)}
.ca-empty-list {grid-column:1/-1;text-align:center;border:1px dashed #dfd4ea;border-radius:14px;padding:1.6rem;color:#716981;font-size:.91rem}
@media (max-width:850px) {
  #lista-de-servicos.ca-services-list {grid-template-columns:1fr!important}
  .ca-services-search {max-width:100%}
}
@media (max-width:768px) {
  .ca-section-toolbar {align-items:stretch}
  .ca-section-toolbar .btn {width:100%;justify-content:center}
  #new-appointment-modal .modal-content {width:calc(100vw - 24px)!important;max-width:560px!important;max-height:calc(100dvh - 32px)!important;padding:1rem!important}
  #new-appointment-modal .modal-header {top:-1rem!important;padding:.9rem 0!important;margin-bottom:.9rem!important;min-height:54px}
  #new-appointment-modal .modal-header h2 {font-size:1.15rem!important}
  #new-appointment-modal #appointment-form {grid-template-columns:1fr;gap:.3rem}
  #new-appointment-modal #appointment-form>.form-row {grid-template-columns:1fr;gap:.3rem}
  #new-appointment-modal #appointment-form>.form-group {grid-column:1/-1}
  #lista-de-servicos .service-card.ca-service-item {min-height:82px!important}
}

/* O formulário de inclusão fica recolhido até o profissional pedir um novo serviço. */
#services-section .service-form-wrapper {display:none!important;margin:1rem 0 0!important;max-width:100%!important}
#services-section.ca-show-add-service .service-form-wrapper {display:block!important}
#services-section .ca-services-header {margin-bottom:.6rem}
#services-section .ca-services-directory {margin-top:.5rem!important}
#services-section .ca-services-toolbar {margin-bottom:.9rem}
@media (max-width:768px) {
  #services-section .ca-services-header h2 {font-size:1.4rem!important}
  #services-section .ca-services-header .btn {width:auto;min-height:42px}
  #services-section .service-form-wrapper {padding:1.15rem!important}
}

/* ===== Clientes: visual leve, roxo e dourado ===== */
#lista-clientes.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 14px;
  margin-top: 18px;
  align-items: start;
}
#lista-clientes .ca-client-card {
  position: relative;
  background: #fff;
  border: 1px solid #e8dff1 !important;
  border-radius: 18px !important;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(50, 34, 78, .055) !important;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
#lista-clientes .ca-client-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #9664d8 0%, #c4a3f0 58%, #ddb451 100%);
  transform: none;
  pointer-events: none;
}
#lista-clientes .ca-client-card:hover {
  border-color: #d3bfe9 !important;
  box-shadow: 0 12px 28px rgba(79, 46, 114, .10) !important;
  transform: translateY(-2px);
}
#lista-clientes .ca-client-card__top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 18px 16px 20px;
  background: linear-gradient(120deg, #ffffff 0%, #fcfaff 65%, #f9f4ff 100%);
}
#lista-clientes .ca-client-card__avatar {
  width: 46px;
  height: 46px;
  min-width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #eee5fa;
  box-shadow: inset 0 0 0 1px #e5d5f7;
  color: #7546bb;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -.02em;
}
#lista-clientes .ca-client-card__identity {min-width:0;flex:1;}
#lista-clientes .ca-client-card__identity h4 {
  font-family: Manrope, 'DM Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.32;
  font-weight: 800;
  color: #2d2541;
  margin: 0 0 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#lista-clientes .ca-client-card__identity p {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0;
  color: #80778f;
  font-size: .81rem;
  line-height: 1.3;
}
#lista-clientes .ca-client-card__identity p i {
  flex: none;
  color: #bb9437;
  font-size: .76rem;
}
#lista-clientes .ca-client-card__identity p span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#lista-clientes .ca-client-card__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 12px 15px 13px 17px;
  background: #faf8fe;
  border-top: 1px solid #f0eaf5;
}
#lista-clientes .ca-client-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 1px 10px 1px 0;
  border: 0;
  border-radius: 0;
  background: none;
}
#lista-clientes .ca-client-stat + .ca-client-stat {
  border-left: 1px solid #e9e0f1;
  padding-left: 13px;
  padding-right: 0;
}
#lista-clientes .ca-client-stat__icon {
  flex: none;
  width: 31px;
  height: 31px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ece3f9;
  color: #895bc2;
  font-size: .82rem;
}
#lista-clientes .ca-client-stat:nth-child(2) .ca-client-stat__icon {
  background: #fcf2d9;
  color: #b48b24;
}
#lista-clientes .ca-client-stat__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#lista-clientes .ca-client-stat__content strong {
  color: #30253e;
  font-weight: 800;
  font-size: .98rem;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#lista-clientes .ca-client-stat__content small {
  color: #92879e;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .04em;
  font-size: .59rem;
  line-height: 1.3;
}
@media (max-width: 768px) {
  #clients-section .ca-section-toolbar {gap: .85rem;}
  #clients-section .ca-section-toolbar h3 {font-size: 1.55rem;}
  #lista-clientes.clients-grid {
    grid-template-columns: 1fr;
    gap: 11px;
    margin-top: 15px;
  }
  #lista-clientes .ca-client-card {border-radius: 16px !important;}
  #lista-clientes .ca-client-card__top {padding: 14px 15px 13px 17px;}
  #lista-clientes .ca-client-card__avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    font-size: .93rem;
  }
  #lista-clientes .ca-client-card__stats {padding: 10px 11px 11px 15px;}
  #lista-clientes .ca-client-stat__icon {width: 29px;height:29px;font-size:.78rem;}
  #lista-clientes .ca-client-stat__content strong {font-size:.93rem;}
  #lista-clientes .ca-client-stat__content small {font-size:.56rem;}
}
@media (max-width: 360px) {
  #lista-clientes .ca-client-card__stats {padding-left: 13px; padding-right: 10px;}
  #lista-clientes .ca-client-stat {gap: 5px;}
  #lista-clientes .ca-client-stat + .ca-client-stat {padding-left: 8px;}
  #lista-clientes .ca-client-stat__icon {width: 27px;height:27px;}
}

/* Agenda: ações de editar, confirmação do cliente e reenvio de convite */
.ca-appointment-card {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.2rem;
  padding:1.2rem 1.3rem;
  background:#fff;
  border:1px solid #e9e1f1;
  border-left:4px solid var(--ca-status-color,#c9971c);
  border-radius:18px;
  box-shadow:0 7px 24px rgba(44,25,73,.05);
  min-width:0;
}
.ca-appointment-card--cancelled {opacity:.7}
.ca-appointment-card__body {flex:1 1 260px;min-width:0}
.ca-appointment-card__meta {display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;color:#716a7e;font-size:.85rem;margin-bottom:.75rem}
.ca-appointment-card__meta span {display:inline-flex;align-items:center;gap:.38rem}
.ca-appointment-card__meta i {color:#c5a04a}
.ca-appointment-status {font-size:.72rem;font-weight:800;background:#f8f5fc;border-radius:999px;padding:.35rem .72rem;letter-spacing:.04em}
.ca-appointment-card__body h4 {font-size:1.03rem;color:#312641;font-weight:800;margin:0 0 .45rem}
.ca-appointment-card__body p {font-size:.89rem;color:#6b6178;margin:.23rem 0;overflow-wrap:anywhere}
.ca-appointment-card__body h4 i,.ca-appointment-card__body p i {width:17px;color:#bd9540;margin-right:.27rem}
.ca-appointment-card__notes {font-style:italic;margin-top:.65rem!important}
.ca-appointment-actions {display:flex;flex-wrap:wrap;gap:.48rem;justify-content:flex-end;align-self:center;min-width:0}
.ca-appointment-action {display:inline-flex;justify-content:center;align-items:center;gap:.42rem;padding:.7rem .8rem;border-radius:11px;font-family:inherit;font-weight:700;font-size:.78rem;line-height:1.2;cursor:pointer;transition:.18s ease;border:1px solid transparent;min-height:41px;white-space:nowrap}
.ca-appointment-action:hover {transform:translateY(-1px)}
.ca-appointment-action--edit {color:#7650ab;background:#f3eafd;border-color:#e5d8f3}
.ca-appointment-action--confirm {color:#21774b;background:#e6f7ec;border-color:#d1efd9}
.ca-appointment-action--send {color:#1b7750;background:#e5f8ee;border-color:#ccecd9}
.ca-appointment-action--cancel {color:#a74856;background:#fff1f3;border-color:#f7dade}
.ca-edit-help {display:flex;gap:.5rem;align-items:flex-start;padding:.8rem 1rem;border-radius:13px;background:#f9f5ff;border:1px solid #e9def5;color:#6f617d;font-size:.79rem;line-height:1.55;margin:0 0 1rem}
.ca-edit-help i {color:#9270cf;margin-top:.14rem}
@media(max-width:768px) {
  .ca-appointment-card {display:block;padding:1rem;border-radius:16px;gap:.75rem}
  .ca-appointment-card__meta {gap:.55rem;font-size:.77rem;margin-bottom:.6rem}
  .ca-appointment-card__body h4 {font-size:.96rem}
  .ca-appointment-card__body p {font-size:.82rem}
  .ca-appointment-actions {justify-content:stretch;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1rem;gap:.45rem}
  .ca-appointment-action {padding:.67rem .45rem;width:100%;min-width:0;font-size:.75rem}
}

/* ClickAgenda — edição de clientes e agendamentos: 09/10/2026 */
#lista-clientes .ca-client-card__top {position:relative;}
#lista-clientes .ca-client-card__identity {padding-right:1px;}
#lista-clientes .ca-client-edit-button {
  width:34px;height:34px;min-width:34px;
  border:1px solid #e4d7f1;border-radius:11px;
  background:#f3eafb;color:#7851b3;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;flex:none;transition:background .18s,border-color .18s,transform .18s;
  font-size:.86rem;padding:0;margin:0;
}
#lista-clientes .ca-client-edit-button:hover {background:#e8d9f9;border-color:#c6a7e6;transform:translateY(-1px);}
#lista-clientes .ca-client-edit-button:focus-visible {outline:3px solid #ab81e0;outline-offset:2px;}
#edit-client-modal .ca-edit-client-heading {display:flex;align-items:center;gap:10px;min-width:0;}
#edit-client-modal .ca-edit-client-heading h2 {margin:0;font-size:1.4rem;color:#302543;line-height:1.2;}
#edit-client-modal .ca-edit-client-heading-icon {
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:none;
  background:#efe5fc;color:#8c5bc8;border-radius:13px;
}
#edit-client-modal .ca-client-modal-content {max-width:570px!important;}
#edit-client-modal .modal-header {display:flex!important;align-items:center!important;gap:8px!important;}
#edit-client-modal .modal-header .close-modal,
#edit-appointment-modal .modal-header .close-modal {
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  flex:none!important;position:static!important;margin:0 0 0 auto!important;
  width:42px!important;height:42px!important;min-width:42px!important;
  padding:0!important;border-radius:50%!important;
  background:#f7f1fc!important;border:1px solid #e5d7f1!important;
  color:#60427f!important;opacity:1!important;
  z-index:5!important;cursor:pointer;
}
#edit-client-modal .modal-header .close-modal:hover,
#edit-appointment-modal .modal-header .close-modal:hover {
  background:#e9dbf6!important;border-color:#cca9e9!important;color:#4d2b7b!important;
}
#edit-client-modal .modal-header .close-modal i,
#edit-appointment-modal .modal-header .close-modal i {
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  color:inherit!important;font-size:18px!important;line-height:1!important;
  width:20px!important;height:20px!important;margin:0!important;
}
#edit-appointment-modal .modal-content {max-width:680px!important;max-height:calc(100dvh - 34px)!important;}
#edit-appointment-modal .modal-header {display:flex!important;align-items:center!important;gap:10px!important;}
#edit-appointment-modal .modal-header h2 {
  flex:1;min-width:0;line-height:1.2;margin:0;
  font-size:clamp(1.1rem,3.2vw,1.55rem)!important;
}
#edit-appointment-modal #form-editar-agendamento[hidden],
#edit-appointment-modal #ca-edit-appt-loading[hidden] {display:none!important;}
#edit-appointment-modal .ca-edit-loading {
  display:flex;align-items:center;justify-content:center;gap:.75rem;
  padding:2rem 1rem;background:#faf7fe;border-radius:15px;
  color:#6f5594;font-size:.95rem;font-weight:700;
}
#edit-appointment-modal .ca-edit-appt-date-time {
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;
}
#edit-appointment-modal .form-group {min-width:0;}
#edit-appointment-modal .form-group input,
#edit-appointment-modal .form-group select,
#edit-appointment-modal .form-group textarea {min-width:0;width:100%;max-width:100%;box-sizing:border-box;}
#edit-appointment-modal .ca-edit-help,
#edit-client-modal .ca-client-edit-info {
  display:flex;align-items:flex-start;gap:9px;
  padding:11px 13px;margin:8px 0 16px;
  background:#f8f3fe;color:#6b5683;border:1px solid #ecddf7;
  border-radius:12px;font-size:.83rem;line-height:1.45;
}
#edit-appointment-modal .ca-edit-help i,
#edit-client-modal .ca-client-edit-info i {color:#9166c8;margin-top:2px;flex:none;}
@media(max-width:640px) {
  #edit-appointment-modal .modal-content {max-height:calc(100dvh - 26px)!important;}
  #edit-appointment-modal .ca-edit-appt-date-time {grid-template-columns:1fr!important;gap:0!important;}
  #edit-appointment-modal .modal-header h2 {font-size:1.12rem!important;}
  #edit-client-modal .ca-edit-client-heading h2 {font-size:1.13rem;}
  #edit-client-modal .ca-edit-client-heading-icon {width:36px;height:36px;}
  #lista-clientes .ca-client-edit-button {width:34px;height:34px;min-width:34px;}
}

#edit-client-modal .modal-header .close-modal svg,
#edit-appointment-modal .modal-header .close-modal svg {display:block!important;flex:none;width:18px;height:18px;margin:0;color:inherit;}


/* ===== Remoção de foto de perfil: modal roxo/dourado (out/2026) ===== */
.ca-remove-photo-overlay[hidden] { display: none !important; }
.ca-remove-photo-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(31, 23, 47, .62);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  z-index: 11000;
}
.ca-remove-photo-dialog {
  position: relative;
  width: 100%;
  max-width: 430px;
  max-height: 92dvh;
  overflow-y: auto;
  background: linear-gradient(180deg, #ffffff 0%, #fdfaff 100%);
  border: 1px solid #ede4f4;
  border-radius: 24px;
  padding: 31px 28px 26px;
  box-shadow: 0 30px 90px rgba(25, 17, 50, .26);
  text-align: center;
  animation: ca-remove-photo-appear .18s ease-out;
}
@keyframes ca-remove-photo-appear {
  from { transform: translateY(9px) scale(.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.ca-remove-photo-close {
  position: absolute;
  right: 14px;
  top: 14px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #ede5f5;
  border-radius: 50%;
  background: #f9f5fe;
  color: #765a9e;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.ca-remove-photo-close:hover,
.ca-remove-photo-close:focus-visible {
  background: #ede4f9;
  color: #4f307a;
}
.ca-remove-photo-icon {
  display: grid;
  place-items: center;
  margin: 3px auto 18px;
  width: 68px;
  height: 68px;
  border-radius: 20px;
  background: linear-gradient(135deg, #f4eaff, #fff6e8);
  color: #9661cf;
  font-size: 26px;
  box-shadow: inset 0 0 0 1px #eadcf4;
}
.ca-remove-photo-dialog h3 {
  font-family: Manrope, 'DM Sans', system-ui, sans-serif;
  font-size: clamp(1.25rem, 4vw, 1.55rem);
  font-weight: 800;
  color: #30243f;
  line-height: 1.25;
  margin: 0 0 10px;
  letter-spacing: -.035em;
}
.ca-remove-photo-dialog p {
  font-size: .95rem;
  line-height: 1.6;
  color: #70677d;
  max-width: 320px;
  margin: 0 auto 25px;
}
.ca-remove-photo-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ca-remove-photo-actions button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid transparent;
  font: 700 .9rem 'DM Sans', sans-serif;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}
.ca-remove-photo-keep {
  background: #f7f1fc;
  color: #694499;
  border-color: #e8daf6 !important;
}
.ca-remove-photo-keep:hover { background: #eee3f8; }
.ca-remove-photo-remove {
  background: linear-gradient(135deg, #955fd6, #7c4bbc);
  color: #fff;
  box-shadow: 0 9px 22px rgba(123, 75, 189, .18);
}
.ca-remove-photo-remove:hover { background: #7540b3; transform: translateY(-1px); }
.ca-remove-photo-actions button:focus-visible { outline: 3px solid #d5b4f0; outline-offset: 3px; }
@media(max-width: 480px) {
  .ca-remove-photo-dialog { padding: 30px 19px 20px; border-radius: 22px; }
  .ca-remove-photo-actions { grid-template-columns: 1fr; }
  .ca-remove-photo-actions .ca-remove-photo-keep { order: 2; }
  .ca-remove-photo-actions .ca-remove-photo-remove { order: 1; }
}
@media(prefers-reduced-motion: reduce) { .ca-remove-photo-dialog { animation: none; } }

/* ClickAgenda: conexão WhatsApp em dois métodos (QR e telefone). */
#whatsapp-method-modal .modal-content,
#whatsapp-code-modal .modal-content,
#whatsapp-qr-modal .modal-content {
  border-radius:22px;
  border:1px solid #e9dff5;
  box-shadow:0 26px 75px rgba(42,30,70,.20);
}
#whatsapp-method-modal .method-card {
  background:linear-gradient(180deg,#fff 0%,#fcf9ff 100%)!important;
  border:1px solid #e5dcee!important;
  border-radius:18px!important;
  transition:border-color .2s,box-shadow .2s,transform .2s!important;
}
#whatsapp-method-modal .method-card:hover,
#whatsapp-method-modal .method-card:focus-visible {
  border-color:#9e78d6!important;
  box-shadow:0 14px 28px rgba(111,75,172,.11)!important;
  transform:translateY(-2px)!important;
}
#whatsapp-code-modal #phone-code-input {
  border:1px solid #d9cbe8!important;
  border-radius:14px!important;
  min-height:52px;
  outline-offset:2px;
}
#whatsapp-code-modal #phone-code-input:focus {
  border-color:#8d60d0!important;
  box-shadow:0 0 0 4px rgba(141,96,208,.12);
}
#whatsapp-code-modal #pairing-code-display {
  font-size:clamp(1.7rem,5vw,2.8rem)!important;
  letter-spacing:.16em!important;
  overflow-wrap:anywhere;
}
#whatsapp-qr-modal #qr-image,
#whatsapp-qr-container #qr-code-image {max-width:min(100%,280px)!important; height:auto!important;}
#whatsapp-method-modal .close-modal,
#whatsapp-code-modal .close-modal,
#whatsapp-qr-modal .close-modal {flex-shrink:0; min-width:40px; min-height:40px;}
#whatsapp-method-modal .modal-header h2,
#whatsapp-code-modal .modal-header h3,
#whatsapp-qr-modal .modal-header h3 {min-width:0; font-size:clamp(1.1rem,3.4vw,1.4rem);}
@media(max-width:768px) {
  #whatsapp-method-modal .method-card-qr {display:none!important;}
  #whatsapp-method-modal .whatsapp-method-grid {grid-template-columns:1fr!important;}
  #whatsapp-code-modal .modal-content,
  #whatsapp-qr-modal .modal-content {width:min(96vw,440px)!important; max-height:86vh!important; overflow-y:auto;}
  #whatsapp-qr-container #qr-code-display {display:none!important;}
  #whatsapp-code-modal .modal-header {padding:1.05rem!important;}
  #whatsapp-code-modal #code-step-phone,
  #whatsapp-code-modal #code-step-display {padding:.3rem!important;}
  #whatsapp-code-modal #pairing-code-display {font-size:1.75rem!important; letter-spacing:.1em!important;}
}