:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink:#0b1020;
  --muted:#667085;
  --line:rgba(15,23,42,.10);
  --paper:#fff;
  --soft:#f7f8fc;
  --violet:#6757f5;
  --blue:#4c8df7;
  --cyan:#67f5e8;
  --success:#16a57a;
  --warning:#e78b2f;
  --danger:#d9485f;
  --shadow:0 28px 80px rgba(44,51,89,.14);
}

* { box-sizing:border-box; }
html, body { width:100%; min-height:100%; margin:0; background:#fff; }
body { min-height:100dvh; overflow-x:hidden; color:var(--ink); }
button, input, select { font:inherit; }
button { cursor:pointer; }
.is-hidden { display:none !important; }

.abel-app {
  position:relative;
  min-height:100dvh;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 105%,rgba(103,245,232,.20),transparent 27%),
    radial-gradient(circle at 88% -5%,rgba(103,87,245,.15),transparent 30%),
    #fff;
}

.abel-app::before {
  position:absolute;
  inset:0;
  pointer-events:none;
  content:"";
  opacity:.32;
  background-image:
    linear-gradient(rgba(35,44,78,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(35,44,78,.035) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(to bottom,black,transparent 70%);
}

.topbar {
  position:relative;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:min(1320px,calc(100% - 64px));
  margin:0 auto;
  padding:26px 0;
}

.brand { display:flex; align-items:center; gap:12px; }
.brand-mark {
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border:1px solid rgba(255,255,255,.55);
  border-radius:14px;
  color:#fff;
  background:linear-gradient(145deg,#8ef9e8 0%,#526cf4 52%,#4a2fc5 100%);
  box-shadow:0 10px 30px rgba(78,91,222,.22);
  font-weight:800;
}
.brand strong { display:block; font-size:15px; letter-spacing:.03em; }
.brand small { display:block; margin-top:2px; color:var(--muted); font-size:11px; }
.top-actions { display:flex; align-items:center; gap:10px; }
.mode-badge {
  padding:8px 11px;
  border:1px solid rgba(103,87,245,.18);
  border-radius:999px;
  color:#5b4dd3;
  background:#f4f2ff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
}
.icon-button, .text-button {
  min-width:42px;
  height:42px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:13px;
  color:var(--ink);
  background:rgba(255,255,255,.76);
  backdrop-filter:blur(14px);
}
.icon-button { display:grid; padding:0; place-items:center; font-size:25px; }
.icon-button svg { width:20px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
.icon-button.is-muted { color:#98a2b3; }
.icon-button.dark { color:#fff; border-color:rgba(255,255,255,.2); background:rgba(0,0,0,.28); }
.text-button { font-size:12px; font-weight:700; }

.idle-screen {
  position:relative;
  z-index:1;
  display:flex;
  min-height:calc(100dvh - 96px);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:32px;
  transform:translateY(-34px);
}

.orb-button, .active-orb {
  position:relative;
  display:grid;
  width:210px;
  height:210px;
  padding:0;
  place-items:center;
  border:0;
  border-radius:50%;
  background:transparent;
  isolation:isolate;
}

.orb-core {
  position:relative;
  z-index:3;
  display:block;
  width:118px;
  height:118px;
  overflow:hidden;
  border-radius:45% 55% 52% 48% / 47% 43% 57% 53%;
  background:
    radial-gradient(circle at 31% 24%,#fff 0 5%,rgba(255,255,255,.92) 6%,transparent 19%),
    radial-gradient(circle at 27% 28%,#95fff0 0 9%,transparent 34%),
    linear-gradient(135deg,#63efd6 4%,#5b8cf4 45%,#6c49f3 70%,#35208d 100%);
  box-shadow:
    inset -18px -18px 35px rgba(28,15,117,.35),
    inset 12px 12px 30px rgba(255,255,255,.35),
    0 22px 50px rgba(74,82,214,.32),
    0 0 55px rgba(98,235,218,.18);
  animation:orbMorph 7s ease-in-out infinite,orbFloat 4.2s ease-in-out infinite;
}
.orb-highlight { position:absolute; inset:18px auto auto 23px; width:22px; height:12px; border-radius:50%; background:rgba(255,255,255,.74); filter:blur(4px); transform:rotate(-28deg); }
.orb-ripple { position:absolute; z-index:1; border:1px solid rgba(86,139,226,.28); border-radius:50%; animation:ripple 3.2s ease-out infinite; }
.ripple-one { width:150px; height:150px; }
.ripple-two { width:180px; height:180px; animation-delay:.8s; }
.ripple-three { width:210px; height:210px; animation-delay:1.6s; }
.orb-button:hover .orb-core { filter:saturate(1.12) brightness(1.04); }
.orb-button:focus-visible { outline:3px solid rgba(103,87,245,.32); outline-offset:8px; }
.abel-app.is-speaking .orb-core { animation-duration:2.2s,.9s; filter:saturate(1.2); }
.abel-app.is-listening .orb-core { box-shadow:0 0 0 12px rgba(103,245,232,.14),0 26px 70px rgba(75,92,228,.48); }

.idle-label { margin:20px 0 0; font-size:14px; font-weight:700; letter-spacing:.02em; }
.idle-note { margin:7px 0 0; color:var(--muted); font-size:12px; }

.experience {
  position:relative;
  z-index:2;
  width:min(1180px,calc(100% - 48px));
  margin:8px auto 60px;
  animation:enter .55s cubic-bezier(.16,1,.3,1) both;
}
.assistant-stage { display:flex; align-items:center; gap:26px; padding:12px 8px 26px; }
.active-orb { width:118px; height:118px; flex:0 0 118px; }
.active-orb .orb-core { width:72px; height:72px; }
.active-orb .ripple-one { width:92px; height:92px; }
.active-orb .ripple-two { width:116px; height:116px; }
.assistant-copy { min-width:0; }
.eyebrow { display:flex; align-items:center; gap:8px; margin:0 0 8px; color:#6658e9; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.status-dot { width:7px; height:7px; border-radius:50%; background:#55d8bb; box-shadow:0 0 0 5px rgba(85,216,187,.13); }
.assistant-copy h1 { max-width:850px; margin:0; font-size:clamp(30px,4.2vw,56px); line-height:1.03; letter-spacing:-.05em; }
.assistant-detail { max-width:760px; margin:12px 0 0; color:var(--muted); font-size:clamp(14px,1.8vw,18px); line-height:1.55; }

.panel {
  min-height:390px;
  overflow:hidden;
  border:1px solid rgba(103,87,245,.09);
  border-radius:30px;
  background:rgba(255,255,255,.82);
  box-shadow:var(--shadow);
  backdrop-filter:blur(22px);
}
.screen { padding:30px; animation:screenEnter .35s ease both; }
.screen-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.screen-head h2 { margin:0; font-size:clamp(22px,3vw,32px); letter-spacing:-.035em; }
.screen-head p { margin:8px 0 0; color:var(--muted); font-size:13px; }
.back-button { border:0; color:#5a4ee0; background:transparent; font-size:13px; font-weight:700; }

.action-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.choice-card {
  position:relative;
  min-height:150px;
  padding:22px;
  text-align:left;
  border:1px solid var(--line);
  border-radius:22px;
  color:var(--ink);
  background:linear-gradient(150deg,#fff,#f9faff);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.choice-card:hover, .choice-card:focus-visible { transform:translateY(-3px); border-color:rgba(103,87,245,.34); box-shadow:0 18px 36px rgba(48,55,110,.10); outline:none; }
.choice-card.is-selected { color:#fff; border-color:transparent; background:linear-gradient(140deg,#7766f9,#477ff1); box-shadow:0 18px 40px rgba(83,83,224,.25); }
.choice-card .card-icon { display:grid; width:42px; height:42px; margin-bottom:22px; place-items:center; border-radius:14px; color:#5a4ee0; background:#f0efff; font-size:20px; }
.choice-card.is-selected .card-icon { color:#fff; background:rgba(255,255,255,.18); }
.choice-card strong { display:block; font-size:17px; }
.choice-card small { display:block; margin-top:7px; color:var(--muted); line-height:1.45; }
.choice-card.is-selected small { color:rgba(255,255,255,.76); }

.inline-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.pill-choice { min-height:74px; padding:13px; border:1px solid var(--line); border-radius:18px; color:var(--ink); background:#fff; font-weight:700; }
.pill-choice small { display:block; margin-top:5px; color:var(--muted); font-size:11px; font-weight:500; }
.pill-choice:hover, .pill-choice.is-selected { color:#fff; border-color:transparent; background:linear-gradient(135deg,#7160f5,#4e85f4); }
.pill-choice:hover small, .pill-choice.is-selected small { color:rgba(255,255,255,.75); }

.form-box { max-width:640px; margin:0 auto; padding:8px 0 2px; }
.field-label { display:block; margin-bottom:8px; color:#344054; font-size:13px; font-weight:700; }
.code-input {
  width:100%;
  height:74px;
  padding:0 22px;
  border:1px solid rgba(15,23,42,.13);
  border-radius:19px;
  outline:none;
  color:var(--ink);
  background:#fff;
  font-size:30px;
  font-weight:700;
  letter-spacing:.28em;
  text-align:center;
}
.code-input:focus { border-color:#7160f5; box-shadow:0 0 0 5px rgba(113,96,245,.10); }
.button-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.primary-button, .secondary-button, .danger-button {
  min-height:50px;
  padding:0 20px;
  border-radius:15px;
  font-weight:750;
}
.primary-button { border:0; color:#fff; background:linear-gradient(135deg,#6f5cf5,#4985f3); box-shadow:0 12px 26px rgba(77,91,220,.20); }
.secondary-button { border:1px solid var(--line); color:var(--ink); background:#fff; }
.danger-button { border:1px solid rgba(217,72,95,.18); color:var(--danger); background:#fff5f6; }
.full { width:100%; }
.help-text { margin:10px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }

.floor-tabs { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:18px; }
.floor-tab { min-width:96px; padding:11px 14px; border:1px solid var(--line); border-radius:13px; color:var(--muted); background:#fff; font-weight:700; }
.floor-tab.is-selected { color:#fff; border-color:transparent; background:#11172a; }
.map-shell { position:relative; padding:24px; border:1px dashed rgba(66,78,120,.22); border-radius:24px; background:linear-gradient(135deg,#fafbff,#f4f8fb); }
.map-shell::before { position:absolute; top:12px; right:16px; content:"CROQUIS DEMOSTRATIVO"; color:#98a2b3; font-size:9px; font-weight:800; letter-spacing:.1em; }
.space-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:10px; }
.space-card { min-height:120px; padding:15px; border:1px solid rgba(15,23,42,.10); border-radius:17px; text-align:left; background:#fff; transition:.18s ease; }
.space-card:hover:not(:disabled) { transform:translateY(-2px); border-color:#7160f5; box-shadow:0 12px 28px rgba(55,64,110,.10); }
.space-card:disabled { cursor:not-allowed; opacity:.5; background:#f1f2f5; }
.space-card.is-selected { color:#fff; border-color:transparent; background:linear-gradient(145deg,#6354ea,#4387ef); }
.space-card strong, .space-card span { display:block; }
.space-card strong { font-size:15px; }
.space-card span { margin-top:7px; color:var(--muted); font-size:11px; }
.space-card.is-selected span { color:rgba(255,255,255,.78); }
.availability { display:inline-flex !important; align-items:center; gap:6px; margin-top:16px !important; font-weight:700; }
.availability::before { width:7px; height:7px; border-radius:50%; background:var(--success); content:""; }
.space-card:disabled .availability::before { background:var(--danger); }

.summary { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; }
.summary-item { padding:16px; border:1px solid var(--line); border-radius:17px; background:#fff; }
.summary-item span { display:block; color:var(--muted); font-size:11px; }
.summary-item strong { display:block; margin-top:5px; font-size:15px; }
.notice { margin:16px 0 0; padding:13px 15px; border-radius:14px; color:#57491d; background:#fff8df; font-size:12px; line-height:1.5; }
.success-mark { display:grid; width:64px; height:64px; margin:0 auto 18px; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(145deg,#5be0c0,#4c83ed); box-shadow:0 15px 35px rgba(58,170,179,.25); font-size:28px; }
.success-screen { max-width:680px; margin:0 auto; padding:12px 0; text-align:center; }
.success-screen h2 { margin:0; font-size:34px; letter-spacing:-.04em; }
.success-screen p { color:var(--muted); line-height:1.55; }
.reservation-code { display:inline-block; margin:8px 0; padding:11px 17px; border-radius:12px; color:#4f46c9; background:#f0efff; font-size:18px; font-weight:800; letter-spacing:.06em; }

.reservation-list { display:grid; gap:10px; }
.reservation-item { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:16px; border:1px solid var(--line); border-radius:17px; background:#fff; }
.reservation-item strong { display:block; }
.reservation-item span { display:block; margin-top:5px; color:var(--muted); font-size:12px; }
.reservation-actions { display:flex; flex-wrap:wrap; gap:7px; }
.mini-button { padding:9px 11px; border:1px solid var(--line); border-radius:10px; color:#5147ca; background:#fff; font-size:11px; font-weight:750; }
.mini-button.danger { color:var(--danger); }
.empty-state { padding:60px 20px; text-align:center; color:var(--muted); }
.loading { display:grid; min-height:270px; place-items:center; color:var(--muted); }
.loading::before { width:34px; height:34px; border:3px solid #eceafa; border-top-color:#6757f5; border-radius:50%; content:""; animation:spin .8s linear infinite; }

.voice-composer { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:18px; color:var(--muted); }
.voice-composer strong, .voice-composer span { display:block; }
.voice-composer strong { color:#344054; font-size:12px; }
.voice-composer span { margin-top:3px; font-size:10px; }
.mic-button { display:grid; width:48px; height:48px; place-items:center; border:1px solid rgba(103,87,245,.16); border-radius:50%; color:#5c50d7; background:#f4f2ff; }
.mic-button svg { width:21px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-width:1.8; }
.mic-button.is-active { color:#fff; background:#5e52e6; box-shadow:0 0 0 8px rgba(94,82,230,.12); animation:micPulse 1.2s ease-in-out infinite; }

.modal { position:fixed; z-index:100; inset:0; display:grid; padding:24px; place-items:center; background:rgba(4,8,22,.70); backdrop-filter:blur(10px); }
.modal-card { width:min(580px,100%); overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:28px; color:#fff; background:#0b1020; box-shadow:0 35px 100px rgba(0,0,0,.42); }
.camera-card { padding:22px; }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.modal-head h2 { margin:0; font-size:27px; letter-spacing:-.04em; }
.modal-copy { margin:10px 0 17px; color:#aeb7cd; font-size:13px; }
.camera-frame { position:relative; overflow:hidden; aspect-ratio:4/3; margin-bottom:14px; border-radius:19px; background:#03050b; }
.camera-frame video { width:100%; height:100%; object-fit:cover; }
.scanner-box { position:absolute; inset:28% 10%; border:2px solid rgba(118,246,225,.85); border-radius:16px; box-shadow:0 0 0 999px rgba(0,0,0,.28); }
.scanner-box::before, .scanner-box::after, .scanner-box span::before, .scanner-box span::after { position:absolute; width:23px; height:23px; border-color:#fff; content:""; }
.scanner-box::before { top:-3px; left:-3px; border-top:4px solid; border-left:4px solid; border-radius:8px 0 0; }
.scanner-box::after { top:-3px; right:-3px; border-top:4px solid; border-right:4px solid; border-radius:0 8px 0 0; }
.scanner-box span::before { bottom:-3px; left:-3px; border-bottom:4px solid; border-left:4px solid; border-radius:0 0 0 8px; }
.scanner-box span::after { right:-3px; bottom:-3px; border-right:4px solid; border-bottom:4px solid; border-radius:0 0 8px; }
.camera-message { position:absolute; right:0; bottom:15px; left:0; text-align:center; color:#fff; font-size:12px; font-weight:700; text-shadow:0 1px 7px #000; }

.toast { position:fixed; z-index:120; right:24px; bottom:24px; max-width:420px; padding:14px 17px; border-radius:14px; color:#fff; background:#11172a; box-shadow:0 16px 50px rgba(14,20,42,.25); font-size:13px; font-weight:650; }
.connection-status { position:fixed; z-index:15; right:18px; bottom:17px; padding:7px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:rgba(255,255,255,.85); font-size:9px; font-weight:700; letter-spacing:.04em; backdrop-filter:blur(10px); }
.connection-status.is-online { color:#087d5c; }
.connection-status.is-local { color:#9a5a12; }
.connection-status.is-error { color:#b4233b; }

@keyframes orbMorph { 0%,100% { border-radius:45% 55% 52% 48% / 47% 43% 57% 53%; } 33% { border-radius:56% 44% 41% 59% / 55% 53% 47% 45%; } 66% { border-radius:48% 52% 61% 39% / 40% 58% 42% 60%; } }
@keyframes orbFloat { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-7px) scale(1.035); } }
@keyframes ripple { 0% { opacity:.55; transform:scale(.72); } 80%,100% { opacity:0; transform:scale(1.12); } }
@keyframes enter { from { opacity:0; transform:translateY(25px); } to { opacity:1; transform:none; } }
@keyframes screenEnter { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes micPulse { 50% { box-shadow:0 0 0 13px rgba(94,82,230,.07); } }

@media (max-width:850px) {
  .topbar, .experience { width:calc(100% - 28px); }
  .action-grid { grid-template-columns:1fr; }
  .choice-card { min-height:118px; }
  .inline-grid, .space-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .summary { grid-template-columns:1fr; }
  .screen { padding:22px; }
}

@media (max-width:560px) {
  .topbar { padding:16px 0; }
  .brand small, .mode-badge { display:none; }
  .experience { margin-top:0; }
  .assistant-stage { align-items:flex-start; gap:12px; padding-bottom:16px; }
  .active-orb { width:76px; height:76px; flex-basis:76px; }
  .active-orb .orb-core { width:50px; height:50px; }
  .active-orb .ripple-one { width:64px; height:64px; }
  .active-orb .ripple-two { width:76px; height:76px; }
  .assistant-copy h1 { font-size:30px; }
  .assistant-detail { margin-top:8px; font-size:13px; }
  .panel { min-height:420px; border-radius:22px; }
  .screen { padding:18px; }
  .screen-head { align-items:flex-start; flex-direction:column-reverse; }
  .inline-grid, .space-grid { grid-template-columns:1fr 1fr; gap:9px; }
  .map-shell { padding:17px 12px; }
  .reservation-item { grid-template-columns:1fr; }
  .connection-status { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}