:root {
  --ink: #243441;
  --muted: #71808d;
  --soft-muted: #9aa6b0;
  --line: #e3e8ee;
  --canvas: #f5f8fa;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --green: #159cad;
  --green-dark: #24475e;
  --green-soft: #e1f5f7;
  --mint: #ccecf1;
  --orange: #f19a63;
  --orange-soft: #fff0e6;
  --red: #c94e53;
  --red-soft: #fbe8e7;
  --blue: #4776a7;
  --blue-soft: #e7f0f7;
  --purple: #8874d2;
  --purple-soft: #efebfc;
  --shadow: 0 14px 38px rgba(46, 70, 91, .08);
  --shadow-lg: 0 28px 70px rgba(35, 57, 76, .2);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { background: var(--canvas); }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { display: block; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 246px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; z-index: 30; background: var(--surface); border-right: 1px solid var(--line); padding: 26px 18px 18px; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 30px; }
.brand-mark { width: 37px; height: 37px; border-radius: 12px; color: white; background: var(--green-dark); display: grid; place-items: center; }
.brand-mark svg { width: 23px; height: 23px; }
.brand strong { display: block; font: 700 11px/1.1 "Manrope", sans-serif; letter-spacing: .09em; white-space: nowrap; }
.brand span { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.nav-list { display: flex; flex-direction: column; gap: 4px; }
.nav-item { position: relative; width: 100%; display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 12px; border: 0; background: transparent; color: #60706d; padding: 11px 12px; min-height: 44px; border-radius: 11px; cursor: pointer; text-align: left; font-size: 14px; font-weight: 500; transition: .18s ease; }
.nav-item:hover { background: #f4f7f5; color: var(--ink); }
.nav-item.active { background: var(--green-soft); color: var(--green-dark); font-weight: 600; }
.nav-item.active::before { content: ""; position: absolute; left: -18px; width: 3px; height: 23px; border-radius: 0 4px 4px 0; background: var(--green); }
.nav-item svg { width: 19px; height: 19px; }
.nav-count { min-width: 23px; height: 23px; border-radius: 8px; display: grid; place-items: center; font-size: 11px; background: var(--surface-soft); color: var(--muted); }
.nav-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.nav-divider { height: 1px; background: var(--line); margin: 16px 10px 14px; }
.nav-divider.compact { margin-block: 10px 8px; }
.nav-label { margin: 0 12px 7px; font-size: 9px; letter-spacing: .13em; font-weight: 700; color: var(--soft-muted); }
.studio-link { color: var(--green); }
.new-badge { padding: 3px 5px; border-radius: 5px; font-size: 8px; letter-spacing: .05em; font-weight: 700; color: var(--green); background: var(--mint); }
.sidebar-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 14px 8px 0; border-top: 1px solid var(--line); }
.clinic-avatar, .doctor-avatar, .patient-avatar { flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; font-size: 12px; font-weight: 700; }
.clinic-avatar { width: 36px; height: 36px; color: #805735; background: #f2dbc6; }
.clinic-copy { min-width: 0; flex: 1; }
.clinic-copy strong, .clinic-copy span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clinic-copy strong { font-size: 11px; }
.clinic-copy span { margin-top: 3px; color: var(--muted); font-size: 10px; }

.main-area { min-width: 0; }
.topbar { height: 74px; padding: 0 36px; background: rgba(244, 246, 243, .92); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(220, 226, 222, .75); display: flex; align-items: center; justify-content: space-between; gap: 24px; position: sticky; top: 0; z-index: 20; }
.searchbox { width: min(430px, 45vw); display: flex; align-items: center; gap: 10px; color: var(--soft-muted); }
.searchbox svg { width: 19px; height: 19px; }
.searchbox input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 13px; }
.searchbox input::placeholder { color: #9aa6a2; }
.searchbox kbd { padding: 3px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: #87938f; font-size: 10px; box-shadow: 0 1px 1px rgba(20,30,25,.03); }
.searchbox { position: relative; }
.search-results { position: absolute; z-index: 80; width: min(480px, 80vw); top: 39px; left: 0; padding: 8px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: white; box-shadow: var(--shadow-lg); }
.search-result-head { padding: 7px 9px; color: var(--soft-muted); font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.search-results button { width: 100%; padding: 9px; border: 0; border-radius: 10px; display: grid; grid-template-columns: 34px 1fr 16px; align-items: center; gap: 9px; background: white; cursor: pointer; text-align: left; }
.search-results button:hover { background: var(--green-soft); }
.search-results button > svg { width: 14px; color: var(--muted); }
.search-results strong, .search-results small { display: block; }
.search-results strong { font-size: 9px; }
.search-results small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.search-results .patient-avatar, .search-results .product-symbol { width: 34px; height: 34px; }
.search-empty { padding: 22px 10px; color: var(--muted); font-size: 9px; text-align: center; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.icon-button { width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); background: var(--surface); border-radius: 11px; display: grid; place-items: center; cursor: pointer; }
.icon-button:hover { background: var(--surface-soft); }
.icon-button svg { width: 18px; height: 18px; }
.icon-button.small { width: 28px; height: 28px; border: 0; background: transparent; color: var(--muted); }
.notification-button { margin-right: 5px; position: relative; }
.notification-button i { width: 7px; height: 7px; background: var(--orange); border: 2px solid var(--canvas); border-radius: 50%; position: absolute; top: 7px; right: 7px; }
.notification-list { display: flex; flex-direction: column; gap: 8px; }
.notification-list button { padding: 11px; border: 1px solid var(--line); border-radius: 12px; display: grid; grid-template-columns: 38px 1fr 16px; align-items: center; gap: 10px; background: white; cursor: pointer; text-align: left; }
.notification-list button:hover { background: var(--surface-soft); }
.notification-list .metric-icon { width: 38px; height: 38px; }
.notification-list button > svg { width: 14px; color: var(--muted); }
.notification-list strong, .notification-list small { display: block; }
.notification-list strong { font-size: 10px; }
.notification-list small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.doctor-avatar { width: 36px; height: 36px; color: var(--green-dark); background: var(--mint); }
.doctor-copy strong, .doctor-copy span { display: block; }
.doctor-copy strong { font-size: 12px; }
.doctor-copy span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.doctor-chevron svg { width: 15px; height: 15px; color: var(--muted); }
.mobile-menu { display: none; }

.page-container { max-width: 1500px; margin: 0 auto; padding: 31px 36px 50px; }
.page-head { margin-bottom: 26px; display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; }
.page-head h1 { margin: 0; font: 700 clamp(25px, 2vw, 32px)/1.12 "Manrope", sans-serif; letter-spacing: -.03em; }
.page-head p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.head-actions { display: flex; align-items: center; gap: 10px; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 9px; color: var(--green); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: #4eb486; }
.button { min-height: 41px; padding: 0 15px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.button:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(31,61,57,.07); }
.button svg { width: 16px; height: 16px; }
.button.primary { color: white; border-color: var(--green-dark); background: var(--green-dark); }
.button.primary:hover { background: #22534e; }
.button.ghost { border-color: transparent; background: transparent; }
.button.soft { border-color: transparent; background: var(--green-soft); color: var(--green-dark); }
.button.danger-soft { border-color: transparent; background: var(--red-soft); color: var(--red); }
.button.full { width: 100%; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-bottom: 18px; }
.metric-card, .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 2px 2px rgba(20,50,44,.015); }
.metric-card { padding: 20px; display: grid; grid-template-columns: 42px 1fr auto; grid-template-rows: auto auto; gap: 9px 13px; align-items: center; }
.metric-icon { grid-row: 1 / span 2; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; }
.metric-icon svg { width: 20px; height: 20px; }
.metric-icon.green { background: var(--green-soft); color: var(--green); }
.metric-icon.orange { background: var(--orange-soft); color: #c26d38; }
.metric-icon.blue { background: var(--blue-soft); color: var(--blue); }
.metric-icon.purple { background: var(--purple-soft); color: var(--purple); }
.metric-label { color: var(--muted); font-size: 11px; }
.metric-value { font: 700 23px/1 "Manrope", sans-serif; letter-spacing: -.03em; }
.metric-trend { align-self: end; padding: 3px 6px; border-radius: 6px; color: var(--green); background: var(--green-soft); font-size: 9px; font-weight: 700; }
.metric-trend.warn { color: #aa5b2d; background: var(--orange-soft); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, .9fr); gap: 18px; }
.card { padding: 21px; }
.card-head { margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.card-title { margin: 0; font: 700 15px/1.2 "Manrope", sans-serif; letter-spacing: -.015em; }
.card-subtitle { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.text-link { border: 0; background: transparent; color: var(--green); cursor: pointer; font-size: 11px; font-weight: 700; padding: 4px; }
.appointment-list { display: flex; flex-direction: column; }
.appointment-row { display: grid; grid-template-columns: 55px 4px 1fr auto; gap: 15px; align-items: center; padding: 10px 0; border-bottom: 1px solid #edf0ee; }
.appointment-row:last-child { border: 0; }
.appointment-time strong, .appointment-time span { display: block; }
.appointment-time strong { font-size: 12px; }
.appointment-time span { margin-top: 3px; color: var(--soft-muted); font-size: 9px; }
.appointment-line { align-self: stretch; min-height: 46px; border-radius: 5px; background: var(--green); }
.appointment-line.orange { background: var(--orange); }
.appointment-line.blue { background: #6d99c2; }
.appointment-line.purple { background: #9583c5; }
.appointment-person { min-width: 0; display: flex; align-items: center; gap: 10px; }
.patient-avatar { width: 36px; height: 36px; border-radius: 50%; background: #e8efec; color: var(--green-dark); }
.appointment-person strong, .appointment-person span { display: block; }
.appointment-person strong { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appointment-person span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 20px; font-size: 9px; font-weight: 700; white-space: nowrap; }
.status-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-pill.confirmed { color: var(--green); background: var(--green-soft); }
.status-pill.waiting { color: #bd6a37; background: var(--orange-soft); }
.status-pill.scheduled { color: var(--blue); background: var(--blue-soft); }
.status-pill.cancelled { color: var(--muted); background: #eef1f3; }
.status-pill.danger { color: var(--red); background: var(--red-soft); }
.status-pill.done { color: #4a6a7d; background: #e9eff3; }
.inventory-alerts { display: flex; flex-direction: column; gap: 12px; }
.inventory-alert { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 11px; padding: 12px; background: var(--surface-soft); border-radius: 13px; }
.inventory-thumb { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: var(--surface); border: 1px solid var(--line); color: var(--green); }
.inventory-thumb svg { width: 20px; height: 20px; }
.inventory-alert strong, .inventory-alert span { display: block; }
.inventory-alert strong { font-size: 11px; }
.inventory-alert span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.stock-number { text-align: right; }
.stock-number b { display: block; color: var(--red); font-size: 12px; }
.stock-number small { color: var(--soft-muted); font-size: 8px; }
.quick-card { overflow: hidden; margin-top: 18px; padding: 0; display: grid; grid-template-columns: 1fr 180px; color: white; background: var(--green-dark); border: 0; }
.quick-copy { padding: 23px; }
.quick-copy .eyebrow { color: #9ed1c7; }
.quick-copy h3 { margin: 0 0 7px; font: 700 18px/1.25 "Manrope", sans-serif; }
.quick-copy p { max-width: 520px; margin: 0 0 17px; color: #b9d0cc; font-size: 11px; line-height: 1.6; }
.quick-card .button { border-color: rgba(255,255,255,.17); color: white; background: rgba(255,255,255,.1); }
.quick-visual { min-height: 160px; position: relative; overflow: hidden; background: #24534e; }
.quick-visual::before, .quick-visual::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }
.quick-visual::before { width: 170px; height: 170px; right: -20px; top: -25px; }
.quick-visual::after { width: 100px; height: 100px; right: 65px; bottom: -35px; }
.smile-orbit { position: absolute; inset: 0; display: grid; place-items: center; }
.smile-orbit svg { width: 68px; height: 68px; color: #cae7df; }

/* Agenda */
.calendar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; }
.calendar-card { padding: 0; overflow: hidden; }
.calendar-toolbar { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.month-nav { display: flex; align-items: center; gap: 10px; }
.month-nav h2 { min-width: 150px; margin: 0; font: 700 16px/1 "Manrope", sans-serif; text-align: center; }
.segmented { display: inline-flex; align-items: center; padding: 3px; border-radius: 10px; background: var(--canvas); }
.segmented button { height: 31px; padding: 0 11px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; }
.segmented button.active { color: var(--ink); background: var(--surface); box-shadow: 0 2px 6px rgba(30,50,45,.08); font-weight: 700; }
.week-grid { min-width: 720px; display: grid; grid-template-columns: 63px repeat(6, minmax(105px, 1fr)); position: relative; }
.calendar-scroll { overflow-x: auto; }
.calendar-cell { min-height: 62px; border-right: 1px solid #edf0ee; border-bottom: 1px solid #edf0ee; padding: 6px; position: relative; }
.calendar-day { min-height: 67px; padding: 13px 6px; text-align: center; border-right: 1px solid #edf0ee; border-bottom: 1px solid var(--line); }
.calendar-day span, .calendar-day strong { display: block; }
.calendar-day span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.calendar-day strong { width: 29px; height: 29px; margin: 5px auto 0; display: grid; place-items: center; font-size: 12px; }
.calendar-day.today strong { border-radius: 50%; color: white; background: var(--green); }
.time-cell { min-height: 62px; padding: 7px 9px; color: var(--soft-muted); font-size: 9px; text-align: right; border-right: 1px solid var(--line); border-bottom: 1px solid #edf0ee; }
.cal-event { min-height: 48px; padding: 7px 8px; border-radius: 8px; border-left: 3px solid var(--green); background: var(--green-soft); overflow: hidden; cursor: pointer; }
.cal-event.orange { border-color: var(--orange); background: var(--orange-soft); }
.cal-event.blue { border-color: #6f9eca; background: var(--blue-soft); }
.cal-event.purple { border-color: #9381c0; background: var(--purple-soft); }
.cal-event strong, .cal-event span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-event strong { font-size: 9px; }
.cal-event span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.agenda-side { display: flex; flex-direction: column; gap: 15px; }
.agenda-side .card { padding: 18px; }
.mini-date { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 14px; }
.mini-date span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 7px; font-size: 9px; color: var(--muted); }
.mini-date .week { font-size: 8px; font-weight: 700; color: var(--soft-muted); }
.mini-date .selected { color: white; background: var(--green); }
.legend { margin-top: 15px; display: flex; flex-direction: column; gap: 10px; }
.legend-item { display: flex; align-items: center; gap: 9px; font-size: 10px; color: var(--muted); }
.legend-item i { width: 8px; height: 8px; border-radius: 3px; background: var(--green); }
.legend-item i.orange { background: var(--orange); }
.legend-item i.blue { background: #6f9eca; }
.legend-item i.purple { background: #9381c0; }
.availability-card { color: white; background: var(--green-dark); border: 0; }
.availability-card .card-subtitle { color: #b4cfca; line-height: 1.5; }
.availability-card .button { margin-top: 15px; color: var(--green-dark); background: white; border: 0; }

/* Tables and records */
.filter-row { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.filter-search { min-width: 250px; flex: 1; height: 41px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); display: flex; align-items: center; gap: 9px; }
.filter-search svg { width: 16px; color: var(--muted); }
.filter-search input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 11px; }
.select-control { height: 41px; padding: 0 34px 0 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--muted); font-size: 11px; }
.table-card { padding: 0; overflow: hidden; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: 13px 18px; color: var(--soft-muted); background: #fafbfa; border-bottom: 1px solid var(--line); text-align: left; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.data-table td { padding: 14px 18px; border-bottom: 1px solid #edf0ee; font-size: 11px; }
.data-table tbody tr { cursor: pointer; }
.data-table tbody tr:hover { background: #fbfcfb; }
.data-table tbody tr:last-child td { border: 0; }
.person-cell { display: flex; align-items: center; gap: 10px; }
.person-cell strong, .person-cell span { display: block; }
.person-cell strong { font-size: 11px; }
.person-cell span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.contact-cell span { display: block; }
.contact-cell span + span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.plan-tag { padding: 5px 8px; border-radius: 7px; color: var(--green); background: var(--green-soft); font-size: 9px; font-weight: 700; }
.plan-tag.orange { color: #b26130; background: var(--orange-soft); }
.table-footer { padding: 13px 18px; display: flex; justify-content: space-between; color: var(--muted); background: #fafbfa; border-top: 1px solid var(--line); font-size: 9px; }

.profile-grid { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 18px; }
.profile-card { text-align: center; }
.profile-avatar { width: 78px; height: 78px; margin: 5px auto 13px; border-radius: 24px; display: grid; place-items: center; color: var(--green-dark); background: var(--mint); font: 700 22px/1 "Manrope", sans-serif; }
.profile-card h2 { margin: 0; font: 700 18px/1.2 "Manrope", sans-serif; }
.profile-card > p { color: var(--muted); font-size: 11px; }
.profile-facts { margin: 18px 0; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); }
.profile-facts strong, .profile-facts span { display: block; }
.profile-facts strong { font-size: 12px; }
.profile-facts span { margin-top: 4px; color: var(--muted); font-size: 8px; }
.contact-list { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.contact-item { display: flex; gap: 9px; color: var(--muted); font-size: 10px; }
.contact-item svg { width: 15px; color: var(--green); }
.record-stack { display: flex; flex-direction: column; gap: 18px; }
.record-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.record-tabs button { padding: 0 13px 13px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; }
.record-tabs button.active { color: var(--green); border-bottom: 2px solid var(--green); font-weight: 700; }
.record-tab-body { padding-top: 20px; }
.odontogram-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 22px; align-items: start; }
.tooth-arch { padding: 17px; border-radius: 15px; background: var(--surface-soft); }
.tooth-row { display: flex; justify-content: center; gap: 6px; }
.tooth-row + .tooth-row { margin-top: 17px; }
.tooth-button { width: 33px; height: 43px; padding: 0; border: 1px solid #cfd9d5; border-radius: 45% 45% 38% 38%; background: white; color: var(--muted); cursor: pointer; position: relative; font-size: 8px; }
.tooth-row.lower .tooth-button { border-radius: 38% 38% 45% 45%; }
.tooth-button:hover { border-color: var(--green); }
.tooth-button.treated { color: var(--green); border-color: var(--green); background: var(--green-soft); }
.tooth-button.watch { color: #ad642f; border-color: var(--orange); background: var(--orange-soft); }
.tooth-button.missing { opacity: .42; background: repeating-linear-gradient(45deg, #fff, #fff 4px, #e1e6e3 4px, #e1e6e3 6px); }
.tooth-button span { position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); }
.tooth-row.lower .tooth-button span { top: -13px; bottom: auto; }
.clinical-summary { display: flex; flex-direction: column; gap: 11px; }
.clinical-summary h3 { margin: 0; font: 700 13px/1.2 "Manrope", sans-serif; }
.finding { padding: 11px; border: 1px solid var(--line); border-radius: 11px; }
.finding strong, .finding span { display: block; }
.finding strong { font-size: 10px; }
.finding span { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.odontogram-legend { margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 7px; }
.odontogram-legend span { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); background: white; font-size: 8px; }
.odontogram-legend i, .finding-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.odontogram-legend i.caries, .finding-dot.caries { background: #e8787a; }
.odontogram-legend i.restored, .finding-dot.restored { background: var(--green); }
.odontogram-legend i.crown, .finding-dot.crown { background: #e0b84e; }
.odontogram-legend i.endo, .finding-dot.endo { background: var(--purple); }
.odontogram-legend i.implant, .finding-dot.implant { background: var(--blue); }
.odontogram-legend i.missing, .finding-dot.missing { background: #aeb9c2; }
.arch-label { margin-bottom: 22px; color: var(--muted); font-size: 8px; text-align: center; text-transform: uppercase; letter-spacing: .08em; }
.arch-label.lower-label { margin: 22px 0 0; text-transform: none; letter-spacing: 0; }
.arch-divider { margin: 23px 5px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; color: var(--soft-muted); font-size: 7px; }
.arch-divider i { height: 1px; background: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent); }
.tooth-button > b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 7px; letter-spacing: -.05em; }
.tooth-button.caries { color: #b64349; border-color: #df7478; background: #fcebec; }
.tooth-button.restored { color: #087d8c; border-color: #55bdc7; background: var(--green-soft); }
.tooth-button.crown { color: #9b7412; border-color: #e1ba4e; background: #fff7d9; }
.tooth-button.endo { color: #6f5bb9; border-color: #9c8ae0; background: var(--purple-soft); }
.tooth-button.implant { color: #38658f; border-color: #6f99be; background: var(--blue-soft); }
.tooth-button.healthy { color: #4e9a6c; border-color: #85c79d; background: #edf9f1; }
.odontogram-summary { min-width: 0; }
.odontogram-summary .card-head { align-items: flex-start; }
.odontogram-summary .card-head p { margin: 4px 0 0; color: var(--muted); font-size: 8px; }
.odontogram-detail-list { max-height: 310px; display: flex; flex-direction: column; gap: 7px; overflow-y: auto; }
.finding-button { width: 100%; display: grid; grid-template-columns: 8px 1fr 13px; align-items: start; gap: 8px; color: var(--ink); background: white; cursor: pointer; text-align: left; }
.finding-button:hover { border-color: #b9dce1; background: #f8fcfd; }
.finding-button > svg { width: 13px; margin-top: 3px; color: var(--soft-muted); }
.finding-button span { margin: 0; }
.finding-button small, .finding-button em { display: block; }
.finding-button small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.finding-button em { margin-top: 5px; color: var(--soft-muted); font-size: 7px; font-style: normal; line-height: 1.35; }
.surface-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.surface-button { min-height: 61px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: white; cursor: pointer; }
.surface-button:hover, .surface-button.active { color: var(--purple); border-color: #b7a9e9; background: var(--purple-soft); }
.surface-button b, .surface-button span { display: block; }
.surface-button b { font-size: 13px; }
.surface-button span { margin-top: 4px; font-size: 7px; }
.empty-message.compact { padding: 18px 10px; font-size: 9px; }
.purchase-history { display: flex; flex-direction: column; gap: 17px; }
.purchase-summary { padding: 14px; border-radius: 14px; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 15px; background: linear-gradient(135deg, var(--green-soft), #f4f1ff); }
.purchase-summary span, .purchase-summary strong, .purchase-summary small { display: block; }
.purchase-summary span { color: var(--muted); font-size: 8px; }
.purchase-summary strong { margin-top: 4px; font: 700 15px/1.2 "Manrope", sans-serif; }
.purchase-summary small { margin-top: 3px; color: var(--soft-muted); font-size: 7px; }
.sale-receipt { padding: 4px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.sale-receipt > div { padding: 13px; border-radius: 11px; background: var(--surface-soft); }
.sale-receipt span, .sale-receipt strong { display: block; }
.sale-receipt span { color: var(--muted); font-size: 8px; }
.sale-receipt strong { margin-top: 5px; font-size: 10px; }
.sale-receipt .sale-total { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; color: white; background: var(--green-dark); }
.sale-receipt .sale-total span { color: #c8dfe5; }
.sale-receipt .sale-total strong { margin: 0; font-size: 20px; }

/* WhatsApp appointment bot demo */
.bot-layout { display: grid; grid-template-columns: minmax(480px, 1fr) minmax(310px, 390px); gap: 20px; align-items: start; }
.phone-shell { min-height: 650px; border: 1px solid #d9e3e7; border-radius: 22px; display: grid; grid-template-rows: auto minmax(360px, 1fr) auto auto; overflow: hidden; background: #eef4f3; box-shadow: var(--shadow); }
.chat-header { min-height: 69px; padding: 11px 16px; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; color: white; background: linear-gradient(120deg, #24475e, #2d5b70); }
.whatsapp-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--green-dark); background: #dff7f6; }
.whatsapp-avatar svg { width: 21px; }
.chat-header strong, .chat-header span { display: block; }
.chat-header strong { font-size: 12px; }
.chat-header span { margin-top: 4px; color: #c5dbe0; font-size: 8px; }
.chat-header span i { width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; display: inline-block; background: #65d8a0; }
.chat-secure { display: flex; align-items: center; gap: 5px; color: #c5dbe0; font-size: 7px; font-weight: 700; }
.chat-secure svg { width: 13px; }
.chat-body { padding: 19px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; background-color: #edf3f1; background-image: radial-gradient(rgba(36,71,94,.055) 1px, transparent 1px); background-size: 18px 18px; }
.chat-day { align-self: center; padding: 4px 8px; border-radius: 6px; color: #76878b; background: rgba(255,255,255,.78); font-size: 7px; font-weight: 700; }
.chat-bubble { position: relative; max-width: min(78%, 470px); padding: 10px 12px 18px; border-radius: 5px 13px 13px 13px; color: #34444b; background: white; box-shadow: 0 2px 4px rgba(34,67,76,.07); font-size: 11px; line-height: 1.45; white-space: pre-wrap; }
.chat-bubble.user { margin-left: auto; border-radius: 13px 5px 13px 13px; background: #ddf8f2; }
.chat-bubble time { position: absolute; right: 7px; bottom: 4px; color: #8ba09f; font-size: 6px; }
.chat-bubble.user time { color: #4a9ca6; }
.quick-replies { min-height: 50px; padding: 8px 14px; display: flex; align-items: center; gap: 7px; overflow-x: auto; background: #f8fbfa; border-top: 1px solid #dfe8e6; }
.quick-replies:empty { min-height: 10px; padding: 0; }
.quick-replies button { min-height: 32px; padding: 0 11px; border: 1px solid #80cbd0; border-radius: 18px; color: #167f8a; background: white; cursor: pointer; font-size: 9px; font-weight: 600; white-space: nowrap; }
.quick-replies button:hover { color: white; background: var(--green); }
.bot-compose { min-height: 59px; padding: 9px 12px; display: grid; grid-template-columns: 32px 1fr 38px; align-items: center; gap: 8px; background: white; }
.bot-compose input { height: 39px; padding: 0 13px; border: 1px solid var(--line); border-radius: 20px; outline: 0; background: var(--surface-soft); font-size: 10px; }
.bot-compose input:focus { border-color: #80cbd0; background: white; }
.bot-compose button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: transparent; cursor: pointer; }
.bot-compose button[type="submit"] { width: 38px; height: 38px; color: white; background: var(--green); }
.bot-compose svg { width: 15px; }
.bot-side { display: flex; flex-direction: column; gap: 13px; }
.bot-sync-card, .bot-agenda-card { padding: 17px; }
.sync-status { margin-bottom: 15px; padding: 10px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; background: var(--green-soft); }
.sync-status span { color: var(--green); font-size: 7px; font-weight: 700; letter-spacing: .05em; }
.sync-status span i { width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; display: inline-block; background: #3bbb7d; box-shadow: 0 0 0 3px rgba(59,187,125,.13); }
.sync-status b { color: var(--green-dark); font-size: 8px; }
.bot-slot-list { margin-top: 12px; display: flex; flex-direction: column; }
.bot-slot { padding: 9px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.bot-slot strong, .bot-slot span { display: block; }
.bot-slot strong { font-size: 9px; text-transform: capitalize; }
.bot-slot span { margin-top: 3px; color: var(--muted); font-size: 7px; }
.bot-slot > i { padding: 4px 6px; border-radius: 6px; color: var(--green); background: var(--green-soft); font-size: 6px; font-style: normal; font-weight: 700; }
.bot-upcoming { margin-top: 6px; display: flex; flex-direction: column; }
.bot-upcoming > div { padding: 9px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 8px; }
.bot-upcoming time { color: var(--muted); font-size: 7px; text-transform: capitalize; }
.bot-upcoming time b, .bot-upcoming strong, .bot-upcoming small { display: block; }
.bot-upcoming time b { margin-top: 2px; color: var(--ink); font-size: 10px; }
.bot-upcoming strong { font-size: 8px; }
.bot-upcoming small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.bot-upcoming > div > i { padding: 3px 5px; border-radius: 6px; color: #a96834; background: var(--orange-soft); font-size: 6px; font-style: normal; }
.bot-upcoming > div > i.confirmed { color: var(--green); background: var(--green-soft); }
.bot-capabilities { padding: 16px; border-radius: 15px; display: flex; flex-direction: column; gap: 8px; color: #d4e4e8; background: var(--green-dark); }
.bot-capabilities strong { margin-bottom: 2px; color: white; font-size: 10px; }
.bot-capabilities span { display: flex; align-items: center; gap: 7px; font-size: 8px; }
.bot-capabilities svg { width: 13px; color: #73d8d8; }
.file-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.clinical-file { overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: white; cursor: pointer; text-align: left; }
.clinical-file:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.xray-preview { height: 125px; display: grid; place-items: center; color: #d6e2df; background: #23302f; position: relative; overflow: hidden; }
.xray-preview::before, .xray-preview::after { content: ""; position: absolute; width: 105px; height: 58px; border: 5px dotted rgba(226,239,235,.38); border-radius: 50%; }
.xray-preview::before { transform: translateY(-16px); }
.xray-preview::after { transform: translateY(21px); }
.xray-preview svg { width: 38px; opacity: .65; z-index: 1; }
.photo-preview { background: #e8ddd2; }
.photo-preview::before { width: 120px; height: 35px; border: 9px solid rgba(130,71,64,.3); background: #f6f3ed; }
.photo-preview::after { display: none; }
.clinical-file-copy { padding: 12px; }
.clinical-file-copy strong, .clinical-file-copy span { display: block; }
.clinical-file-copy strong { font-size: 10px; }
.clinical-file-copy span { margin-top: 4px; color: var(--muted); font-size: 8px; }
.drop-file { min-height: 199px; border: 1px dashed #b7c6c1; border-radius: 14px; display: grid; place-items: center; color: var(--green); background: var(--surface-soft); }
.drop-file div { text-align: center; }
.drop-file svg { width: 24px; margin: 0 auto 8px; }
.drop-file strong, .drop-file span { display: block; }
.drop-file strong { font-size: 10px; }
.drop-file span { margin-top: 4px; color: var(--muted); font-size: 8px; }
.treatment-hero { display: grid; grid-template-columns: 1fr 190px; gap: 20px; }
.treatment-progress { height: 7px; margin: 14px 0 8px; border-radius: 8px; background: #edf1ef; overflow: hidden; }
.treatment-progress i { display: block; width: 62%; height: 100%; border-radius: inherit; background: var(--green); }
.progress-labels { display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; }
.money-box { padding: 16px; background: var(--surface-soft); border-radius: 13px; }
.money-box span, .money-box strong { display: block; }
.money-box span { color: var(--muted); font-size: 9px; }
.money-box strong { margin-top: 4px; font: 700 20px/1.2 "Manrope", sans-serif; }
.timeline { display: flex; flex-direction: column; }
.timeline-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; position: relative; padding-bottom: 17px; }
.timeline-item:not(:last-child)::before { content: ""; position: absolute; top: 28px; bottom: 3px; left: 16px; width: 1px; background: var(--line); }
.timeline-icon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--green); background: var(--green-soft); z-index: 1; }
.timeline-icon svg { width: 15px; }
.timeline-item strong, .timeline-item span { display: block; }
.timeline-item strong { font-size: 11px; }
.timeline-item span { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.timeline-item time { color: var(--soft-muted); font-size: 9px; }

/* Inventory and finance */
.inventory-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 18px; }
.summary-card { padding: 18px; display: flex; align-items: center; justify-content: space-between; }
.summary-card span, .summary-card strong { display: block; }
.summary-card span { color: var(--muted); font-size: 10px; }
.summary-card strong { margin-top: 5px; font: 700 21px/1 "Manrope", sans-serif; }
.stock-bar { width: 90px; height: 6px; border-radius: 6px; background: #edf0ee; overflow: hidden; }
.stock-bar i { height: 100%; display: block; border-radius: inherit; background: var(--green); }
.stock-bar i.low { background: var(--red); }
.stock-bar i.mid { background: var(--orange); }
.product-cell { display: flex; align-items: center; gap: 10px; }
.product-symbol { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--green); background: var(--green-soft); }
.product-symbol svg { width: 16px; }
.product-cell strong, .product-cell span { display: block; }
.product-cell strong { font-size: 10px; }
.product-cell span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.finance-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(270px, .8fr); gap: 18px; }
.chart-area { height: 265px; padding-top: 15px; display: flex; align-items: flex-end; gap: 14px; border-bottom: 1px solid var(--line); position: relative; }
.chart-area::before, .chart-area::after { content: ""; position: absolute; left: 0; right: 0; border-top: 1px dashed #e9ecea; }
.chart-area::before { top: 35%; }
.chart-area::after { top: 65%; }
.bar-group { height: 100%; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; z-index: 1; }
.bar { width: min(38px, 75%); border-radius: 7px 7px 2px 2px; background: var(--green); transition: .2s ease; }
.bar:hover { background: #2c8277; }
.bar-group span { margin-bottom: -25px; color: var(--muted); font-size: 9px; }
.finance-total { display: flex; align-items: baseline; gap: 9px; }
.finance-total strong { font: 700 25px/1 "Manrope", sans-serif; }
.finance-total span { color: var(--green); font-size: 10px; font-weight: 700; }
.breakdown { display: flex; flex-direction: column; gap: 17px; }
.breakdown-row { display: grid; grid-template-columns: 1fr auto; gap: 5px; }
.breakdown-row span { color: var(--muted); font-size: 10px; }
.breakdown-row strong { font-size: 11px; }
.breakdown-line { grid-column: 1 / -1; height: 5px; border-radius: 6px; background: #edf0ee; overflow: hidden; }
.breakdown-line i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.breakdown-line i.orange { background: var(--orange); }
.breakdown-line i.blue { background: #6f9eca; }
.breakdown-line i.purple { background: #9381c0; }

/* Smile studio */
.studio-page { margin: -31px -36px -50px; min-height: calc(100vh - 74px); background: #f1f5f2; }
.studio-head { padding: 29px 36px 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.studio-workspace { padding: 0 36px 40px; display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 18px; }
.studio-canvas { min-height: 620px; padding: 18px; border-radius: 22px; background: #173b38; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.canvas-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; color: #d1e2de; }
.canvas-toolbar strong { font-size: 11px; }
.canvas-patient { display: flex; align-items: center; gap: 8px; color: #9fbab5; font-size: 10px; }
.canvas-patient i { width: 7px; height: 7px; border-radius: 50%; background: #67cf9b; }
.photo-stage { flex: 1; min-height: 480px; position: relative; overflow: hidden; border-radius: 15px; background: #0d2926; }
.braces-photo { width: 100%; height: 100%; min-height: 480px; position: absolute; inset: 0; object-fit: cover; object-position: center; }
.ligature-layer { position: absolute; inset: 0; pointer-events: auto; cursor: grab; touch-action: none; user-select: none; --band-color: #27b59d; transform-origin: center; }
.ligature-layer.dragging { cursor: grabbing; }
.ligature { position: absolute; width: clamp(10px, 1.25vw, 17px); aspect-ratio: 1; transform: translate(-50%, -50%); border: clamp(2px, .28vw, 4px) solid var(--band-color); border-radius: 42%; opacity: .94; filter: saturate(1.35) drop-shadow(0 0 2px rgba(0,0,0,.42)); mix-blend-mode: multiply; cursor: move; pointer-events: auto; touch-action: none; }
.ligature::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
.ligature:hover, .ligature.dragging { outline: 1px dashed rgba(255,255,255,.85); outline-offset: 4px; opacity: 1; }
.drag-hint { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); padding: 6px 9px; border-radius: 8px; display: flex; align-items: center; gap: 6px; color: white; background: rgba(20,42,55,.7); backdrop-filter: blur(7px); font-size: 8px; font-weight: 700; pointer-events: none; white-space: nowrap; }
.drag-hint svg { width: 13px; }
.compare-before, .compare-after { position: absolute; inset: 0; }
.compare-before img, .compare-after img { width: 100%; height: 100%; object-fit: cover; }
.compare-before img { filter: saturate(.78) brightness(.91); transform: scale(1.025); }
.compare-after { clip-path: inset(0 calc(100% - var(--reveal, 62%)) 0 0); }
.compare-after img { filter: saturate(1.04) brightness(1.04) contrast(1.02); }
.compare-line { position: absolute; top: 0; bottom: 0; left: var(--reveal, 62%); width: 2px; background: white; transform: translateX(-1px); pointer-events: none; }
.compare-line::after { content: "↔"; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; color: var(--green-dark); background: white; font-size: 15px; box-shadow: 0 5px 20px rgba(0,0,0,.2); }
.compare-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; }
.photo-label { position: absolute; top: 14px; padding: 6px 9px; border-radius: 8px; color: white; background: rgba(10,30,28,.65); backdrop-filter: blur(6px); font-size: 9px; font-weight: 700; }
.photo-label.before { left: 14px; }
.photo-label.after { right: 14px; }
.canvas-foot { min-height: 44px; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #9fb6b2; font-size: 9px; }
.canvas-foot strong { color: white; }
.studio-controls { display: flex; flex-direction: column; gap: 14px; }
.studio-controls .card { padding: 18px; }
.studio-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; border-radius: 11px; background: #e8ece9; }
.studio-tabs button { height: 35px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 600; }
.studio-tabs button.active { color: var(--ink); background: white; box-shadow: 0 2px 8px rgba(30,60,55,.08); }
.control-section { padding-top: 17px; margin-top: 17px; border-top: 1px solid var(--line); }
.control-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; }
.control-label strong { font-size: 10px; }
.control-label span { color: var(--muted); font-size: 9px; }
.color-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; }
.color-button { aspect-ratio: 1; padding: 4px; border: 2px solid transparent; border-radius: 50%; background: transparent; cursor: pointer; }
.color-button i { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.color-button.active { border-color: var(--ink); }
.arch-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.arch-options button { height: 34px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--muted); cursor: pointer; font-size: 9px; }
.arch-options button.active { color: var(--green); border-color: var(--green); background: var(--green-soft); font-weight: 700; }
.upload-zone { padding: 15px; border: 1px dashed #bac8c3; border-radius: 12px; background: var(--surface-soft); text-align: center; cursor: pointer; }
.upload-zone svg { width: 20px; margin: 0 auto 6px; color: var(--green); }
.upload-zone strong, .upload-zone span { display: block; }
.upload-zone strong { font-size: 10px; }
.upload-zone span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.upload-zone input { display: none; }
.consent-note { display: flex; gap: 8px; padding: 11px; margin-top: 12px; border-radius: 10px; color: #8c643f; background: #fff5ec; font-size: 8px; line-height: 1.45; }
.consent-note svg { flex: 0 0 auto; width: 14px; }
.demo-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px; color: var(--green); background: var(--green-soft); font-size: 9px; font-weight: 700; }
.wip-chip { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 6px; color: #c26d38; background: var(--orange-soft); font-size: 7px; font-weight: 700; letter-spacing: .04em; vertical-align: middle; }

/* Treatment overview */
.treatment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.treatment-card { padding: 20px; }
.treatment-grid button.treatment-card { width: 100%; cursor: pointer; text-align: left; }
.treatment-grid button.treatment-card:hover { border-color: #b8dbe0; transform: translateY(-2px); box-shadow: var(--shadow); }
.treatment-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 19px; }
.treatment-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--green); background: var(--green-soft); }
.treatment-icon svg { width: 18px; }
.treatment-card h3 { margin: 0; font: 700 14px/1.2 "Manrope", sans-serif; }
.treatment-card > p { min-height: 34px; margin: 7px 0 15px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.treatment-stats { display: grid; grid-template-columns: 1fr 1fr; padding-top: 14px; border-top: 1px solid var(--line); }
.treatment-stats div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.treatment-stats strong, .treatment-stats span { display: block; }
.treatment-stats strong { font-size: 13px; }
.treatment-stats span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.treatment-open { margin-top: 14px; display: flex; align-items: center; justify-content: flex-end; gap: 5px; color: var(--green); font-size: 8px; font-weight: 700; }
.treatment-open svg { width: 13px; }
.protocol-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.protocol-grid button { padding: 13px; border: 1px solid var(--line); border-radius: 12px; display: grid; grid-template-columns: 38px 1fr 15px; align-items: center; gap: 10px; background: white; cursor: pointer; text-align: left; }
.protocol-grid button:hover { border-color: #b5dbe0; background: var(--green-soft); }
.protocol-grid button > span { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--purple); background: var(--purple-soft); }
.protocol-grid button > span svg { width: 17px; }
.protocol-grid button > svg { width: 14px; color: var(--muted); }
.protocol-grid strong, .protocol-grid small { display: block; }
.protocol-grid strong { font-size: 9px; }
.protocol-grid small { margin-top: 4px; color: var(--muted); font-size: 7px; }
.protocol-detail { display: grid; grid-template-columns: 1fr 230px; gap: 18px; }
.protocol-detail h3 { margin: 0 0 12px; font-size: 11px; }
.protocol-detail ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.protocol-detail li { padding: 10px; border: 1px solid var(--line); border-radius: 10px; display: flex; align-items: center; gap: 8px; font-size: 9px; }
.protocol-detail li i { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; color: var(--green); background: var(--green-soft); }
.protocol-detail li svg { width: 12px; }
.protocol-detail aside { display: flex; flex-direction: column; gap: 9px; }
.protocol-detail aside div { padding: 13px; border-radius: 11px; background: var(--surface-soft); }
.protocol-detail aside span, .protocol-detail aside strong { display: block; }
.protocol-detail aside span { color: var(--muted); font-size: 8px; }
.protocol-detail aside strong { margin-top: 5px; font-size: 9px; line-height: 1.45; }
.plan-list { display: flex; flex-direction: column; gap: 8px; }
.plan-list article { padding: 11px; border: 1px solid var(--line); border-radius: 11px; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; }
.plan-list article strong, .plan-list article span { display: block; }
.plan-list article strong { font-size: 9px; }
.plan-list article span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.plan-list article i { height: 5px; margin-top: 7px; border-radius: 5px; display: block; background: var(--canvas); overflow: hidden; }
.plan-list article b { height: 100%; display: block; border-radius: inherit; background: var(--green); }
.plan-list article em { color: var(--green); font-size: 9px; font-style: normal; font-weight: 700; }
.import-drop { min-height: 150px; padding: 20px; border: 1.5px dashed #a8cbd0; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f6fbfc; cursor: pointer; text-align: center; }
.import-drop > span { width: 40px; height: 40px; margin-bottom: 8px; border-radius: 12px; display: grid; place-items: center; color: var(--green); background: var(--green-soft); }
.import-drop svg { width: 19px; }
.import-drop strong, .import-drop small { display: block; }
.import-drop strong { font-size: 10px; }
.import-drop small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.import-preview { padding: 11px; margin-top: 10px; border-radius: 10px; color: var(--muted); background: var(--surface-soft); font-size: 8px; }
.import-preview strong, .import-preview span { display: block; }
.import-preview span { margin-top: 3px; }
.clinical-viewer { display: grid; grid-template-columns: 1fr 190px; gap: 13px; }
.clinical-viewer > .xray-preview { min-height: 290px; height: auto; border-radius: 14px; }
.clinical-viewer > .xray-preview svg { width: 70px; }
.clinical-viewer > .xray-preview span { position: absolute; bottom: 15px; z-index: 2; color: #c8d8d4; font-size: 8px; }
.clinical-viewer aside { display: flex; flex-direction: column; gap: 8px; }
.clinical-viewer aside div { padding: 12px; border-radius: 10px; background: var(--surface-soft); }
.clinical-viewer aside span, .clinical-viewer aside strong { display: block; }
.clinical-viewer aside span { color: var(--muted); font-size: 8px; }
.clinical-viewer aside strong { margin-top: 4px; font-size: 9px; }

/* Modals */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(14,36,33,.48); backdrop-filter: blur(5px); animation: fade .15s ease; }
.modal { width: min(560px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 23px; border-radius: 20px; background: white; box-shadow: var(--shadow-lg); animation: pop .18s ease; }
.modal.wide { width: min(720px, 100%); }
.modal-head { margin-bottom: 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.modal-head h2 { margin: 0; font: 700 19px/1.2 "Manrope", sans-serif; }
.modal-head p { margin: 6px 0 0; color: var(--muted); font-size: 10px; }
.modal-close { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: var(--surface-soft); display: grid; place-items: center; cursor: pointer; }
.modal-close svg { width: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 9px; font-weight: 700; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; outline: 0; color: var(--ink); background: white; font-size: 11px; }
.form-field textarea { min-height: 76px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 21px; padding-top: 17px; border-top: 1px solid var(--line); }
.day-settings { display: flex; flex-direction: column; gap: 9px; }
.day-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; }
.switch { width: 29px; height: 18px; padding: 2px; border: 0; border-radius: 10px; background: #ccd4d0; cursor: pointer; }
.switch i { display: block; width: 14px; height: 14px; border-radius: 50%; background: white; transition: .2s; }
.switch.on { background: var(--green); }
.switch.on i { transform: translateX(11px); }
.day-row strong { font-size: 10px; }
.time-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.time-chips button { padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--muted); cursor: pointer; font-size: 8px; }
.time-chips button.on { color: var(--green); background: var(--green-soft); border-color: transparent; }
.toast { position: fixed; z-index: 150; right: 24px; bottom: 24px; max-width: 330px; padding: 13px 16px; border-radius: 12px; color: white; background: var(--green-dark); box-shadow: 0 13px 35px rgba(20,50,45,.25); font-size: 11px; transform: translateY(25px); opacity: 0; pointer-events: none; transition: .22s ease; }
.toast.show { transform: translateY(0); opacity: 1; }
.empty-message { padding: 50px 20px; text-align: center; color: var(--muted); font-size: 12px; }

@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.985); } }


/* Advanced operations */
.module-card { padding: 0; overflow: hidden; }
.module-tabs { min-height: 55px; padding: 0 18px; border-bottom: 1px solid var(--line); display: flex; align-items: end; gap: 5px; overflow-x: auto; }
.module-tabs button { min-height: 54px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 600; white-space: nowrap; }
.module-tabs button:hover { color: var(--ink); }
.module-tabs button.active { color: var(--green); border-bottom-color: var(--green); }
.module-tabs button span { min-width: 19px; height: 19px; margin-left: 6px; padding: 0 5px; border-radius: 7px; display: inline-grid; place-items: center; color: var(--muted); background: var(--canvas); font-size: 8px; }
.module-tabs button.active span { color: var(--green); background: var(--green-soft); }
.module-body { min-height: 390px; padding: 20px; }
.module-toolbar { min-height: 46px; margin-bottom: 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.module-toolbar .filter-search { max-width: 560px; margin-right: auto; }
.module-title { margin: 0; font: 700 14px/1.2 "Manrope", sans-serif; }
.module-toolbar p, .section-copy { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.table-responsive { width: 100%; overflow-x: auto; }
.inventory-master { min-width: 950px; }
.advanced-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.unit-copy { color: var(--muted); font-size: 8px; }
.table-note { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; }
.movement-qty { font-weight: 700; }
.movement-qty.in { color: var(--green); }
.movement-qty.out { color: var(--red); }
.large-money { font: 700 22px/1 "Manrope", sans-serif; }
.bar.current { background: var(--purple); }
.cash-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 18px; }
.cash-list div { padding: 13px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; }
.cash-list span { color: var(--muted); font-size: 10px; }
.cash-list strong { font-size: 11px; }
.supplier-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.supplier-card { padding: 16px; border: 1px solid var(--line); border-radius: 15px; display: grid; grid-template-columns: 42px 1fr; gap: 11px; }
.supplier-logo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--green-dark); background: var(--green-soft); font-size: 11px; font-weight: 700; }
.supplier-title strong, .supplier-title span { display: block; }
.supplier-title strong { font-size: 11px; }
.supplier-title span { margin-top: 4px; color: var(--muted); font-size: 8px; }
.supplier-info { grid-column: 1 / -1; padding: 11px; border-radius: 10px; display: flex; flex-wrap: wrap; gap: 10px 17px; color: var(--muted); background: var(--surface-soft); }
.supplier-info span { display: flex; align-items: center; gap: 5px; font-size: 8px; }
.supplier-info svg { width: 12px; color: var(--green); }
.supplier-actions { grid-column: 1 / -1; display: flex; justify-content: space-between; }
.supplier-actions .button { flex: 1; margin-right: 8px; }
.expiry-list { display: flex; flex-direction: column; }
.expiry-row { padding: 12px 4px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 37px minmax(180px, 1fr) minmax(100px, .7fr) 110px; align-items: center; gap: 12px; }
.expiry-row:last-child { border: 0; }
.expiry-row > div:nth-child(2) strong, .expiry-row > div:nth-child(2) span { display: block; }
.expiry-row > div:nth-child(2) strong { font-size: 10px; }
.expiry-row > div:nth-child(2) span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.expiry-meter { height: 6px; border-radius: 6px; background: #edf0f4; overflow: hidden; }
.expiry-meter i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.expiry-date { text-align: right; }
.expiry-date strong, .expiry-date span { display: block; }
.expiry-date strong { font-size: 9px; }
.expiry-date span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.expiry-date.urgent strong { color: var(--red); }
.pos-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 18px; }
.pos-summary { padding: 20px; border-radius: 16px; color: white; background: var(--green-dark); }
.pos-summary > span, .pos-summary > strong, .pos-summary > p { display: block; }
.pos-summary > span { color: #b8d2da; font-size: 9px; }
.pos-summary > strong { margin-top: 6px; font: 700 25px/1.1 "Manrope", sans-serif; }
.pos-summary > p { margin: 5px 0 19px; color: #aac6ce; font-size: 8px; }
.pos-stat { padding: 11px 0; border-top: 1px solid rgba(255,255,255,.14); display: flex; justify-content: space-between; }
.pos-stat span { color: #b7ced5; font-size: 9px; }
.pos-stat b { font-size: 10px; }
.pos-summary .button { margin-top: 17px; color: var(--green-dark); background: white; border: 0; }
.asset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.asset-card { padding: 16px; border: 1px solid var(--line); border-radius: 14px; }
.asset-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.asset-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--purple); background: var(--purple-soft); }
.asset-icon svg { width: 18px; }
.asset-card h3 { margin: 13px 0 3px; font-size: 11px; }
.asset-card > p { margin: 0 0 12px; color: var(--muted); font-size: 8px; }
.asset-facts { padding: 10px; margin-bottom: 12px; border-radius: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: var(--surface-soft); }
.asset-facts span, .asset-facts b { display: block; }
.asset-facts span { color: var(--ink); font-size: 8px; }
.asset-facts b { margin-bottom: 3px; color: var(--muted); font-size: 7px; font-weight: 500; }

/* Admin center */
.admin-shell .module-body { min-height: 500px; }
.admin-welcome { padding: 24px; border-radius: 17px; display: flex; align-items: center; justify-content: space-between; gap: 25px; color: white; background: var(--green-dark); }
.admin-welcome h2 { margin: 12px 0 5px; font: 700 21px/1.2 "Manrope", sans-serif; }
.admin-welcome p { max-width: 600px; margin: 0; color: #b8ced5; font-size: 10px; }
.admin-health { min-width: 155px; }
.admin-health strong, .admin-health span { display: block; }
.admin-health strong { font: 700 28px/1 "Manrope", sans-serif; }
.admin-health span { margin: 5px 0 9px; color: #bad1d8; font-size: 8px; }
.admin-health i { display: block; height: 6px; border-radius: 8px; background: rgba(255,255,255,.16); overflow: hidden; }
.admin-health b { display: block; width: 92%; height: 100%; border-radius: inherit; background: #69d5db; }
.professional-settings { display: flex; flex-direction: column; gap: 16px; }
.professional-identity { padding: 18px; border: 1px solid var(--line); border-radius: 15px; display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 13px; background: linear-gradient(135deg, #f3fbfc, #f6f2ff); }
.professional-identity .profile-avatar { width: 58px; height: 58px; margin: 0; font-size: 17px; }
.professional-identity strong, .professional-identity span, .professional-identity small { display: block; }
.professional-identity strong { font: 700 14px/1.2 "Manrope", sans-serif; }
.professional-identity span { margin-top: 4px; color: var(--green); font-size: 9px; font-weight: 600; }
.professional-identity small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.professional-identity > i { padding: 7px 9px; border-radius: 8px; display: flex; align-items: center; gap: 5px; color: var(--purple); background: white; font-size: 8px; font-style: normal; font-weight: 700; }
.professional-identity > i svg { width: 13px; }
.professional-form { margin-top: 0; grid-template-columns: repeat(3, 1fr); }
.single-account-note { padding: 13px; border: 1px solid #cde9ec; border-radius: 12px; display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 10px; color: var(--green-dark); background: var(--green-soft); }
.single-account-note > svg { width: 32px; height: 32px; padding: 7px; border-radius: 9px; color: var(--green); background: white; }
.single-account-note strong, .single-account-note span { display: block; }
.single-account-note strong { font-size: 9px; }
.single-account-note span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.room-grid.single-room { grid-template-columns: minmax(250px, 380px); }
.single-owner-banner { padding: 11px 13px; margin-bottom: 16px; border: 1px solid #cce7eb; border-radius: 12px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; background: var(--green-soft); }
.single-owner-banner > svg { width: 34px; height: 34px; padding: 8px; border-radius: 10px; color: var(--green); background: white; }
.single-owner-banner strong, .single-owner-banner small { display: block; }
.single-owner-banner strong { font-size: 9px; }
.single-owner-banner small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.single-owner-banner > i { padding: 5px 7px; border-radius: 7px; color: var(--purple); background: white; font-size: 7px; font-style: normal; font-weight: 700; }
.admin-grid { margin: 16px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.admin-grid button { padding: 15px; border: 1px solid var(--line); border-radius: 13px; display: grid; grid-template-columns: 34px 1fr 17px; align-items: center; gap: 10px; background: white; cursor: pointer; text-align: left; }
.admin-grid button:hover { border-color: #bcdce1; background: var(--green-soft); }
.admin-grid button > svg:first-child { width: 34px; height: 34px; padding: 8px; border-radius: 10px; color: var(--green); background: var(--green-soft); }
.admin-grid button > svg:last-child { width: 15px; color: var(--muted); }
.admin-grid strong, .admin-grid small { display: block; }
.admin-grid strong { font-size: 10px; }
.admin-grid small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.setup-checklist { padding: 17px; border: 1px solid var(--line); border-radius: 14px; }
.setup-checklist h3 { margin: 0 0 12px; font-size: 11px; }
.setup-items { display: flex; flex-wrap: wrap; gap: 8px; }
.setup-items span { padding: 7px 9px; border-radius: 8px; display: flex; align-items: center; gap: 5px; color: var(--muted); background: var(--canvas); font-size: 8px; }
.setup-items span.done { color: var(--green); background: var(--green-soft); }
.setup-items svg { width: 12px; }
.service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.service-card { padding: 13px; border: 1px solid var(--line); border-radius: 12px; display: grid; grid-template-columns: 5px 1fr auto 28px; align-items: center; gap: 11px; }
.service-color { width: 5px; height: 35px; border-radius: 5px; background: var(--green); }
.service-color.purple { background: var(--purple); }
.service-color.orange { background: var(--orange); }
.service-color.blue { background: var(--blue); }
.service-card strong, .service-card span { display: block; }
.service-card strong { font-size: 10px; }
.service-card span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.service-card > b { font-size: 10px; }
.room-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.room-card { padding: 17px; border: 1px solid var(--line); border-radius: 14px; }
.room-top { display: flex; justify-content: space-between; }
.room-icon { width: 37px; height: 37px; border-radius: 11px; display: grid; place-items: center; color: var(--green); background: var(--green-soft); }
.room-icon.purple { color: var(--purple); background: var(--purple-soft); }
.room-icon.orange { color: #c36b37; background: var(--orange-soft); }
.room-icon svg { width: 17px; }
.room-card h3 { margin: 14px 0 3px; font-size: 11px; }
.room-card p { margin: 0 0 12px; color: var(--muted); font-size: 9px; }
.room-equipment { min-height: 42px; padding: 9px; margin-bottom: 12px; border-radius: 9px; display: flex; gap: 7px; color: var(--muted); background: var(--surface-soft); font-size: 8px; line-height: 1.4; }
.room-equipment svg { flex: 0 0 auto; width: 13px; color: var(--green); }
.settings-form { margin-top: 18px; padding: 17px; border-radius: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; background: var(--surface-soft); }
.automation-list { display: flex; flex-direction: column; gap: 9px; }
.automation-row { padding: 14px; border: 1px solid var(--line); border-radius: 12px; display: grid; grid-template-columns: 38px 1fr 34px; align-items: center; gap: 11px; }
.automation-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--purple); background: var(--purple-soft); }
.automation-icon svg { width: 17px; }
.automation-row strong, .automation-row span { display: block; }
.automation-row strong { font-size: 10px; }
.automation-row span { margin-top: 4px; color: var(--muted); font-size: 8px; }
.security-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); gap: 25px; }
.security-options { margin-top: 15px; display: flex; flex-direction: column; gap: 8px; }
.security-options > div { padding: 13px; border: 1px solid var(--line); border-radius: 11px; display: flex; align-items: center; justify-content: space-between; }
.security-options span { display: grid; grid-template-columns: 25px 1fr; align-items: center; }
.security-options span svg { grid-row: 1 / span 2; width: 17px; color: var(--green); }
.security-options b, .security-options small { display: block; }
.security-options b { font-size: 9px; }
.security-options small { color: var(--muted); font-size: 8px; }
.audit-list { display: flex; flex-direction: column; }
.audit-list > div { padding: 10px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 7px 1fr auto; align-items: start; gap: 8px; }
.audit-list i { width: 7px; height: 7px; margin-top: 3px; border-radius: 50%; background: var(--green); }
.audit-list strong, .audit-list small { display: block; }
.audit-list strong { font-size: 9px; }
.audit-list small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.audit-list time { color: var(--soft-muted); font-size: 7px; }
.data-center { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.data-card { min-height: 190px; padding: 20px; border: 1px solid var(--line); border-radius: 15px; display: grid; grid-template-columns: 40px 1fr; gap: 13px; align-items: start; background: white; }
.data-card > svg { width: 40px; height: 40px; padding: 10px; border-radius: 12px; color: var(--green); background: var(--green-soft); }
.data-card h3 { margin: 3px 0 6px; font-size: 12px; }
.data-card p { margin: 0 0 15px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.upload-data { cursor: pointer; }
.danger-zone { grid-column: 1 / -1; min-height: auto; }
.danger-zone > svg { color: var(--red); background: var(--red-soft); }
.product-detail { display: grid; grid-template-columns: 110px 1fr; gap: 17px; }
.product-hero-icon { min-height: 135px; border-radius: 15px; display: grid; place-items: center; color: var(--green); background: var(--green-soft); }
.product-hero-icon svg { width: 42px; }
.detail-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.detail-kpis div { padding: 13px; border-radius: 11px; background: var(--surface-soft); }
.detail-kpis span, .detail-kpis strong { display: block; }
.detail-kpis span { color: var(--muted); font-size: 8px; }
.detail-kpis strong { margin-top: 4px; font-size: 11px; }
.detail-list { grid-column: 1 / -1; border-top: 1px solid var(--line); }
.detail-list span { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 9px; }

/* Studio camera and alignment */
.photo-source-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.photo-status { padding: 4px 7px; border-radius: 7px; color: var(--muted); background: var(--canvas); font-size: 8px; font-weight: 700; }
.photo-status.ready { color: var(--green); background: var(--green-soft); }
.camera-primary { width: 100%; min-height: 62px; padding: 10px; border: 0; border-radius: 13px; display: grid; grid-template-columns: 38px 1fr 16px; align-items: center; gap: 10px; color: white; background: var(--green-dark); cursor: pointer; text-align: left; }
.camera-primary:hover { background: #2d5870; }
.camera-primary > span { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.12); }
.camera-primary svg { width: 17px; }
.camera-primary > svg { width: 14px; color: #bcd6de; }
.camera-primary strong, .camera-primary small { display: block; }
.camera-primary strong { font-size: 9px; }
.camera-primary small { margin-top: 3px; color: #bcd3da; font-size: 7px; }
.photo-drop-zone { min-height: 112px; margin-top: 9px; padding: 13px; border: 1.5px dashed #a8cbd0; border-radius: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--green); background: #f5fbfc; cursor: pointer; text-align: center; transition: .18s ease; }
.photo-drop-zone:hover, .photo-drop-zone.dragging { border-color: var(--purple); color: var(--purple); background: var(--purple-soft); transform: translateY(-1px); }
.photo-drop-zone > svg { width: 21px; margin-bottom: 6px; }
.photo-drop-zone strong, .photo-drop-zone span, .photo-drop-zone small { display: block; }
.photo-drop-zone strong { color: var(--ink); font-size: 9px; }
.photo-drop-zone span { margin-top: 3px; color: var(--muted); font-size: 7px; }
.photo-drop-zone small { max-width: 100%; margin-top: 8px; padding: 4px 7px; border-radius: 6px; color: var(--green); background: white; font-size: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pose-mini { margin-top: 11px; padding: 8px; border-radius: 12px; display: grid; grid-template-columns: 52px 1fr; gap: 10px; background: var(--surface-soft); }
.pose-mini img { width: 52px; height: 62px; border-radius: 9px; object-fit: cover; object-position: center 28%; }
.pose-mini strong, .pose-mini span { display: block; }
.pose-mini strong { margin-top: 2px; font-size: 9px; }
.pose-mini span { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.pose-mini .text-link { padding: 3px 0 0; font-size: 8px; }
.alignment-controls label { margin-top: 9px; display: grid; grid-template-columns: 65px 1fr; align-items: center; gap: 8px; }
.alignment-controls label span { color: var(--muted); font-size: 8px; }
.alignment-controls input { width: 100%; accent-color: var(--purple); }
.notes-layout { display: grid; grid-template-columns: minmax(260px, .75fr) 1fr; gap: 18px; }
.note-composer textarea { width: 100%; min-height: 130px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; resize: vertical; }
.note-actions { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 9px; color: var(--muted); font-size: 8px; }
.note-actions span { display: flex; align-items: center; gap: 5px; }
.note-actions svg { width: 13px; color: var(--green); }
.clinical-notes article { padding: 13px 0; border-bottom: 1px solid var(--line); }
.clinical-notes article:first-child { padding-top: 0; }
.clinical-notes article > div { display: flex; justify-content: space-between; }
.clinical-notes strong { font-size: 9px; }
.clinical-notes time { color: var(--muted); font-size: 8px; }
.clinical-notes p { margin: 7px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.payment-record { display: grid; grid-template-columns: 210px 1fr; gap: 17px; }
.camera-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) 235px; gap: 18px; }
.camera-stage { aspect-ratio: 4 / 3; position: relative; overflow: hidden; border-radius: 16px; background: #17242c; }
.camera-stage video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.camera-stage.wip-stage { display: grid; align-content: center; justify-items: center; gap: 8px; padding: 20px; text-align: center; color: #c8d8de; }
.camera-stage.wip-stage svg { width: 26px; color: var(--orange); }
.camera-stage.wip-stage strong { color: white; font-size: 11px; }
.camera-stage.wip-stage span { max-width: 260px; font-size: 9px; line-height: 1.5; }
.face-guide { position: absolute; inset: 0; pointer-events: none; color: white; }
.face-oval { position: absolute; width: 48%; height: 78%; left: 26%; top: 8%; border: 2px solid rgba(255,255,255,.78); border-radius: 48% 48% 44% 44%; box-shadow: 0 0 0 999px rgba(13,27,35,.22); }
.eye-line { position: absolute; width: 34%; height: 1px; left: 33%; top: 41%; border-top: 1px dashed rgba(255,255,255,.7); }
.mouth-box { position: absolute; width: 29%; height: 15%; left: 35.5%; top: 59%; border: 2px solid #75e2e6; border-radius: 48%; }
.face-guide > span { position: absolute; top: 36%; left: 50%; transform: translateX(-50%); padding: 4px 7px; border-radius: 6px; background: rgba(18,38,47,.65); font-size: 8px; }
.face-guide > b { position: absolute; top: 76%; left: 50%; transform: translateX(-50%); padding: 5px 8px; border-radius: 7px; color: #173841; background: rgba(235,254,255,.9); font-size: 8px; white-space: nowrap; }
.camera-countdown { position: absolute; inset: 0; display: grid; place-items: center; color: white; background: rgba(18,36,44,.28); font: 700 70px/1 "Manrope", sans-serif; pointer-events: none; }
.camera-countdown:empty { display: none; }
.camera-status { min-height: 30px; padding: 9px 0 0; color: var(--muted); font-size: 8px; }
.camera-status i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #4ac88a; }
.camera-actions { display: flex; align-items: center; justify-content: center; gap: 12px; }
.capture-button { width: 58px; height: 58px; padding: 5px; border: 2px solid var(--green); border-radius: 50%; background: white; cursor: pointer; }
.capture-button i { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--green); }
.capture-button:disabled { opacity: .4; cursor: wait; }
.pose-reference { padding: 14px; border-radius: 15px; background: var(--surface-soft); }
.pose-photo { height: 220px; margin: 11px 0 13px; border-radius: 12px; overflow: hidden; position: relative; }
.pose-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.pose-photo i { position: absolute; width: 58%; height: 82%; left: 21%; top: 8%; border: 1px solid rgba(255,255,255,.75); border-radius: 48%; }
.pose-reference ol { margin: 0; padding: 0; list-style: none; counter-reset: pose; display: flex; flex-direction: column; gap: 9px; }
.pose-reference li { display: grid; grid-template-columns: 20px 1fr; column-gap: 7px; counter-increment: pose; }
.pose-reference li::before { content: counter(pose); grid-row: 1 / span 2; width: 20px; height: 20px; border-radius: 7px; display: grid; place-items: center; color: var(--green); background: var(--green-soft); font-size: 8px; font-weight: 700; }
.pose-reference li b, .pose-reference li span { display: block; }
.pose-reference li b { font-size: 8px; }
.pose-reference li span { color: var(--muted); font-size: 7px; line-height: 1.35; }


/* Prototipo validable v7 */
.prototype-banner{position:fixed;z-index:120;top:0;left:0;right:0;height:34px;display:flex;align-items:center;justify-content:center;gap:10px;background:#fff4cf;color:#6c5410;border-bottom:1px solid #ead58a;font-size:11px;letter-spacing:.01em;padding:0 16px}.prototype-banner strong{font-size:9px;letter-spacing:.12em;background:#6c5410;color:white;padding:3px 7px;border-radius:999px}.app-shell{padding-top:34px}.sidebar{top:34px;height:calc(100vh - 34px)}
.prototype-note,.prototype-warning{display:flex;align-items:center;gap:8px;padding:11px 13px;border-radius:10px;background:#f5f7f7;color:var(--muted);font-size:11px;line-height:1.5}.prototype-warning{background:#fff2e6;color:#8e4f24;border:1px solid #f0d3ba}.prototype-warning svg{width:18px;flex:0 0 auto}
.appointment-row-button{width:100%;border:0;background:transparent;text-align:left;cursor:pointer}.appointment-row-button:hover{background:#f7faf9}.cal-event{width:100%;border:0;text-align:left;cursor:pointer}.cal-event:hover{filter:brightness(.97);transform:translateY(-1px)}
.dynamic-week{display:block;min-width:980px}.calendar-day{border:0;background:transparent;cursor:pointer}.today-button{padding:7px 10px;margin-left:4px}
.day-calendar{display:grid;grid-template-columns:72px 1fr;min-height:620px}.day-time{padding:14px 12px;color:var(--muted);font-size:11px;border-top:1px solid var(--line)}.day-slot{min-height:54px;padding:5px;border-top:1px solid var(--line);border-left:1px solid var(--line)}.day-slot .cal-event{display:inline-flex;width:auto;min-width:230px;margin-right:6px;padding:8px 12px;flex-direction:column;border-radius:9px;background:#e8f7f5;color:#155b55}.day-slot .cal-event.orange{background:#fff0e8;color:#8d4b24}.day-slot .cal-event.purple{background:#f1edff;color:#5d4e9f}.day-slot .cal-event.blue{background:#edf4ff;color:#365f9b}
.month-weekdays,.month-grid{display:grid;grid-template-columns:repeat(7,1fr)}.month-weekdays span{padding:10px;text-align:center;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase}.month-day{min-height:102px;padding:9px;border:1px solid var(--line);background:white;text-align:left;display:flex;flex-direction:column;gap:4px;cursor:pointer}.month-day:hover,.month-day.selected{background:#f4faf9}.month-day.today strong{background:var(--green);color:white;width:24px;height:24px;border-radius:50%;display:grid;place-items:center}.month-day.muted{opacity:.42}.month-day span{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:3px 5px;border-radius:5px;background:#e8f7f5}.month-day span.orange{background:#fff0e8}.month-day span.purple{background:#f1edff}.month-day span.blue{background:#edf4ff}.month-day small{font-size:9px;color:var(--muted)}.agenda-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.agenda-kpis div{padding:14px;background:#f6f9f8;border-radius:10px}.agenda-kpis strong{display:block;font-size:22px}.agenda-kpis span{font-size:8px;color:var(--muted);letter-spacing:.08em}
.schedule-editor .day-row{align-items:flex-start}.time-inputs{display:grid;grid-template-columns:repeat(4,minmax(90px,1fr));gap:7px;flex:1}.time-inputs label{font-size:9px;color:var(--muted);display:flex;flex-direction:column;gap:4px}.time-inputs input{border:1px solid var(--line);border-radius:8px;padding:7px;background:white}.availability-feedback{margin-top:12px;padding:9px 12px;background:#f3f8f7;border-radius:8px;color:var(--muted);font-size:11px}
.bot-patient-picker,.studio-patient-select{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--muted)}.bot-patient-picker select,.studio-patient-select select{border:1px solid var(--line);border-radius:9px;padding:8px;background:white;color:var(--ink)}
.consult-empty{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.65fr);gap:18px}.consult-empty>.card{padding:24px}.consult-appointment-list{display:grid;gap:8px;margin:18px 0}.consult-appointment-list button{display:grid;grid-template-columns:92px 1fr 24px;align-items:center;gap:12px;border:1px solid var(--line);background:white;border-radius:12px;padding:12px;text-align:left;cursor:pointer}.consult-appointment-list button:hover{border-color:#8fc6bf;background:#f7fbfa}.consult-appointment-list time{font-size:10px;color:var(--muted)}.consult-appointment-list time b{display:block;font-size:16px;color:var(--ink);margin-top:3px}.consult-appointment-list span{display:flex;flex-direction:column;gap:3px}.consult-appointment-list small{color:var(--muted)}.consult-promise>span{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:#e5f6f3;color:var(--green)}.consult-promise>span svg{width:25px}.consult-promise ol{padding-left:18px;color:var(--muted);line-height:2}
.consult-shell{display:grid;grid-template-columns:220px minmax(560px,1fr) 220px;gap:14px;align-items:start}.consult-patient,.consult-summary{padding:18px;position:sticky;top:94px}.consult-patient{text-align:center}.consult-patient .profile-avatar{margin:0 auto 10px}.consult-patient h2{font-size:16px;margin:0}.consult-patient p{color:var(--muted);font-size:11px}.alert-stack{display:grid;gap:7px;text-align:left;margin:16px 0}.alert-stack span,.consult-summary>span{display:flex;flex-direction:column;gap:3px;padding:9px;background:#f6f8f8;border-radius:8px;font-size:10px}.alert-stack b,.consult-summary b{font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.alert-stack .danger,.clinical-alert.danger{background:#fff0eb;color:#9d4429}.consult-main{padding:0;overflow:hidden}.consult-steps{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid var(--line);background:#fbfcfc}.consult-steps button{border:0;background:transparent;padding:13px 5px;color:var(--muted);font-size:8px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer}.consult-steps i{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:#e8eded;font-style:normal}.consult-steps svg{width:13px}.consult-steps button.active{color:var(--green);font-weight:700}.consult-steps button.active i,.consult-steps button.done i{background:var(--green);color:white}.consult-step-body{min-height:470px;padding:26px}.consult-title{display:flex;gap:12px;align-items:center;margin-bottom:22px}.consult-title>span{width:42px;height:42px;border-radius:12px;background:#e6f5f2;color:var(--green);display:grid;place-items:center}.consult-title>span svg{width:21px}.consult-title h2{margin:0 0 4px;font:700 18px Manrope}.consult-title p{margin:0;color:var(--muted);font-size:11px}.consult-footer{border-top:1px solid var(--line);padding:14px 20px;display:flex;justify-content:space-between}.confirm-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.confirm-grid div{padding:13px;background:#f6f9f8;border-radius:10px}.confirm-grid span{display:block;color:var(--muted);font-size:9px;margin-bottom:4px}.check-card{display:flex;gap:10px;border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:18px;cursor:pointer}.check-card>input{margin-top:4px}.check-card>span{display:grid;grid-template-columns:20px 1fr;gap:2px 7px}.check-card svg{grid-row:1/3;width:18px;color:var(--green)}.check-card b{font-size:11px}.check-card small{font-size:9px;color:var(--muted)}.material-picker{display:grid;gap:7px;margin-top:14px}.material-picker label{display:grid;grid-template-columns:20px 1fr 70px;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--line);border-radius:9px}.material-picker span{display:flex;flex-direction:column}.material-picker small{color:var(--muted);font-size:9px}.material-picker input[type=number]{border:1px solid var(--line);border-radius:7px;padding:6px}.simulation-card{display:flex;gap:12px;padding:14px;border-radius:11px;background:#f0f5ff;color:#355b8c;margin-top:18px}.simulation-card svg{width:22px}.simulation-card div{display:flex;flex-direction:column;gap:3px}.simulation-card span{font-size:10px}.signature-box{position:relative;border:1px dashed #9cb8b4;border-radius:12px;background:#fbfdfd;margin-top:14px;padding:8px}.signature-box canvas{width:100%;height:120px;display:block;touch-action:none}.signature-box>span{position:absolute;bottom:8px;left:12px;font-size:8px;color:var(--muted)}.signature-box .text-link{position:absolute;right:10px;bottom:7px}.consult-summary h3{margin:0 0 13px}.consult-summary>span{margin-bottom:7px}.consult-summary .prototype-note{margin-top:12px;font-size:9px}
.appointment-detail{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.appointment-detail>div{padding:14px;background:#f7f9f9;border-radius:10px;display:flex;flex-direction:column;gap:5px}.appointment-detail span{font-size:9px;color:var(--muted)}.appointment-detail select{border:1px solid var(--line);border-radius:7px;padding:6px;background:white}
.portal-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.portal-grid section{padding:16px;background:#f8faf9;border-radius:12px}.portal-grid h3{margin:0 0 10px;font-size:12px}.portal-card{display:flex;align-items:center;gap:10px;padding:10px;background:white;border:1px solid var(--line);border-radius:9px;margin-top:7px}.portal-card>svg{width:20px;color:var(--green)}.portal-card>span{display:flex;flex-direction:column;flex:1}.portal-card small{font-size:9px;color:var(--muted)}.small-button{padding:5px 8px;font-size:9px}.portal-balance{font:700 27px Manrope;margin:13px 0}.completion-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.completion-grid button{display:grid;grid-template-columns:32px 1fr 20px;align-items:center;gap:10px;border:1px solid var(--line);background:white;padding:14px;border-radius:11px;text-align:left;cursor:pointer}.completion-grid button:hover{background:#f7fbfa}.completion-grid button>svg:first-child{color:var(--green)}.completion-grid span{display:flex;flex-direction:column}.completion-grid small{color:var(--muted);font-size:9px}.cfdi-preview{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cfdi-preview>div{padding:12px;background:#f7f9f9;border-radius:9px;display:flex;flex-direction:column}.cfdi-preview span{font-size:8px;color:var(--muted);text-transform:uppercase}.cfdi-preview i{grid-column:1/-1;padding:12px;background:#fff2e6;color:#8e4f24;border-radius:9px;text-align:center}.whatsapp-preview{min-height:180px;padding:28px;background:#e7efe9;border-radius:12px;display:flex;align-items:flex-end}.whatsapp-preview .chat-bubble{max-width:72%}
.quote-list{display:grid;gap:8px}.quote-list article{display:flex;justify-content:space-between;align-items:center;padding:13px;border:1px solid var(--line);border-radius:10px}.quote-list span{display:flex;flex-direction:column}.quote-list small{color:var(--muted);margin-top:3px}.clinical-alert{margin-top:14px;padding:10px;border-radius:9px;background:#f5f8f7;text-align:left;display:flex;flex-direction:column;font-size:10px}.clinical-alert b{font-size:8px;color:var(--muted);text-transform:uppercase}.clinical-viewer .xray-preview img{width:100%;height:100%;object-fit:contain}
.validation-metrics{margin-bottom:18px}.validation-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:18px}.validation-layout>section{padding:18px;background:#f8faf9;border-radius:12px}.validation-layout h3{margin-top:0}.validation-script{padding-left:20px;line-height:2;color:var(--muted)}.validation-actions{display:flex;gap:7px;flex-wrap:wrap}.analytics-list{display:grid;gap:5px}.analytics-list>div{display:grid;grid-template-columns:8px 1fr auto;gap:9px;align-items:center;padding:8px;background:white;border-radius:8px}.analytics-list i{width:7px;height:7px;border-radius:50%;background:var(--green)}.analytics-list span{display:flex;flex-direction:column}.analytics-list small,.analytics-list time{font-size:8px;color:var(--muted)}.validation-panel>.prototype-warning{margin-top:18px}


/* =====================================================================
   v8 · paleta por categoría clínica
   Las categorías de tratamiento comparten color en agenda, catálogo,
   leyenda y etiquetas, para que un color signifique siempre lo mismo.
   ===================================================================== */
.cal-event.red { border-color: #d98186; background: #fbe8e7; }
.cal-event.green { border-color: #79b995; background: #eaf7ef; }
.cal-event.teal { border-color: #5cb6b2; background: #e3f5f4; }
.cal-event.pink { border-color: #dd8ab4; background: #fceaf3; }
.cal-event.amber { border-color: #dcb257; background: #fdf4dd; }
.legend-item i.red, .appointment-line.red, .breakdown-line i.red, .service-color.red { background: var(--red); }
.legend-item i.green, .appointment-line.green, .breakdown-line i.green, .service-color.green { background: #4e9a6c; }
.legend-item i.teal, .appointment-line.teal, .breakdown-line i.teal, .service-color.teal { background: #2f9b95; }
.legend-item i.pink, .appointment-line.pink, .breakdown-line i.pink, .service-color.pink { background: #cd6a9b; }
.legend-item i.amber, .appointment-line.amber, .breakdown-line i.amber, .service-color.amber { background: #c99a2c; }
.plan-tag.red, .metric-icon.red, .room-icon.red, .treatment-icon.red { color: #b5474c; background: var(--red-soft); }
.plan-tag.green, .metric-icon.green, .room-icon.green, .treatment-icon.green { color: #3f8259; background: #eaf7ef; }
.plan-tag.teal, .metric-icon.teal, .room-icon.teal, .treatment-icon.teal { color: #1c7d78; background: #e3f5f4; }
.plan-tag.pink, .metric-icon.pink, .room-icon.pink, .treatment-icon.pink { color: #b2557f; background: #fceaf3; }
.plan-tag.amber, .metric-icon.amber, .room-icon.amber, .treatment-icon.amber { color: #9b7412; background: #fdf4dd; }

/* La topbar se fija debajo del banner de prototipo, no detrás de él. */
.topbar { top: 34px; z-index: 40; }

/* =====================================================================
   v8 · responsive
   Cuatro puntos de corte, de mayor a menor:
     1120  el lateral se reduce a rail de iconos
      900  tableta: las rejillas de dos y tres columnas se apilan
      680  móvil: el lateral pasa a cajón, las tablas se vuelven tarjetas
      480  móvil compacto
   ===================================================================== */

@media (max-width: 1120px) {
  .app-shell { grid-template-columns: 82px minmax(0, 1fr); }
  .sidebar { padding-inline: 13px; }
  .brand { justify-content: center; padding-inline: 0; }
  .brand > div:last-child, .nav-item > span:nth-child(2), .nav-count, .new-badge, .nav-label, .clinic-copy, .sidebar-foot .icon-button { display: none; }
  .nav-item { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-inline: 0; }
  .nav-item.active::before { left: -13px; }
  .nav-dot { position: absolute; right: 12px; top: 11px; }
  .nav-divider { margin-inline: 5px; }
  .sidebar-foot { justify-content: center; padding-inline: 0; }
  .metric-grid, .advanced-summary { grid-template-columns: repeat(2, 1fr); }
  .studio-workspace { grid-template-columns: minmax(0, 1fr) 280px; }
  .room-grid, .asset-grid, .settings-form, .professional-form { grid-template-columns: 1fr 1fr; }
  .bot-layout { grid-template-columns: minmax(430px, 1fr) 310px; }
  .consult-shell { grid-template-columns: 190px minmax(420px, 1fr); }
  .consult-summary { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
  .consult-summary h3, .consult-summary .prototype-note { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .prototype-banner { justify-content: flex-start; overflow: hidden; white-space: nowrap; }
  .dashboard-grid, .calendar-layout, .finance-grid, .profile-grid, .studio-workspace { grid-template-columns: minmax(0, 1fr); }
  .agenda-side, .studio-controls { display: grid; grid-template-columns: 1fr 1fr; }
  .treatment-grid { grid-template-columns: 1fr 1fr; }
  .consult-empty, .validation-layout, .consult-shell { grid-template-columns: minmax(0, 1fr); }
  .consult-patient, .consult-summary { position: static; }
  .consult-patient { display: grid; grid-template-columns: 60px 1fr; text-align: left; }
  .consult-patient .profile-avatar { grid-row: 1 / 4; margin: 0; }
  .consult-patient .alert-stack, .consult-patient .button { grid-column: 1 / -1; }
  .consult-summary { grid-template-columns: 1fr 1fr; }
  .portal-grid, .protocol-detail, .clinical-viewer, .bot-layout { grid-template-columns: minmax(0, 1fr); }
  .time-inputs { grid-template-columns: 1fr 1fr; }
  .module-body { padding: 14px; }
  .module-toolbar { align-items: flex-start; flex-wrap: wrap; }
  .advanced-summary, .supplier-grid, .admin-grid, .service-grid, .data-center, .security-layout, .notes-layout, .payment-record { grid-template-columns: minmax(0, 1fr); }
  .pos-layout, .camera-layout, .room-grid, .asset-grid, .settings-form, .professional-form { grid-template-columns: minmax(0, 1fr); }
  .admin-welcome { align-items: flex-start; flex-direction: column; }
  .expiry-row { grid-template-columns: 34px 1fr auto; }
  .expiry-meter { display: none; }
  .danger-zone, .bot-capabilities, .purchase-summary .button { grid-column: 1 / -1; }
  .pose-reference { display: grid; grid-template-columns: 120px 1fr; gap: 12px; }
  .pose-reference > .demo-chip { grid-column: 1 / -1; justify-self: start; }
  .pose-photo { height: 170px; margin: 0; }
  .bot-side, .purchase-summary { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  /* --- estructura: el lateral deja el flujo y se vuelve cajón --- */
  .app-shell { display: block; }
  .sidebar {
    position: fixed; top: 34px; left: 0; z-index: 60;
    width: min(286px, 84vw); height: calc(100dvh - 34px);
    padding: 20px 14px calc(16px + env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-102%); transition: transform .24s ease;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: none; }
  .sidebar-backdrop { position: fixed; inset: 34px 0 0; z-index: 55; background: rgba(20, 36, 45, .45); animation: fade .2s ease; }
  body.no-scroll { overflow: hidden; }

  /* dentro del cajón vuelven a verse las etiquetas ocultas por el rail */
  .sidebar .brand { justify-content: flex-start; padding-inline: 10px; }
  .sidebar .brand > div:last-child, .sidebar .nav-item > span:nth-child(2), .sidebar .nav-count, .sidebar .new-badge, .sidebar .nav-label, .sidebar .clinic-copy, .sidebar .sidebar-foot .icon-button { display: block; }
  .sidebar .nav-item { grid-template-columns: 20px 1fr auto; justify-items: initial; padding-inline: 12px; min-height: 46px; }
  .sidebar .nav-item.active::before { left: -14px; }
  .sidebar .nav-dot { position: static; }
  .sidebar .sidebar-foot { justify-content: flex-start; padding-inline: 8px; }

  .mobile-menu { display: grid; flex: 0 0 auto; }
  .topbar { height: 62px; padding: 0 14px; gap: 10px; }
  .searchbox { width: auto; flex: 1; }
  .searchbox kbd, .doctor-copy, .doctor-chevron { display: none; }
  .search-results { width: calc(100vw - 28px); left: 0; }
  .page-container { padding: 20px 14px calc(40px + env(safe-area-inset-bottom)); }
  .page-head { align-items: flex-start; flex-direction: column; }
  .head-actions { width: 100%; flex-wrap: wrap; }
  .head-actions .button { flex: 1 1 auto; justify-content: center; }

  /* --- tablas: cada fila se convierte en tarjeta, sin perder columnas --- */
  .data-table thead { display: none; }
  .data-table, .data-table tbody { display: block; }
  .data-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; padding: 12px 13px; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
  .data-table td { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 2px 0; border: 0; font-size: 12px; }
  .data-table td::before { content: attr(data-label); flex: 0 0 auto; color: var(--soft-muted); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
  .data-table td:empty, .data-table td[data-label=""] { display: none; }
  /* la primera celda es el título de la tarjeta y ocupa el ancho completo */
  .data-table td:first-child { grid-column: 1 / -1; display: block; margin-bottom: 4px; font-size: 13px; }
  .data-table td:first-child::before { display: none; }
  .data-table .table-note { display: block; }
  .inventory-master { min-width: 0; }
  .table-responsive { overflow: visible; }
  .table-card .data-table tr { border-radius: 0; border-inline: 0; border-top: 0; margin: 0; }
  .filter-row { flex-wrap: wrap; }
  .filter-search { width: 100%; min-width: 100%; }

  /* --- métricas y listas --- */
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric-card { padding: 14px; grid-template-columns: 34px 1fr; gap: 6px 9px; }
  .metric-icon { width: 34px; height: 34px; }
  .metric-value { font-size: 18px; }
  .metric-trend { display: none; }
  .appointment-row { grid-template-columns: 45px 3px 1fr; gap: 9px; }
  .quick-card { grid-template-columns: minmax(0, 1fr); }
  .quick-visual { display: none; }
  .agenda-side, .studio-controls, .bot-side, .purchase-summary { display: flex; flex-direction: column; }
  .inventory-summary, .treatment-grid, .advanced-summary { grid-template-columns: minmax(0, 1fr); }

  /* --- odontograma: hace scroll dentro de su caja, no arrastra la página --- */
  /* minmax(0,1fr): con `1fr` la columna crece hasta el contenido y el scroll
     interno del arco nunca llega a activarse. */
  .odontogram-wrap, .treatment-hero, .file-gallery { grid-template-columns: minmax(0, 1fr); }
  .tooth-arch { min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; padding: 22px 14px; }
  .tooth-row { justify-content: flex-start; width: max-content; min-width: 100%; gap: 4px; }
  .tooth-button { width: 32px; height: 44px; font-size: 9px; }
  .tooth-button > b { font-size: 9px; }

  /* --- agenda --- */
  .calendar-toolbar { align-items: stretch; flex-direction: column; gap: 10px; }
  .calendar-toolbar .month-nav { justify-content: space-between; }
  .calendar-toolbar .month-nav h2 { flex: 1; text-align: center; font-size: 13px; }
  .segmented { width: 100%; }
  .segmented button { flex: 1; }
  .month-day { min-height: 62px; padding: 6px 4px; }
  .month-day strong { font-size: 12px; }
  .month-day em { display: none; }
  .day-calendar { grid-template-columns: 48px minmax(0, 1fr); }
  .week-head, .week-body { grid-template-columns: 48px repeat(var(--day-count), minmax(104px, 1fr)); }
  .dynamic-week { min-width: 800px; }
  .agenda-kpis { grid-template-columns: 1fr 1fr; }
  .agenda-list-row { grid-template-columns: 3px 50px minmax(0, 1fr); row-gap: 6px; }
  .agenda-list-row .status-pill { grid-column: 2 / -1; justify-self: start; }
  .cal-free { opacity: 1; }

  /* --- consulta --- */
  .consult-steps span { display: none; }
  .consult-steps button { padding: 10px 3px; }
  .consult-step-body { padding: 18px; }
  .consult-footer { padding: 12px; }
  .confirm-grid, .completion-grid, .cfdi-preview, .appointment-detail { grid-template-columns: minmax(0, 1fr); }
  .consult-summary { grid-template-columns: minmax(0, 1fr); }

  /* --- modales tipo hoja inferior --- */
  .modal-backdrop { padding: 0; place-items: end stretch; }
  .modal, .modal.wide { width: 100%; max-height: 90dvh; border-radius: 20px 20px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); animation: sheet .22s ease; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .button { flex: 1 1 140px; justify-content: center; }
  .form-grid, .schedule-editor .time-inputs { grid-template-columns: minmax(0, 1fr); }
  .form-field.full { grid-column: auto; }
  .day-row { grid-template-columns: 30px 1fr; }
  .time-chips { grid-column: 1 / -1; }

  /* --- estudio --- */
  .studio-page { margin: -20px -14px -40px; }
  .studio-head { padding: 22px 16px 17px; align-items: flex-start; flex-direction: column; }
  .studio-workspace { padding: 0 16px 30px; }
  .studio-canvas { min-height: 400px; padding: 11px; }
  .photo-stage, .braces-photo { min-height: 340px; }
  .canvas-foot { align-items: flex-start; flex-direction: column; }
  /* área táctil ampliada para arrastrar las ligas con el dedo */
  .ligature::after { content: ""; position: absolute; inset: -14px; }

  .toast { right: 12px; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: none; }

  /* piso de legibilidad: nada por debajo de 10px en pantalla táctil */
  .treatment-stats span, .protocol-grid small, .pose-reference li span, .pose-reference li b,
  .table-note, .metric-label, .unit-copy, .card-subtitle, .status-pill, .demo-chip { font-size: 10px; }
}

@media (max-width: 480px) {
  .photo-source-actions, .product-detail, .protocol-grid, .sale-receipt { grid-template-columns: minmax(0, 1fr); }
  .pose-reference { display: block; }
  .pose-photo { height: 220px; margin: 11px 0; }
  .camera-actions { flex-wrap: wrap; }
  .phone-shell { min-height: 560px; border-radius: 16px; }
  .chat-body { padding: 13px; }
  .chat-bubble { max-width: 90%; }
  .sale-receipt .sale-total { grid-column: auto; }
  .surface-picker { grid-template-columns: repeat(3, 1fr); }
  .consult-steps { grid-template-columns: repeat(6, 1fr); }
}

@keyframes sheet { from { transform: translateY(14px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* v8 · celdas de tabla con significado */
.owing { color: #b5474c; }
.muted-cell { color: var(--soft-muted); font-size: 10px; }

/* =====================================================================
   v8 · agenda por columnas
   Cada día es una columna con una rejilla de 15 minutos: la altura de una
   cita corresponde a su duración real y los huecos libres son accionables.
   ===================================================================== */
.week-head, .week-body { display: grid; grid-template-columns: 64px repeat(var(--day-count), minmax(118px, 1fr)); }
.week-head { position: sticky; top: 0; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--line); }
.week-body { align-items: stretch; }
.day-calendar { display: grid; grid-template-columns: 64px minmax(0, 1fr); min-height: 0; }
.time-column, .day-column { display: grid; grid-auto-rows: calc(var(--slot, 15) * 1.05px); }
.day-column { border-left: 1px solid var(--line); }
.time-column .time-cell { padding: 2px 8px 0 0; border-top: 1px solid var(--line); color: var(--soft-muted); text-align: right; font-size: 10px; }
.cal-off { border-top: 1px solid var(--line); background: repeating-linear-gradient(135deg, #f4f6f7, #f4f6f7 5px, #eef1f2 5px, #eef1f2 10px); }
.cal-past { border-top: 1px solid var(--line); background: #fafbfb; }
/* El hueco libre se anuncia en voz baja: visible para leer la agenda de un
   vistazo, sin competir con las citas reales. */
.cal-free {
  border: 0; border-top: 1px solid var(--line); background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  color: var(--soft-muted); font-size: 10px; opacity: .62; transition: .15s ease;
}
.cal-free::before { content: ""; position: absolute; inset: 3px; border: 1px dashed #d3dcdd; border-radius: 8px; pointer-events: none; }
.cal-free { position: relative; }
.cal-free:hover, .cal-free:focus-visible { opacity: 1; background: var(--green-soft); color: var(--green); }
.cal-free:hover::before { border-color: var(--green); }
.cal-free svg { width: 12px; }
.day-column .cal-event {
  margin: 1px 3px; padding: 5px 7px; border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 1px; min-width: 0;
}
.day-column .cal-event strong { font-size: 10px; line-height: 1.2; }
.day-column .cal-event span { font-size: 9px; color: var(--muted); }
.day-column .cal-event em { font-size: 8px; font-style: normal; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.cal-event.status-cancelada, .cal-event.status-noshow { opacity: .5; text-decoration: line-through; }
.cal-event.status-completada { opacity: .74; }
.cal-event.status-espera, .cal-event.status-consulta { box-shadow: 0 0 0 2px var(--green); }
.day-column.blocked {
  grid-auto-rows: auto; align-content: start; justify-items: center; padding: 14px 8px;
  background: repeating-linear-gradient(135deg, #fff6ea, #fff6ea 6px, #fdeed9 6px, #fdeed9 12px);
  border-left: 1px solid var(--line);
}
/* el motivo se queda a la vista aunque la columna sea más alta que el viewport */
.day-column.blocked span { position: sticky; top: 14px; display: flex; flex-direction: column; align-items: center; gap: 7px; color: #96602c; text-align: center; font-size: 10px; font-weight: 700; line-height: 1.35; }
.day-column.blocked svg { width: 17px; }
.month-day.blocked { background: repeating-linear-gradient(135deg, #fff6ea, #fff6ea 6px, #fdeed9 6px, #fdeed9 12px); }
.month-dots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.month-dots i { width: 6px; height: 6px; border-radius: 50%; }
.month-dots i.orange { background: var(--orange); } .month-dots i.blue { background: var(--blue); }
.month-dots i.purple { background: #9381c0; } .month-dots i.cyan { background: var(--green); }
.month-dots i.red { background: var(--red); } .month-dots i.green { background: #4e9a6c; }
.month-dots i.teal { background: #2f9b95; } .month-dots i.pink { background: #cd6a9b; }
.month-dots i.amber { background: #c99a2c; }
.month-day em { margin-top: auto; color: var(--muted); font-style: normal; font-size: 9px; }

/* vista lista — la natural en móvil */
.agenda-list { display: grid; gap: 20px; padding: 4px 2px 8px; }
.agenda-list h3 { margin: 0 0 9px; font: 700 12px/1 "Manrope", sans-serif; text-transform: capitalize; display: flex; align-items: center; gap: 8px; }
.agenda-list-row { width: 100%; display: grid; grid-template-columns: 3px 58px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px 12px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left; cursor: pointer; }
.agenda-list-row:hover { border-color: var(--green); }
.agenda-list-row > i { width: 3px; height: 30px; border-radius: 3px; background: var(--green); }
.agenda-list-row > i.orange { background: var(--orange); } .agenda-list-row > i.blue { background: var(--blue); }
.agenda-list-row > i.purple { background: #9381c0; } .agenda-list-row > i.red { background: var(--red); }
.agenda-list-row > i.green { background: #4e9a6c; } .agenda-list-row > i.teal { background: #2f9b95; }
.agenda-list-row > i.pink { background: #cd6a9b; } .agenda-list-row > i.amber { background: #c99a2c; }
.agenda-list-time { display: flex; flex-direction: column; font-weight: 700; font-size: 12px; }
.agenda-list-time small { color: var(--muted); font-weight: 500; font-size: 9px; }
.agenda-list-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agenda-list-copy strong { font-size: 12px; }
.agenda-list-copy small { color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-blocked { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 6px; border-radius: 10px; background: #fff2e6; color: #8e4f24; font-size: 11px; }
.agenda-blocked svg { width: 14px; }

/* panel lateral de la agenda */
.agenda-kpis { grid-template-columns: 1fr 1fr; }
.confirm-list, .block-list, .waitlist { display: grid; gap: 6px; margin-bottom: 11px; }
.confirm-list button, .block-list > div, .waitlist > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: left; }
.confirm-list button { cursor: pointer; }
.confirm-list button:hover { border-color: var(--green); }
.confirm-list span, .block-list span, .waitlist span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.confirm-list strong, .block-list strong, .waitlist strong { font-size: 11px; }
.confirm-list small, .block-list small, .waitlist small { color: var(--muted); font-size: 9px; }
.confirm-list em { display: flex; align-items: center; gap: 4px; color: var(--green); font-style: normal; font-size: 9px; }
.confirm-list svg, .block-list svg { width: 13px; }
.button.small { min-height: 30px; padding: 0 11px; font-size: 10px; }

/* línea de tiempo de la cita */
.appointment-timeline { display: grid; gap: 0; margin: 16px 0 0; padding: 0; list-style: none; }
.appointment-timeline li { display: grid; grid-template-columns: 26px 1fr; gap: 11px; padding-bottom: 13px; position: relative; }
.appointment-timeline li:not(:last-child)::before { content: ""; position: absolute; left: 12px; top: 26px; bottom: 0; width: 1px; background: var(--line); }
.appointment-timeline i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--canvas); color: var(--soft-muted); }
.appointment-timeline svg { width: 13px; }
.appointment-timeline li.done i { background: var(--green-soft); color: var(--green); }
.appointment-timeline span { display: flex; flex-direction: column; gap: 2px; }
.appointment-timeline strong { font-size: 11px; }
.appointment-timeline small { color: var(--muted); font-size: 9px; }
.appointment-timeline li:not(.done) strong { color: var(--soft-muted); font-weight: 500; }
.block-kinds { display: flex; }

/* =====================================================================
   v8 · tratamientos
   ===================================================================== */
.category-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin-bottom: 16px; }
.category-chip { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left; cursor: pointer; }
.category-chip:hover { border-color: var(--green); background: #fbfdfd; }
.category-chip > i { width: 8px; height: 26px; border-radius: 4px; flex: 0 0 auto; }
.category-chip > i.cyan { background: var(--green); } .category-chip > i.blue { background: var(--blue); }
.category-chip > i.purple { background: #9381c0; } .category-chip > i.orange { background: var(--orange); }
.category-chip > i.red { background: var(--red); } .category-chip > i.green { background: #4e9a6c; }
.category-chip > i.teal { background: #2f9b95; } .category-chip > i.pink { background: #cd6a9b; }
.category-chip > i.amber { background: #c99a2c; }
.category-chip span { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.category-chip strong { font-size: 11px; }
.category-chip small { color: var(--muted); font-size: 9px; }
.category-chip b { font-size: 12px; white-space: nowrap; }
.progress-cell { display: flex; flex-direction: column; gap: 5px; min-width: 118px; }
.progress-cell i { display: block; height: 5px; border-radius: 4px; background: var(--line); overflow: hidden; }
.progress-cell b { display: block; height: 100%; border-radius: 4px; background: var(--green); }
.progress-cell span { color: var(--muted); font-size: 9px; }
.plan-detail { display: grid; gap: 16px; }
.plan-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 9px; }
.plan-summary > div { padding: 12px 13px; border-radius: 11px; background: var(--surface-soft); display: flex; flex-direction: column; gap: 4px; }
.plan-summary span { color: var(--muted); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
.plan-summary strong { font-size: 15px; }
.phase-track { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin: 0; padding: 0; list-style: none; }
.phase-track li { display: flex; flex-direction: column; gap: 6px; color: var(--soft-muted); font-size: 9px; }
.phase-track i { display: block; height: 4px; border-radius: 3px; background: var(--line); }
.phase-track li.done i, .phase-track li.current i { background: var(--green); }
.phase-track li.current { color: var(--green); font-weight: 700; }
.phase-track li.done { color: var(--muted); }
.session-list { display: grid; gap: 5px; }
.session-list > div { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; font-size: 11px; }
.session-list span { color: var(--muted); font-size: 10px; }
.session-list em { color: var(--muted); font-style: normal; font-size: 10px; }
.modal-section { margin: 20px 0 9px; font: 700 12px/1 "Manrope", sans-serif; }
.protocol-material { display: flex; align-items: center; gap: 9px; padding: 7px 0; }
.protocol-material span:nth-child(2) { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.protocol-material strong { font-size: 11px; }
.protocol-material small { color: var(--muted); font-size: 9px; }
.protocol-material b { font-size: 10px; color: var(--muted); white-space: nowrap; }
.protocol-material.short b { color: var(--red); }

/* selector de insumos del servicio */
.material-picker { max-height: 260px; overflow-y: auto; display: grid; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.material-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 72px; align-items: center; gap: 9px; padding: 5px 7px; border-radius: 9px; background: var(--surface); }
.material-row span:nth-child(2) { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.material-row strong { font-size: 11px; }
.material-row small { color: var(--muted); font-size: 9px; }
.material-row input { width: 100%; padding: 6px; border: 1px solid var(--line); border-radius: 7px; font-size: 11px; text-align: center; }
.field-hint { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 5px; max-height: 190px; overflow-y: auto; padding: 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.checkbox-grid label { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 8px; background: var(--surface); font-size: 11px; cursor: pointer; }
.checkbox-grid input { accent-color: var(--green); }

/* v8 · el texto largo (correos, notas) envuelve en vez de ensanchar la columna */
.contact-item, .contact-cell, .person-cell > div, .agenda-list-copy { min-width: 0; }
.contact-item span, .contact-cell span, .person-cell strong, .person-cell span { overflow-wrap: anywhere; }

/* v8 · hueco muerto entre citas: existe, pero no cabe ningún servicio */
.cal-gap { border-top: 1px solid var(--line); background: linear-gradient(180deg, #fbfcfc, #f6f8f8); }