:root { --ink:#131411; --night:#1b1b17; --paper:#f6f2ea; --soft:#eae2d5; --gold:#b39160; --gold-light:#d9bd91; --muted:#777269; --line:rgba(19,20,17,.15); --serif:"Playfair Display",Georgia,serif; --sans:"DM Sans",Arial,sans-serif; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); } button,input,select,textarea { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; } [hidden] { display:none !important; }.portal-grid { position:fixed; inset:0; z-index:-1; opacity:.45; background-image:linear-gradient(rgba(19,20,17,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(19,20,17,.025) 1px,transparent 1px); background-size:36px 36px; pointer-events:none; }.eyebrow { margin:0 0 14px; color:var(--gold); font-size:.6rem; font-weight:700; letter-spacing:.19em; }.portal-brand { display:inline-flex; align-items:center; gap:10px; font-size:.8rem; font-weight:700; letter-spacing:.12em; }.portal-brand i { color:var(--gold); font-style:normal; font-weight:500; }.brand-round { display:grid; width:31px; height:31px; place-items:center; border:1px solid currentColor; border-radius:50%; font:1rem var(--serif); letter-spacing:0; }.auth-screen { min-height:100vh; padding:clamp(23px,5vw,66px); display:flex; flex-direction:column; }.auth-layout { display:grid; flex:1; grid-template-columns:1.15fr .85fr; gap:clamp(55px,11vw,190px); align-items:center; width:min(1150px,100%); margin:auto; }.auth-intro h1,.portal-header h1,h2,h3 { font-family:var(--serif); font-weight:600; letter-spacing:-.045em; }.auth-intro h1 { margin:0 0 23px; font-size:clamp(3.7rem,7vw,7.3rem); line-height:.9; }.auth-intro h1 i,h2 i { color:var(--gold); font-weight:600; }.auth-intro > p:not(.eyebrow) { max-width:430px; color:#605c54; line-height:1.75; }.auth-points { display:flex; flex-wrap:wrap; gap:10px; max-width:510px; margin-top:30px; }.auth-points span { padding:9px 11px; border:1px solid var(--line); font-size:.64rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }.auth-points span:before { margin-right:7px; color:var(--gold); content:"✦"; }.auth-card,.setup-card { padding:clamp(29px,4vw,48px); background:var(--night); color:var(--paper); box-shadow:0 23px 55px rgba(53,41,23,.14); }.auth-card h2,.setup-card h2 { margin:0 0 11px; font-size:2.45rem; }.auth-card .muted,.setup-card > p:not(.eyebrow) { color:#c3bcad; font-size:.87rem; line-height:1.6; }.auth-card form { display:grid; gap:15px; margin-top:28px; }.auth-card label,.booking-form-app label,.message-panel label { display:grid; gap:7px; color:#bbb3a4; font-size:.61rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }.auth-card label span,.booking-form-app label span { color:#8f887d; font-weight:400; letter-spacing:0; text-transform:none; }.auth-card input,.booking-form-app input,.booking-form-app select,.booking-form-app textarea,.message-panel select,.message-composer input,.pix-dialog textarea { width:100%; padding:13px 0; border:0; border-bottom:1px solid rgba(242,238,230,.28); outline:none; background:transparent; color:inherit; font-size:.9rem; letter-spacing:0; text-transform:none; }.auth-card input:focus { border-color:var(--gold-light); }.primary-button,.outline-button { display:inline-flex; min-height:49px; align-items:center; justify-content:center; gap:16px; padding:13px 19px; border:1px solid var(--gold); background:var(--gold); color:var(--ink); font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; transition:background .2s,color .2s,transform .2s; }.primary-button:hover { transform:translateY(-2px); background:transparent; color:var(--gold-light); }.primary-button.compact { min-height:40px; padding:10px 14px; }.outline-button { border-color:var(--ink); background:transparent; color:var(--ink); }.outline-button:hover { background:var(--ink); color:var(--paper); }.fine-print { margin:19px 0 0; color:#999183; font-size:.65rem; line-height:1.6; }.form-message { min-height:1.2em; margin:14px 0 0; color:var(--gold-light); font-size:.72rem; line-height:1.5; }.form-message.error { color:#f0aa9b; }.setup-card { align-self:center; }.setup-number { display:block; margin-bottom:25px; color:var(--gold); font:5rem/.75 var(--serif); }.setup-card .outline-button { margin-top:17px; border-color:var(--gold-light); color:var(--gold-light); } .auth-screen footer { display:flex; gap:8px; margin-top:30px; color:#79746a; font-size:.63rem; letter-spacing:.05em; }.auth-screen footer a { border-bottom:1px solid currentColor; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:250px 1fr; }.side-nav { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:31px 25px 24px; background:var(--night); color:var(--paper); }.side-nav nav { display:grid; gap:4px; margin-top:66px; }.nav-item { display:flex; gap:12px; align-items:center; width:100%; padding:12px 10px; border:0; border-left:1px solid transparent; background:transparent; color:#b7afa0; font-size:.72rem; letter-spacing:.05em; text-align:left; }.nav-item span { color:var(--gold); font-size:1rem; }.nav-item:hover,.nav-item.active { border-left-color:var(--gold); background:rgba(246,242,234,.045); color:var(--paper); }.side-nav-bottom { display:grid; gap:15px; margin-top:auto; }.staff-link { color:var(--gold-light); font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }.sign-out { width:fit-content; padding:0; border:0; border-bottom:1px solid #777064; background:none; color:#b7afa0; font-size:.66rem; }.side-nav-bottom small { color:#777064; font-size:.55rem; letter-spacing:.13em; }.app-content { padding:clamp(28px,5vw,72px); }.portal-header { display:flex; align-items:start; justify-content:space-between; gap:25px; margin-bottom:clamp(48px,7vw,90px); }.portal-header h1 { margin:0; font-size:clamp(2.55rem,4.2vw,4.7rem); line-height:.94; }.profile-chip { display:flex; gap:10px; align-items:center; }.profile-chip > span { display:grid; width:38px; height:38px; place-items:center; border-radius:50%; background:var(--gold); font:1.1rem var(--serif); }.profile-chip b,.profile-chip small { display:block; }.profile-chip b { max-width:145px; overflow:hidden; font-size:.73rem; text-overflow:ellipsis; white-space:nowrap; }.profile-chip small { margin-top:3px; color:var(--muted); font-size:.58rem; }.menu-button { display:none; }.view { display:none; max-width:1050px; }.view.active { display:block; animation:view-in .35s ease both; }@keyframes view-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }.overview-intro { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:32px; }.overview-intro h2,.view-heading h2 { margin:0 0 9px; font-size:clamp(2.1rem,3.5vw,3.8rem); line-height:.98; }.overview-intro p,.view-heading > p:not(.eyebrow) { margin:0; color:var(--muted); font-size:.86rem; line-height:1.6; }.appointment-list { display:grid; gap:15px; }.empty-state { padding:45px 27px; border:1px dashed var(--line); text-align:center; }.empty-state > span { color:var(--gold); font-size:1.3rem; }.empty-state h3 { margin:13px 0 7px; font-size:1.5rem; }.empty-state p { margin:0 0 21px; color:var(--muted); font-size:.83rem; }.appointment-card { display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center; padding:20px; border:1px solid var(--line); background:#fbf8f2; }.date-block { display:grid; width:58px; min-height:64px; place-items:center; align-content:center; background:var(--night); color:var(--paper); text-align:center; }.date-block b { font:1.7rem/.9 var(--serif); }.date-block small { margin-top:5px; color:var(--gold-light); font-size:.53rem; font-weight:700; letter-spacing:.12em; }.appointment-main h3 { margin:0 0 5px; font-size:1.3rem; }.appointment-main p { margin:0; color:var(--muted); font-size:.75rem; line-height:1.6; }.status-area { display:grid; justify-items:end; gap:10px; }.status-pill { padding:6px 8px; background:var(--soft); color:#5f5543; font-size:.56rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.status-pill.confirmed { background:#dce3d1; color:#45523d; }.status-pill.completed { background:#d7c098; color:#4d3b20; }.status-pill.cancelled { background:#ebd6d1; color:#79453b; }.pay-button { padding:7px 9px; border:0; background:var(--ink); color:var(--paper); font-size:.59rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.private-note { display:flex; gap:13px; align-items:start; margin-top:30px; padding:18px; background:#e8dfd0; }.private-note > span { color:var(--gold); }.private-note b { font-size:.75rem; }.private-note p { margin:5px 0 0; color:#666057; font-size:.72rem; line-height:1.55; }.view-heading { margin-bottom:32px; }.view-heading > p:not(.eyebrow) { max-width:430px; }.booking-form-app { display:grid; max-width:650px; gap:20px; padding:clamp(22px,4vw,42px); background:#e8dfd0; }.booking-form-app label,.message-panel label { color:#554b3e; }.booking-form-app input,.booking-form-app select,.booking-form-app textarea,.message-panel select,.message-composer input { border-bottom-color:rgba(19,20,17,.2); color:var(--ink); }.booking-form-app textarea { resize:vertical; }.two-columns { display:grid; grid-template-columns:1fr 1fr; gap:20px; }.booking-form-app fieldset { margin:0; padding:0; border:0; }.booking-form-app legend { margin-bottom:10px; color:#554b3e; font-size:.61rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }.mode-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.mode-option { display:block !important; cursor:pointer; }.mode-option input { position:absolute; opacity:0; }.mode-option span { display:block; padding:14px; border:1px solid rgba(19,20,17,.18); background:rgba(255,255,255,.27); transition:border .2s,background .2s; }.mode-option input:checked + span { border-color:var(--ink); background:var(--ink); color:var(--paper); }.mode-option b,.mode-option small { display:block; }.mode-option b { font-size:.76rem; letter-spacing:0; text-transform:none; }.mode-option small { margin-top:4px; font-size:.65rem; font-weight:400; letter-spacing:0; text-transform:none; }.consent { display:flex !important; grid-template-columns:auto 1fr; align-items:start; gap:9px !important; font-size:.67rem !important; font-weight:500 !important; letter-spacing:0 !important; text-transform:none !important; }.consent input { width:auto; margin-top:3px; }.message-panel { display:grid; max-width:700px; min-height:460px; grid-template-rows:auto 1fr auto auto; gap:15px; padding:22px; background:var(--night); color:var(--paper); }.message-panel label { color:var(--gold-light); }.message-panel select,.message-composer input { color:var(--paper); border-bottom-color:rgba(246,242,234,.26); }.messages { min-height:230px; max-height:430px; overflow:auto; display:flex; flex-direction:column; gap:10px; padding:5px 2px; }.message-bubble { max-width:76%; padding:11px 13px; background:#30312a; color:#ece6dc; font-size:.78rem; line-height:1.5; }.message-bubble.mine { align-self:flex-end; background:var(--gold); color:var(--ink); }.message-bubble small { display:block; margin-top:5px; opacity:.65; font-size:.58rem; }.empty-messages { align-self:center; margin:auto; color:#aaa294; font-size:.75rem; text-align:center; }.message-composer { display:grid; grid-template-columns:1fr auto; gap:12px; }.message-composer button { width:42px; border:1px solid var(--gold); background:var(--gold); color:var(--ink); font-size:1.1rem; }.pix-dialog { width:min(430px,calc(100% - 32px)); padding:34px; border:0; background:var(--paper); color:var(--ink); box-shadow:0 20px 70px rgba(0,0,0,.25); }.pix-dialog::backdrop { background:rgba(17,18,15,.78); backdrop-filter:blur(4px); }.pix-dialog h2 { margin:0 0 11px; font-size:2.8rem; }.pix-dialog > p:not(.eyebrow) { color:var(--muted); font-size:.82rem; }.dialog-close { position:absolute; top:13px; right:16px; border:0; background:none; color:var(--ink); font-size:1.7rem; }.pix-copy-label { margin:19px 0 7px !important; color:#776a57 !important; font-size:.58rem !important; font-weight:700; letter-spacing:.13em; }.pix-dialog textarea { min-height:73px; padding:10px; border:1px solid var(--line); background:#eee7dc; color:var(--ink); font-size:.65rem; line-height:1.35; resize:none; }.pix-dialog .primary-button { width:100%; margin-top:13px; }.pix-dialog img { display:block; width:190px; height:190px; margin:18px auto; image-rendering:auto; }
@media (max-width:820px) { .auth-layout { grid-template-columns:1fr; gap:55px; padding:70px 0; }.auth-intro h1 { font-size:clamp(3.7rem,14vw,6rem); }.app-shell { grid-template-columns:1fr; }.side-nav { position:fixed; z-index:10; top:0; left:0; width:250px; height:100dvh; transform:translateX(-102%); transition:transform .25s ease; }.side-nav.open { transform:none; }.menu-button { display:grid; width:35px; height:35px; place-items:center; margin-bottom:12px; padding:0; border:1px solid var(--line); background:transparent; }.portal-header { display:block; }.profile-chip { position:absolute; top:32px; right:24px; }.app-content { padding:32px 24px 55px; }.overview-intro { display:block; }.overview-intro .primary-button { margin-top:20px; }.two-columns,.mode-options { grid-template-columns:1fr; }.appointment-card { grid-template-columns:auto 1fr; }.status-area { grid-column:2; justify-items:start; }.auth-screen footer { flex-wrap:wrap; }.booking-form-app { padding:24px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }
.primary-button:disabled { cursor:wait; opacity:.58; transform:none; }

/* Ícones e conversa estilo concierge. */
.nav-item .nav-icon { width:18px; height:18px; flex:0 0 18px; color:var(--gold); fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.45; }.nav-item > span { color:inherit; font-size:inherit; }.nav-item:hover .nav-icon,.nav-item.active .nav-icon { color:var(--gold-light); }.message-panel { min-height:520px; grid-template-rows:auto auto minmax(230px,1fr) auto auto; gap:0; padding:0; overflow:hidden; border:1px solid rgba(217,189,145,.28); box-shadow:0 22px 50px rgba(25,24,19,.18); }.chat-identity { display:flex; align-items:center; gap:11px; padding:17px 21px; border-bottom:1px solid rgba(246,242,234,.14); background:linear-gradient(105deg,#292a24,#20211d); }.chat-avatar { display:grid; width:35px; height:35px; flex:0 0 35px; place-items:center; border:1px solid var(--gold-light); border-radius:50%; color:var(--gold-light); font:1.08rem var(--serif); }.chat-identity b,.chat-identity small { display:block; }.chat-identity b { font-size:.73rem; letter-spacing:.04em; }.chat-identity small { display:flex; align-items:center; gap:6px; margin-top:3px; color:#aaa294; font-size:.6rem; }.chat-identity small i { display:block; width:6px; height:6px; border-radius:50%; background:#b9c995; box-shadow:0 0 0 3px rgba(185,201,149,.1); }.chat-lock { display:grid; width:28px; height:28px; margin-left:auto; place-items:center; border:1px solid rgba(217,189,145,.26); border-radius:50%; color:var(--gold-light); }.chat-lock svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.6; }.message-panel > label { padding:16px 21px 4px; color:var(--gold-light); }.message-panel select { padding:12px 0 8px; }.messages { min-height:260px; max-height:450px; margin:0 21px; padding:18px 1px; }.message-bubble { border-radius:2px 11px 11px 11px; box-shadow:0 5px 14px rgba(0,0,0,.11); }.message-bubble.mine { border-radius:11px 2px 11px 11px; }.message-composer { gap:10px; margin:0; padding:13px 16px 14px 21px; border-top:1px solid rgba(246,242,234,.13); background:#24251f; }.message-composer input { min-width:0; padding:10px 0; }.message-composer button { display:grid; width:43px; height:43px; place-items:center; border-radius:50%; transition:transform .2s,background .2s; }.message-composer button:hover { transform:translateY(-2px) rotate(-5deg); background:var(--gold-light); }.message-composer button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }.message-panel > .form-message { min-height:0; margin:0; padding:0 21px 17px; color:#c9c0b1; }.message-panel > .form-message.error { color:#f0aa9b; }
@media (max-width:520px) { .message-panel { min-height:490px; }.chat-identity { padding:15px 16px; }.message-panel > label { padding-right:16px; padding-left:16px; }.messages { min-height:240px; margin:0 16px; }.message-composer { padding-right:12px; padding-left:16px; }.message-panel > .form-message { padding-right:16px; padding-left:16px; } }