/* Presentación de producto para la demo de reservas. La lógica vive en el HTML. */
:root{--dark:#10221c;--green:#bde45f;--line:#b7c7b7;--muted:#587060;--paper:#f8faf4}
body{background:#10221c;color:#f2f5ed}
.top{background:#0d1d18;border-bottom:1px solid #456a4c;padding-block:19px}
.top .brand{color:#f2f5ed;text-decoration:none}
.top .brand:hover{text-decoration:underline}
.top small{letter-spacing:.11em;text-transform:uppercase}
.wrap{max-width:1500px;padding:42px 28px 75px}
.intro{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);align-items:end;gap:55px;margin:0 0 27px;padding:0 0 32px;border-bottom:1px solid #567b5c}
.eyebrow{color:#bde45f;font-size:10px;letter-spacing:.17em;margin-bottom:20px}
.intro h1{max-width:920px;color:#f3f5eb;font-size:clamp(48px,5.1vw,84px);font-weight:850;line-height:.96;letter-spacing:-.08em;text-transform:uppercase}
.intro h1 em{color:#bde45f;font-style:normal}
.intro-aside{max-width:365px;padding-left:19px;border-left:2px solid #bde45f}
.intro-aside span{display:block;margin-bottom:12px;color:#bde45f;font-size:10px;font-weight:850;letter-spacing:.13em}
.intro-aside p{max-width:none;margin:0;color:#c4d4c4;font-size:15px;line-height:1.6}
.scenario{gap:7px;margin-bottom:24px}.scenario span{color:#bde45f;font-size:10px;letter-spacing:.14em;margin-right:12px}
.scenario button{border:1px solid #6f9173;border-radius:0;background:transparent;color:#e2eddf;padding:11px 15px;font-size:11px;font-weight:800;transition:background .2s,color .2s}
.scenario button:hover,.scenario button:focus-visible{background:#bde45f;color:#14251a;border-color:#bde45f}
.scenario button[data-demo="reset"]{margin-left:auto;border-color:#bde45f;color:#bde45f}
.workspace{grid-template-columns:minmax(360px,.78fr) minmax(590px,1.22fr);gap:22px;align-items:start}
.panel{border:1px solid #7c9980;border-radius:0;background:#f6f8f2;box-shadow:0 22px 40px #07170f63}
.workspace>.panel:first-child{color:#172a1e}
.panel-heading{min-height:57px;padding:14px 20px;background:#e6ede3;border-bottom:1px solid #92a994}
.panel-heading h2{color:#22402b;font-size:11px;letter-spacing:.13em}
.panel-heading small{color:#536d58;font-size:10px}
.workspace>.panel:nth-child(2)>.panel-heading{background:#173629;border-bottom-color:#3f6f4a}
.workspace>.panel:nth-child(2)>.panel-heading h2{color:#f1f4e9}
.workspace>.panel:nth-child(2)>.panel-heading small{color:#a9c5a9}
.pill{border:1px solid #bde45f;border-radius:0;background:#bde45f;color:#163021;font-size:9px;letter-spacing:.07em}
.pill:before{background:#24482b}.pill.demo{border-color:#9db39f;border-radius:0;background:transparent;color:#55745a}
.pill.human{background:#ffe7c4;border-color:#d5a65f;color:#62401e}
.chat-head{background:#f9faf5;border-bottom-color:#afc1ae;padding:16px 19px}.avatar{background:#d8ebcd;border-radius:2px;color:#315a35}
.chat{background-color:#e9efe7;background-image:linear-gradient(#c9dbcb66 1px,transparent 1px),linear-gradient(90deg,#c9dbcb66 1px,transparent 1px);background-size:24px 24px;height:52vh;min-height:470px;max-height:600px}
.bubble{box-shadow:0 5px 13px #2038261c;border:1px solid #d4e0d2;border-radius:3px 12px 12px 12px;padding:12px 14px;font-size:13px;color:#172a1e}
.customer .bubble{background:#d5ebbc;border-color:#a3ca81;border-radius:12px 3px 12px 12px}
.operator .bubble{background:#fae3b9}.options button{border:1px solid #9fbc8f;border-radius:2px;background:#f9fdf4;color:#24492d}
.options button:hover{background:#d8ecbf}
.composer{border-top-color:#afc1ae;background:#f8faf4}
.composer input,.reply input,.notify-fields input{background:#fff;border-color:#8fae90}
.composer button,.reply button,.notify-form button{background:#173629;color:#f3f7e9}
.chat-foot{background:#f0f4ec;border-top-color:#c1d0c1;color:#536b58}
.notification-section{border-top:2px solid #c1d7b5;background:#f9fbf6}
.notification-section h3{color:#21432a}.notice{border-left-color:#3b7c4a;background:#eef6e9}
.business-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:146px;padding:27px 31px;background:#20432f;color:#f3f6e9;border-bottom:1px solid #6c956f}
.business-hero::after{content:'';position:absolute;right:-70px;top:-175px;width:380px;aspect-ratio:1;border:1px solid #bcde8b45;border-radius:50%;box-shadow:0 0 0 72px #9fcd7f17,0 0 0 160px #9fcd7f0e}
.business-hero span{display:block;position:relative;z-index:1;margin-bottom:13px;color:#bde45f;font-size:10px;font-weight:850;letter-spacing:.16em}
.business-hero strong{display:block;position:relative;z-index:1;font-size:clamp(28px,2.6vw,43px);font-weight:850;line-height:.96;letter-spacing:-.07em;text-transform:uppercase}
.business-hero-mark{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,21px);grid-template-rows:repeat(2,21px);gap:5px;transform:rotate(-11deg)}
.business-hero-mark i{display:block;background:#bde45f}.business-hero-mark i:first-child{background:#f0f6db}.business-hero-mark i:last-child{background:#77a757}
.business{padding:0 29px 29px;background:#f8faf4;color:#172a1e}
.business-top{margin:0;padding:24px 0 8px;align-items:end}
.business-top h3{font-size:29px;line-height:1;letter-spacing:-.06em;text-transform:uppercase}
.business-top button{padding:0 0 5px;color:#3a7047;text-decoration:underline;text-underline-offset:3px}
.business .hint{max-width:620px;margin-bottom:18px;color:#56705b}
.weekly-settings{border-top:1px solid #aabfaa;border-bottom:1px solid #aabfaa;padding:13px 0}
.weekly-settings strong{color:#2c5936}.weekly-days button{border-color:#93ac94;background:#fff;color:#24402b}
.weekly-days button[aria-pressed=true]{background:#213b29;border-color:#213b29;color:#d7efb7}
.calendar-toolbar{border:0;padding:18px 0 11px}.calendar-toolbar strong{font-size:19px;text-transform:uppercase}
.calendar-toolbar button{border-color:#9db39f;color:#22432b}.weekdays span{color:#487450}
.month-grid{border-color:#aebfaf}.day{min-height:60px;border-color:#b8cbb7;background:#fff;color:#213b28}
.day:not(:disabled):hover{background:#e3f2d3}.day small{color:#567c55}
.day.other,.day.past{background:#f1f4ef;color:#9aab9b}.day.off{background:#eee9df}.day.full{background:#e9eeeb}
.day.selected{background:#254b31;color:#fff;outline:0;box-shadow:inset 0 0 0 2px #bde45f}
.day.selected strong,.day.selected small{color:#d7f4a4}.calendar-legend{margin-top:12px}
.selected-day{margin-top:5px;border-top:2px solid #315f3b}.selected-day strong{font-size:19px}.selected-day small{color:#52705b}
.day-stats{border-color:#b1d787}.day-stats div{background:#d6efb6;padding:15px 17px}.day-stats div+div{border-color:#9bc778}
.day-stats strong{font-size:30px;color:#173622}.day-stats span{color:#41613b}
.daily-label,.section-title{color:#285233}.slot-row{border-bottom-color:#aebfac}.slot-row.booked{border-left-color:#4a9d52;background:#e2f3db}.slot-row.blocked{border-left-color:#b99d65;background:#f4eee3}
.slot-time{color:#2d5b36}.slot-action{border-color:#89aa88;background:#fff;color:#2d6439}
.slot-action:not(:disabled):hover{background:#d9f0c8}.record{border-color:#afc3ad;background:#fff}.record button{border-color:#91b28e}
.empty{border-color:#aac4a5;background:#f3f8ef;color:#5b715d}.reply button{border-radius:0}
.footer{color:#b4c7b7;border-top:1px solid #496e50;padding-top:16px}.footer strong{color:#d8edb8}
html.embed body{background:#f8faf4}.embed .wrap{padding:0}.embed .workspace{gap:10px}.embed .panel{box-shadow:none}.embed .business-hero{min-height:105px;padding:20px 24px}.embed .business-hero strong{font-size:29px}.embed .business{padding-inline:25px}
@media(max-width:1120px){.workspace{grid-template-columns:1fr}.chat{height:480px;max-height:none}.intro{grid-template-columns:1fr;gap:24px}.intro-aside{max-width:650px}.scenario button[data-demo="reset"]{margin-left:0}}
@media(max-width:620px){.wrap{padding:27px 12px 45px}.intro{padding-bottom:24px}.intro h1{font-size:clamp(42px,11vw,60px)}.intro-aside{padding-left:13px}.intro-aside p{font-size:13px}.scenario{gap:7px}.scenario span{width:100%}.scenario button{padding:9px 11px;font-size:10px}.panel-heading{padding-inline:12px}.business-hero{min-height:110px;padding:21px 18px}.business-hero strong{font-size:31px}.business-hero-mark{grid-template-columns:repeat(2,14px);grid-template-rows:repeat(2,14px)}.business{padding:0 15px 18px}.business-top h3{font-size:26px}.day{min-height:53px}.chat{height:500px;min-height:0}.embed .wrap{width:min(390px,100%);padding:0}.embed .workspace{gap:0}.embed .chat{height:650px}.embed .business-hero{min-height:98px;padding:17px}.embed .business{padding-inline:15px}}