@import url('burotec-fonts.css');

/* Burotec2 Styles v20260721-999 - FORCE FRESH LOAD */
:root {
  color-scheme: light;
  --brand: #362fd1;
  --brand-dark: #27219f;
  --brand-soft: #efefff;
  --navy: #14213d;
  --blue: #0158b5;
  --ink: #1b2436;
  --muted: #687187;
  --line: #e6e9f0;
  --surface: #ffffff;
  --canvas: #f5f7fb;
  --success: #16855b;
  --warning: #b86e00;
  --danger: #be3d4b;
  --shadow: 0 14px 36px rgba(33, 43, 74, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-family);
}

[hidden] { display: none !important; }

/* Inicio de la aplicación: aislado para que ninguna pantalla previa se vea durante la sesión. */
.app-loading-screen { position: relative; display: grid; min-height: 100vh; place-items: center; isolation: isolate; overflow: hidden; padding: 24px; color: #fff; background: radial-gradient(circle at 14% 18%, rgba(95, 142, 255, .45), transparent 31%), radial-gradient(circle at 85% 82%, rgba(128, 86, 246, .38), transparent 34%), linear-gradient(142deg, #17276b, #2f32b9 52%, #171a66); }
.app-loading-screen__halo { position: absolute; z-index: -1; width: min(66vw, 680px); aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; }
.app-loading-screen__halo--one { top: -31%; left: -12%; animation: app-loading-drift 8s ease-in-out infinite alternate; }
.app-loading-screen__halo--two { right: -15%; bottom: -40%; width: min(76vw, 820px); border-width: 34px; border-color: rgba(160, 131, 255, .12); animation: app-loading-drift 10s ease-in-out infinite alternate-reverse; }
.app-loading-screen__content { display: grid; width: min(100%, 390px); justify-items: center; text-align: center; }
.app-loading-screen__wordmark { color: #fff; font-family: 'Burotec Inter', Inter, ui-sans-serif, sans-serif; font-size: 20px; font-weight: 700; letter-spacing: .02em; text-shadow: 0 2px 18px rgba(8, 13, 74, .25); }
.app-loading-screen__orbit { position: relative; width: 58px; height: 27px; margin: 20px 0 14px; }
.app-loading-screen__orbit::before { position: absolute; inset: 14px 0 auto; height: 2px; border-radius: 999px; background: rgba(255, 255, 255, .28); content: ""; }
.app-loading-screen__orbit i { position: absolute; top: 7px; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .12); animation: app-loading-hop 1.2s ease-in-out infinite; }
.app-loading-screen__orbit i:nth-child(1) { left: 0; }
.app-loading-screen__orbit i:nth-child(2) { left: calc(50% - 5px); animation-delay: .14s; }
.app-loading-screen__orbit i:nth-child(3) { right: 0; animation-delay: .28s; }
.app-loading-screen__copy { display: grid; gap: 9px; }
.app-loading-screen__copy strong { font-size: 21px; font-weight: 900; letter-spacing: -.025em; }
.app-loading-screen__copy span { color: rgba(255, 255, 255, .78); font-size: 14px; font-weight: 650; line-height: 1.5; }
@keyframes app-loading-hop { 0%, 100% { transform: translateY(0); opacity: .58; } 46% { transform: translateY(-13px); opacity: 1; } }
@keyframes app-loading-drift { to { transform: translate(32px, 24px) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .app-loading-screen *, .app-loading-screen *::before { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

.login-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(380px, .95fr) minmax(480px, 1.05fr); background: #fff; }
.login-visual { display: flex; min-height: 100vh; flex-direction: column; padding: clamp(36px, 5vw, 84px); color: #fff; background: radial-gradient(circle at 18% 12%, rgba(117,108,255,.68), transparent 35%), linear-gradient(145deg, #3029c5, #17135c 70%); }
.login-brand { display: flex; align-items: center; gap: 18px; }
.login-brand strong { font-family: 'Burotec Inter', Inter, ui-sans-serif, sans-serif; font-size: 32px; font-weight: 700; letter-spacing: .02em; }
.login-brand .login-brand__monogram { display: inline-flex; width: 52px; height: 52px; flex: 0 0 52px; align-items: center; justify-content: center; border: 1px solid #d8e9ff; border-radius: 16px; color: #1687f2; background: #fff; box-shadow: 0 7px 18px rgba(10, 23, 88, .18); font-family: 'Burotec Inter', Inter, ui-sans-serif, sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -.025em; line-height: 1; white-space: nowrap; }
.login-message { margin: auto 0; }
.login-message h1 { max-width: 700px; margin: 16px 0 24px; font-size: clamp(38px, 4.2vw, 62px); line-height: 1.08; letter-spacing: -.045em; font-weight: 900; text-wrap: balance; }
.login-message > p:last-child { max-width: 520px; margin: 0; color: rgba(255,255,255,.82); font-size: 16px; line-height: 1.7; font-weight: 500; }
.login-visual .eyebrow { color: #bdb9ff; font-size: 14px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.login-panel { display: grid; place-items: center; padding: 48px 36px; background: linear-gradient(145deg, #fff, #f6f7fc); }
.login-card { width: min(520px, 100%); padding: clamp(36px, 4vw, 54px); border: 1px solid var(--line); border-radius: 26px; background: #fff; box-shadow: 0 28px 80px rgba(33,43,74,.14); }
.login-heading { margin-bottom: 32px; }
.login-heading .eyebrow { font-size: 13px; font-weight: 850; letter-spacing: .08em; color: var(--brand); text-transform: uppercase; margin: 0 0 6px; }
.login-heading h2 { margin: 8px 0 10px; font-size: 34px; font-weight: 900; letter-spacing: -.04em; color: #1e293b; }
.login-heading > p:last-child { margin: 0; color: #64748b; font-size: 14px; line-height: 1.65; font-weight: 500; }
.login-field { display: grid; gap: 8px; margin-top: 20px; color: #334155; font-size: 14px; font-weight: 800; }
.login-field input { width: 100%; min-height: 52px; padding: 14px 18px; border: 1px solid #cbd5e1; border-radius: 12px; outline: none; color: #1e293b; background: #f8fafc; font-size: 15px; font-weight: 600; transition: .18s ease; }
.login-field input:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(54,47,209,.12); }
.login-password-wrapper { position: relative; display: flex; align-items: center; width: 100%; }
.login-password-wrapper input { padding-right: 48px; }
.login-password-toggle { position: absolute; right: 8px; background: transparent; border: 0; padding: 8px; border-radius: 8px; color: #64748b; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color .18s ease, background-color .18s ease; }
.login-password-toggle:hover { color: var(--brand); background: rgba(54,47,209,.06); }
.login-password-toggle .app-icon { width: 20px; height: 20px; }
.remember-field { display: flex; align-items: center; gap: 12px; margin: 22px 0 20px; color: #475569; font-size: 14px; font-weight: 700; cursor: pointer; }
.remember-field input { width: 20px; height: 20px; accent-color: var(--brand); cursor: pointer; }
.login-card .login-recovery-open { display: flex; width: max-content; align-items: center; gap: 8px; margin: -4px 0 18px auto; padding: 5px 0; border: 0; color: #4338ca; background: transparent; font-size: 13px; font-weight: 800; }
.login-card .login-recovery-open:hover,.login-card .login-recovery-open:focus-visible { color: #28219f; text-decoration: underline; outline: none; }
.login-card .login-recovery-open .app-icon { width: 17px; height: 17px; }
.login-error { min-height: 22px; margin: 0 0 10px; color: var(--danger); font-size: 13px; font-weight: 700; }
.login-submit { width: 100%; min-height: 52px; padding: 15px; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--brand), #625af0); font-size: 15px; font-weight: 900; letter-spacing: .03em; box-shadow: 0 12px 28px rgba(54,47,209,.26); transition: transform .15s ease, box-shadow .15s ease; }
.login-submit:active { transform: scale(.98); }
.login-submit:disabled { cursor: wait; opacity: .65; }
.login-footnote { margin: 22px 0 0; color: #64748b; font-size: 12px; line-height: 1.6; text-align: center; font-weight: 500; }
.login-shell .auth-recovery-request__back { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 24px; padding: 7px 0; border: 0; color: #526179; background: transparent; font-size: 12px; font-weight: 900; letter-spacing: .04em; }
.login-shell .auth-recovery-request__back:hover,.login-shell .auth-recovery-request__back:focus-visible { color: #362fd1; outline: none; }
.login-shell .auth-recovery-request__back .app-icon { width: 17px; height: 17px; }
.login-shell .auth-recovery-request__form-fields { display: grid; }
.login-shell .auth-recovery-request__success { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 16px; align-items: start; margin: 8px 0 24px; padding: 19px; border: 1px solid #bfe4d7; border-radius: 14px; color: #215f4d; background: #edf9f5; }
.login-shell .auth-recovery-request__success > span { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(135deg,#149568,#23b784); }
.login-shell .auth-recovery-request__success .app-icon { width: 24px; height: 24px; }
.login-shell .auth-recovery-request__success strong { display: block; color: #174f40; font-size: 17px; }
.login-shell .auth-recovery-request__success p { margin: 6px 0 0; font-size: 13px; font-weight: 600; line-height: 1.55; }
.login-shell .auth-recovery-request__identity-help { margin-top: 22px; padding-top: 20px; border-top: 1px solid #e3e7ef; color: #59677b; }
.login-shell .auth-recovery-request__identity-help summary { color: #3f4b60; font-size: 13px; font-weight: 850; cursor: pointer; }
.login-shell .auth-recovery-request__identity-help p { margin: 11px 0 0; font-size: 12px; font-weight: 550; line-height: 1.6; }

button, input { font: inherit; }
button { cursor: pointer; }

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  display: flex;
  width: 260px;
  flex-direction: column;
  color: #fff;
  background:
    radial-gradient(circle at 10% 0%, rgba(102, 95, 255, 0.5), transparent 35%),
    linear-gradient(180deg, #2f29bf 0%, #201b80 62%, #17145e 100%);
  box-shadow: 12px 0 40px rgba(29, 25, 105, 0.16);
}

.brand { display: flex; align-items: center; gap: 13px; min-height: 104px; padding: 24px 25px; border-bottom: 1px solid rgba(255,255,255,.12); }
.brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,255,255,.34); border-radius: 13px; background: rgba(255,255,255,.12); font-size: 24px; }
.brand strong { display: block; font-size: 18px; letter-spacing: .08em; }
.brand small { display: block; margin-top: 3px; color: rgba(255,255,255,.68); font-size: 11px; letter-spacing: .04em; }

.nav-list { display: grid; gap: 6px; padding: 22px 14px; }
.nav-item { display: flex; align-items: center; gap: 13px; width: 100%; padding: 12px 14px; border: 0; border-radius: 11px; color: rgba(255,255,255,.74); background: transparent; text-align: left; transition: .18s ease; }
.nav-item span { display: grid; width: 23px; height: 23px; place-items: center; color: rgba(255,255,255,.86); font-size: 17px; }
.nav-item:hover, .nav-item:focus-visible { color: #fff; background: rgba(255,255,255,.1); outline: none; }
.nav-item.is-active { color: #fff; background: rgba(255,255,255,.17); box-shadow: inset 3px 0 0 #fff; }

.sidebar-footer { margin-top: auto; padding: 22px 26px 28px; border-top: 1px solid rgba(255,255,255,.1); }
.local-badge { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 850; letter-spacing: .1em; }
.local-badge span { width: 10px; height: 10px; border-radius: 50%; background: #59e6ad; box-shadow: 0 0 0 4px rgba(89,230,173,.2); }
.sidebar-footer p { margin: 8px 0 0; color: rgba(255,255,255,.55); font-size: 11px; }

.main-column { width: calc(100% - 260px); min-height: 100vh; margin-left: 260px; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; min-height: 104px; align-items: center; gap: 16px; padding: 18px clamp(24px, 4vw, 58px); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.92); backdrop-filter: blur(14px); }
.topbar h1 { margin: 3px 0 0; font-size: clamp(22px, 2vw, 28px); line-height: 1.1; }
.eyebrow { margin: 0; color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.topbar-actions { display: flex; align-items: center; gap: 15px; margin-left: auto; }
.identity-summary { display: grid; gap: 2px; text-align: right; }
.identity-summary strong { max-width: 190px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.identity-summary small { max-width: 190px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.api-status { display: flex; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #fff; font-size: 11px; }
.api-status span { width: 8px; height: 8px; border-radius: 50%; background: #bdc3cf; }
.api-status.is-online span { background: #20b77c; box-shadow: 0 0 0 4px rgba(32,183,124,.13); }
.api-status.is-online strong { color: var(--success); }
.api-status.is-offline span { background: var(--danger); }
.avatar { display: grid; width: 42px; height: 42px; place-items: center; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--brand), #675fff); font-size: 12px; font-weight: 800; box-shadow: 0 8px 20px rgba(54,47,209,.22); }
.menu-button { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 11px; color: var(--brand); background: #fff; font-size: 20px; }

.content { padding: 34px clamp(24px, 4vw, 58px) 60px; }
.view { display: none; animation: reveal .24s ease; }
.view.is-visible { display: block; }
@keyframes reveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.notice { display: flex; align-items: center; gap: 15px; padding: 15px 18px; border: 1px solid #d8dcff; border-radius: 15px; background: linear-gradient(90deg, #f0efff, #f8f9ff); }
.notice-icon { display: grid; flex: 0 0 35px; height: 35px; place-items: center; border-radius: 11px; color: #fff; background: var(--brand); font-weight: 800; }
.notice strong { font-size: 13px; }
.notice p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.notice > span { margin-left: auto; padding: 7px 10px; border-radius: 8px; color: var(--brand); background: #fff; font-size: 10px; font-weight: 800; white-space: nowrap; }

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 34px 0 20px; }
.section-heading.compact { align-items: center; margin-top: 2px; }
.section-heading h2 { margin: 5px 0 0; font-size: clamp(24px, 2.5vw, 32px); letter-spacing: -.03em; }
.section-copy { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.primary-action, .secondary-action { padding: 11px 17px; border-radius: 10px; font-size: 12px; font-weight: 800; }
.primary-action { border: 0; color: #fff; background: var(--brand); box-shadow: 0 9px 20px rgba(54,47,209,.2); }
.primary-action:hover { background: var(--brand-dark); }
.secondary-action { border: 1px solid #d8d9eb; color: var(--brand); background: #fff; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.metric-card { position: relative; overflow: hidden; min-height: 155px; padding: 21px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: 0 8px 24px rgba(33,43,74,.05); }
.metric-card::after { content: ""; position: absolute; top: -38px; right: -34px; width: 115px; height: 115px; border-radius: 50%; opacity: .08; background: currentColor; }
.metric-card p { margin: 19px 0 3px; color: var(--muted); font-size: 12px; }
.metric-card strong { display: block; font-size: 28px; letter-spacing: -.04em; }
.metric-card > span { color: #9299a9; font-size: 10px; }
.metric-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: currentColor; background: currentColor; font-size: 0; }
.metric-icon::after { content: attr(data-icon); }
.metric-card .metric-icon { color: inherit; }
.metric-card .metric-icon::before { content: ""; width: 10px; height: 10px; border: 3px solid #fff; border-radius: 3px; opacity: .95; }
.metric-purple { color: #514ae0; } .metric-blue { color: #2376c9; } .metric-cyan { color: #168ea0; } .metric-orange { color: #c77923; }
.metric-card p, .metric-card strong, .metric-card > span { color: var(--ink); }
.metric-card p { color: var(--muted); } .metric-card > span { color: #9299a9; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .8fr); gap: 18px; margin-top: 20px; }
.panel { border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: var(--shadow); }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 21px 23px; border-bottom: 1px solid var(--line); }
.panel-header h3 { margin: 4px 0 0; font-size: 18px; }
.text-action { border: 0; color: var(--brand); background: transparent; font-size: 11px; font-weight: 800; }

.appointment-list { padding: 6px 23px 12px; }
.appointment-row { display: grid; grid-template-columns: 46px 4px minmax(0, 1fr) auto; align-items: center; gap: 15px; min-height: 73px; border-bottom: 1px solid #edf0f5; }
.appointment-row:last-child { border-bottom: 0; }
.appointment-row time { color: var(--ink); font-size: 12px; font-weight: 800; }
.appointment-line { width: 4px; height: 34px; border-radius: 99px; background: #8a84ed; }
.appointment-row div strong { font-size: 12px; }
.appointment-row div p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.tag { display: inline-flex; justify-content: center; min-width: 76px; padding: 6px 8px; border-radius: 999px; font-size: 9px; font-weight: 800; }
.tag-confirmed { color: #13724f; background: #e3f6ee; }
.tag-pending { color: #9a5e05; background: #fff0d6; }
.tag-cancelled { color: #a83241; background: #fbe5e8; }

.progress-panel { padding-bottom: 12px; }
.progress-item { padding: 15px 23px 0; }
.progress-item div { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 11px; }
.progress-item div span { color: var(--muted); }
.progress-item div strong { color: var(--brand); }
progress { width: 100%; height: 7px; overflow: hidden; border: 0; border-radius: 99px; background: #eceef4; }
progress::-webkit-progress-bar { background: #eceef4; border-radius: 99px; }
progress::-webkit-progress-value { background: linear-gradient(90deg, var(--brand), #6d65f2); border-radius: 99px; }
progress::-moz-progress-bar { background: var(--brand); border-radius: 99px; }
.progress-note { display: flex; gap: 10px; margin: 19px 23px 8px; padding: 12px; border-radius: 11px; background: var(--brand-soft); }
.progress-note span { display: grid; flex: 0 0 22px; height: 22px; place-items: center; border-radius: 50%; color: #fff; background: var(--brand); font: 700 11px Georgia, serif; }
.progress-note p { margin: 0; color: #66648a; font-size: 10px; line-height: 1.5; }

.table-panel { overflow: hidden; }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.search-field { display: flex; width: min(430px, 100%); align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: #fafbfc; }
.search-field input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.record-count { color: var(--muted); font-size: 11px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 13px 18px; color: #8a91a2; background: #fafbfc; font-size: 9px; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
td { padding: 15px 18px; border-top: 1px solid #edf0f5; color: #596175; font-size: 11px; white-space: nowrap; }
td strong { display: block; color: var(--ink); font-size: 12px; }
td small { display: block; margin-top: 3px; color: #9299aa; }

.week-strip { display: grid; grid-template-columns: repeat(5, minmax(70px, 1fr)); gap: 10px; margin: 22px 0 16px; }
.week-strip button { display: grid; gap: 4px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: #fff; }
.week-strip small { font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.week-strip strong { color: var(--ink); font-size: 18px; }
.week-strip .is-today { color: #fff; border-color: var(--brand); background: var(--brand); box-shadow: 0 9px 20px rgba(54,47,209,.2); }
.week-strip .is-today strong { color: #fff; }
.local-only-chip { padding: 7px 10px; border-radius: 8px; color: var(--warning); background: #fff3dc; font-size: 9px; font-weight: 800; }
.appointment-list.large { padding-block: 12px 18px; }
.appointment-list.large .appointment-row { min-height: 82px; }

.empty-state { max-width: 580px; margin: 10vh auto 0; padding: 50px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow); text-align: center; }
.empty-icon { display: grid; width: 58px; height: 58px; margin: 0 auto 22px; place-items: center; border-radius: 17px; color: var(--brand); background: var(--brand-soft); font-size: 28px; }
.empty-state h2 { margin: 8px 0; font-size: 28px; }
.empty-state > p:not(.eyebrow) { margin: 0 auto 23px; color: var(--muted); font-size: 13px; line-height: 1.7; }

.toast { position: fixed; right: 24px; bottom: 24px; z-index: 50; max-width: 360px; padding: 13px 17px; border-radius: 11px; color: #fff; background: #20243a; box-shadow: 0 16px 38px rgba(20,25,50,.25); font-size: 12px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.backdrop { display: none; position: fixed; inset: 0; z-index: 15; background: rgba(16,18,40,.48); }

@media (max-width: 1050px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-visual { min-height: 240px; padding: 26px; }
  .login-message { margin: 42px 0 30px; }
  .login-message h1 { font-size: 38px; }
  .login-panel { padding: 22px 16px 40px; }
  .login-card { margin-top: -40px; padding: 30px 24px; }
  .login-visual > .local-badge { display: none; }
  .sidebar { transform: translateX(-102%); transition: transform .22s ease; }
  .sidebar.is-open { transform: translateX(0); }
  .backdrop.is-visible { display: block; }
  .main-column { width: 100%; margin-left: 0; }
  .menu-button { display: grid; place-items: center; }
  .topbar { min-height: 84px; padding: 14px 18px; }
  .topbar .eyebrow { display: none; }
  .topbar h1 { font-size: 20px; }
  .api-status strong { display: none; }
  .api-status { padding: 10px; }
  .identity-summary { display: none; }
  .content { padding: 22px 16px 45px; }
  .notice { align-items: flex-start; }
  .notice > span { display: none; }
  .section-heading { align-items: center; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric-card { min-height: 140px; padding: 16px; }
  .metric-card strong { font-size: 24px; }
  .appointment-row { grid-template-columns: 40px 4px minmax(145px,1fr); gap: 10px; padding: 8px 0; }
  .appointment-row .tag { grid-column: 3; justify-self: start; }
  .table-toolbar { align-items: stretch; flex-direction: column; }
  .week-strip { overflow-x: auto; }
  .empty-state { margin-top: 4vh; padding: 34px 22px; }
}

@media (max-width: 480px) {
  .metric-grid { grid-template-columns: 1fr; }
  .section-heading { align-items: stretch; flex-direction: column; }
  .section-heading .primary-action { width: 100%; }
  .notice p { font-size: 11px; }
}

/* Workspace de fichas: módulos separados, una sola pantalla para el usuario. */
.nav-item-pending { opacity: .58; cursor: default; }
.nav-item-pending small { margin-left: auto; padding: 3px 6px; border-radius: 999px; color: #fff; background: rgba(255,255,255,.14); font-size: 8px; text-transform: uppercase; }
.sidebar-context { margin: 8px 18px; padding: 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.07); }
.sidebar-context .eyebrow { color: #bdb9ff; }
.sidebar-context strong { display: block; margin-top: 7px; font-size: 12px; }
.sidebar-context > p:last-child { margin: 8px 0 0; color: rgba(255,255,255,.62); font-size: 10px; line-height: 1.55; }
.workspace-content { padding-top: 26px; }
.workspace-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.workspace-heading h2 { margin: 5px 0 5px; font-size: clamp(24px, 2.5vw, 34px); letter-spacing: -.04em; }
.workspace-heading > div > p:last-child { margin: 0; color: var(--muted); font-size: 12px; }
.workspace-heading-actions { display: flex; align-items: center; gap: 10px; }
.workspace-heading-actions .primary-action:disabled { cursor: default; opacity: .56; }
.safe-chip { padding: 8px 11px; border: 1px solid #cbe8dd; border-radius: 999px; color: #147353; background: #eefaf5; font-size: 9px; font-weight: 800; white-space: nowrap; }

.clinical-workspace { display: grid; grid-template-columns: minmax(300px, 340px) minmax(500px, 1fr) minmax(220px, 270px); align-items: start; gap: 18px; }
.patient-browser, .patient-record, .agenda-reserved { overflow: hidden; }
.patient-browser { position: sticky; top: 122px; }
.patient-browser-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 12px; }
.patient-browser-header h3 { margin: 4px 0 0; font-size: 19px; }
.patient-total { padding: 6px 9px; border-radius: 999px; color: var(--brand); background: var(--brand-soft); font-size: 9px; font-weight: 800; }
.workspace-search { display: flex; align-items: center; gap: 9px; margin: 0 14px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: #fafbfe; }
.workspace-search:focus-within { border-color: #aaa6ef; box-shadow: 0 0 0 4px rgba(54,47,209,.08); }
.workspace-search input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; }
.patient-list-status { margin: 18px; color: var(--muted); font-size: 11px; text-align: center; }
.patient-list { max-height: calc(100vh - 350px); min-height: 330px; overflow-y: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.patient-list-item { display: grid; width: 100%; grid-template-columns: 38px minmax(0, 1fr) 18px; align-items: center; gap: 11px; padding: 12px 14px; border: 0; border-bottom: 1px solid #eef0f5; color: var(--ink); background: #fff; text-align: left; transition: .16s ease; }
.patient-list-item:hover { background: #fafaff; }
.patient-list-item.is-selected { background: linear-gradient(90deg, #f0efff, #fbfbff); box-shadow: inset 3px 0 0 var(--brand); }
.patient-list-avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: var(--brand); background: var(--brand-soft); font-size: 10px; font-weight: 900; }
.patient-list-item.is-selected .patient-list-avatar { color: #fff; background: var(--brand); }
.patient-list-copy { min-width: 0; }
.patient-list-copy strong, .patient-list-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.patient-list-copy strong { font-size: 11px; }
.patient-list-copy small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.patient-list-arrow { color: #aaaec0; font-size: 22px; }
.patient-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 7px; padding: 12px; }
.patient-pagination button { padding: 8px; font-size: 9px; }
.patient-pagination button:last-child { justify-self: stretch; }
.patient-pagination span { color: var(--muted); font-size: 8px; white-space: nowrap; }
.patient-pagination button:disabled { cursor: default; opacity: .38; }

.patient-record { min-height: 650px; }
.record-loading, .record-empty { display: grid; min-height: 630px; place-content: center; justify-items: center; gap: 12px; color: var(--muted); text-align: center; }
.record-loading strong, .record-empty h3 { color: var(--ink); }
.record-empty span { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 18px; color: var(--brand); background: var(--brand-soft); font-size: 26px; }
.record-empty h3 { margin: 5px 0 0; }
.record-empty p { margin: 0; font-size: 11px; }
.loading-orbit { width: 35px; height: 35px; border: 3px solid #e4e3ff; border-top-color: var(--brand); border-radius: 50%; animation: orbit .8s linear infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }
.record-header { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 15px; padding: 22px 24px; border-bottom: 1px solid var(--line); background: linear-gradient(115deg, #fafaff, #fff); }
.record-avatar { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--brand), #7b73f3); font-size: 16px; font-weight: 900; box-shadow: 0 10px 20px rgba(54,47,209,.2); }
.record-title h2 { margin: 4px 0; font-size: clamp(20px, 2vw, 27px); letter-spacing: -.035em; }
.record-title > p:last-child { margin: 0; color: var(--muted); font-size: 10px; }
.record-id { align-self: start; padding: 6px 8px; border-radius: 7px; color: var(--muted); background: #f2f3f7; font-size: 8px; font-weight: 800; }
.record-alerts { display: grid; gap: 7px; padding: 13px 24px 0; }
.record-alert { display: flex; gap: 10px; padding: 9px 11px; border-radius: 9px; font-size: 9px; line-height: 1.4; }
.record-alert strong { flex: 0 0 auto; }
.record-alert-danger { color: #8d2837; background: #fff0f1; }
.record-alert-warning { color: #825500; background: #fff7e5; }
.record-alert-neutral { color: #315a77; background: #edf7fc; }
.record-summary, .record-modules { padding: 20px 24px; border-bottom: 1px solid var(--line); }
.record-section-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 14px; }
.record-section-title h3 { margin: 3px 0 0; font-size: 15px; }
.record-section-title > span { color: var(--muted); font-size: 8px; }
.record-data-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.record-data-grid > div { min-width: 0; padding: 10px; border: 1px solid #eceef4; border-radius: 10px; background: #fbfcfe; }
.record-data-grid dt { color: #8b92a4; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.record-data-grid dd { overflow: hidden; margin: 5px 0 0; color: var(--ink); font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.module-grid button { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 2px 8px; padding: 10px; border: 1px solid #e7e9f1; border-radius: 11px; color: var(--ink); background: #fff; text-align: left; transition: .16s ease; }
.module-grid button:hover, .module-grid button.is-active { border-color: #b9b5f2; background: #f7f6ff; transform: translateY(-1px); }
.module-grid button > span { display: grid; grid-row: 1 / 3; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: var(--brand); background: var(--brand-soft); font-size: 9px; font-weight: 900; }
.module-grid strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.module-grid small { color: var(--muted); font-size: 7px; }
.module-grid b { color: var(--brand); }
.module-stage { margin-top: 12px; padding: 12px 14px; border-radius: 11px; color: #5f6280; background: #f6f7fb; }
.module-stage div { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 9px; }
.module-stage div span { color: var(--success); }
.module-stage p { margin: 7px 0 0; font-size: 9px; line-height: 1.55; }
.record-notes { margin: 16px 24px 22px; padding: 14px; border-left: 3px solid #aaa5ef; border-radius: 0 10px 10px 0; background: #f8f8ff; }
.record-notes > p:last-child { max-height: 110px; overflow-y: auto; margin: 7px 0 0; color: #555e72; font-size: 10px; line-height: 1.6; white-space: pre-wrap; }

.agenda-reserved { position: sticky; top: 122px; padding: 22px; border-style: dashed; background: linear-gradient(145deg, #fff, #f7f8fc); }
.agenda-reserved-icon { display: grid; width: 48px; height: 48px; margin-bottom: 18px; place-items: center; border-radius: 14px; color: #6c7284; background: #eceef3; font-size: 23px; }
.agenda-reserved h3 { margin: 6px 0 10px; font-size: 18px; }
.agenda-reserved > p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.agenda-reserved ul { display: grid; gap: 8px; margin: 18px 0; padding: 0; list-style: none; }
.agenda-reserved li { display: flex; gap: 7px; color: #555e72; font-size: 9px; }
.agenda-reserved li::before { content: "✓"; color: var(--success); font-weight: 900; }
.agenda-reserved > span { display: block; padding: 9px; border-radius: 8px; color: #6c7284; background: #eceef3; font-size: 8px; font-weight: 800; text-align: center; text-transform: uppercase; }

@media (max-width: 1350px) {
  .clinical-workspace { grid-template-columns: minmax(300px, 340px) minmax(500px, 1fr); }
  .agenda-reserved { position: static; grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 5px 18px; }
  .agenda-reserved-icon { grid-row: 1 / 5; margin: 0; }
  .agenda-reserved ul { grid-column: 2; grid-template-columns: repeat(3, auto); margin: 7px 0; }
  .agenda-reserved > span { grid-column: 2; justify-self: start; }
}

@media (max-width: 980px) {
  .workspace-heading { align-items: flex-start; flex-direction: column; }
  .clinical-workspace { grid-template-columns: 1fr; }
  .patient-browser, .agenda-reserved { position: static; }
  .patient-list { max-height: 390px; min-height: 220px; }
  .record-data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .workspace-heading-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .safe-chip { text-align: center; }
  .record-header { grid-template-columns: 50px minmax(0, 1fr); padding: 18px; }
  .record-avatar { width: 50px; height: 50px; }
  .record-id { display: none; }
  .record-summary, .record-modules { padding: 18px; }
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .record-data-grid { grid-template-columns: 1fr 1fr; }
  .agenda-reserved { display: block; }
  .agenda-reserved-icon { margin-bottom: 15px; }
  .agenda-reserved ul { display: grid; }
  .agenda-reserved > span { margin-top: 14px; }
}

/* Reconstrucción fiel del diseño legacy. El azul plano se actualiza al degradado aprobado. */
:root {
  --legacy-blue: #2d7ff0;
  --legacy-violet: #4830dc;
  --legacy-purple: #a94dca;
  --legacy-orange: #ffa900;
  --legacy-gradient: linear-gradient(125deg, #168cf5 0%, #4036df 56%, #7438df 100%);
  --legacy-soft-blue: #edf7ff;
}
.app-icon { display: inline-block; width: 1.15em; height: 1.15em; flex: 0 0 auto; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; }
button:has(> .app-icon) { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.legacy-app-shell { display: block; min-height: 100vh; padding-bottom: 38px; background: #f7fafc; font-family: var(--font-family); }
.legacy-topbar { position: sticky; top: 0; z-index: 30; display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 22px; padding: 0 22px; color: #fff; background: var(--legacy-gradient); border-bottom: 4px solid #26c8f5; box-shadow: 0 4px 15px rgba(51,49,196,.16); }
.legacy-brand { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.legacy-brand > .burotec-monogram, .legacy-brand > strong { font-family: 'Burotec Inter', Inter, ui-sans-serif, sans-serif; }
.burotec-monogram { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: 1px solid #d8e9ff; border-radius: 10px; color: #1687f2; background: #fff; box-shadow: 0 5px 12px rgba(22, 135, 242, .2); font-family: 'Burotec Inter', Inter, ui-sans-serif, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: -.025em; line-height: 1; white-space: nowrap; }
.legacy-brand strong { font-size: 20px; letter-spacing: .02em; }
.legacy-brand small { font-size: 9px; }
.legacy-brand > b { margin-left: 8px; padding: 4px 10px; border-radius: 999px; color: #4a3a00; background: #ffdd21; font-size: 9px; }
.legacy-nav { display: flex; align-items: center; gap: 4px; }
.legacy-nav button { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 10px 12px; border: 0; border-radius: 7px; color: rgba(255,255,255,.94); background: transparent; font-size: 15px; font-weight: 650; line-height: 1.2; white-space: nowrap; }
.legacy-nav button .app-icon { width: 17px; height: 17px; flex: 0 0 17px; }
.legacy-nav button.is-active { background: rgba(255,255,255,.13); }
.legacy-nav button:disabled { cursor: default; opacity: .94; }
.legacy-main { width: 100%; max-width: 1800px; min-height: calc(100vh - 102px); margin: 0 auto; padding: 20px 24px 48px; }
.legacy-footer { position: fixed; bottom: 0; z-index: 20; width: 100%; padding: 7px 20px; color: #fff; background: var(--legacy-gradient); font-size: 10px; text-align: center; }

.directory-view { position: relative; }
.directory-agenda-button-glass {
  display: inline-flex;
  width: max-content;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1.5px solid #3b82f6;
  border-radius: 11px;
  color: #2563eb;
  background: linear-gradient(135deg, rgba(237, 245, 255, 0.95), rgba(240, 247, 255, 0.85));
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
  font-size: 14.5px;
  font-weight: 850;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all .18s cubic-bezier(.2, .8, .2, 1);
}
.directory-agenda-button-glass .app-icon {
  width: 19px;
  height: 19px;
  stroke-width: 2.3;
  color: #2563eb;
  transition: transform .18s ease, color .18s ease;
}
.directory-agenda-button-glass .agenda-arrow-icon {
  width: 17px;
  height: 17px;
  stroke-width: 2.6;
  margin-left: 2px;
}
.directory-agenda-button-glass:hover {
  border-color: #1d4ed8;
  color: #1d4ed8;
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.18);
  transform: translateY(-2px);
}
.directory-agenda-button-glass:hover .agenda-arrow-icon {
  transform: translateX(4px);
  color: #1d4ed8;
}
.directory-agenda-button-glass:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.1);
}

.directory-heading-row { display: grid; grid-template-columns: 210px 1fr 240px; align-items: center; gap: 20px; max-width: 1440px; margin: 0 auto; }
.directory-heading-row h1 { margin: 0; color: var(--legacy-blue); font-size: 21px; font-weight: 600; text-align: center; text-transform: uppercase; }

.directory-advanced-toggle-row {
  display: flex;
  justify-content: center;
  margin: 6px auto 18px;
}
.legacy-outline-button-minimal {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 16px;
  border: 1px solid #d2dded;
  border-radius: 999px;
  color: #556782;
  background: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .05em;
  cursor: pointer;
  transition: all .18s ease;
  box-shadow: 0 2px 6px rgba(45, 80, 130, 0.04);
}
.legacy-outline-button-minimal .app-icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
  color: #647896;
  transition: color .18s ease;
}
.legacy-outline-button-minimal #advancedFilterCount {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  color: #fff;
  background: var(--legacy-blue);
  font-size: 10px;
  font-weight: 850;
}
.legacy-outline-button-minimal #advancedFilterCount[hidden] {
  display: none;
}
.legacy-outline-button-minimal:hover {
  border-color: var(--legacy-blue);
  color: var(--legacy-blue);
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(45, 127, 240, 0.12);
  transform: translateY(-1px);
}
.legacy-outline-button-minimal:hover .app-icon {
  color: var(--legacy-blue);
}
.legacy-outline-button-minimal.is-open {
  border-color: var(--legacy-blue);
  color: var(--legacy-blue);
  background: #f0f6ff;
}
.legacy-new-button { display:flex; min-height:46px; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border:0; border-radius:8px; color:#fff; background:var(--legacy-orange); box-shadow:0 5px 13px rgba(255,169,0,.25); font-size:13px; font-weight:800; white-space:nowrap; cursor:pointer; transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease, filter .18s ease; }
.legacy-new-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(255,169,0,.42); filter: brightness(1.05); }
.legacy-new-button:active:not(:disabled) { transform: translateY(0); box-shadow: 0 4px 10px rgba(255,169,0,.28); }
.legacy-new-button:disabled { cursor: default; opacity: .88; }
.directory-primary-actions { display:flex; justify-self:end; align-items:center; gap:10px; }
.legacy-link-button { display:flex; min-height:46px; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border:0; border-radius:8px; color:#fff; background:linear-gradient(135deg,#a65dd0,#9251c6); box-shadow:0 5px 13px rgba(139,74,187,.22); font-size:13px; font-weight:800; cursor:pointer; transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease, filter .18s ease; }
.legacy-link-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(146,81,198,.42); filter: brightness(1.06); }
.legacy-link-button:active:not(:disabled) { transform: translateY(0); box-shadow: 0 4px 10px rgba(146,81,198,.28); }
.legacy-link-button .app-icon { width:16px; height:16px; transition: transform .18s ease; }
.legacy-link-button:hover .app-icon { transform: rotate(12deg) scale(1.1); }
.plan-preview-control { display:flex; align-items:center; gap:5px; padding:3px 5px 3px 8px; border:1px solid rgba(255,255,255,.3); border-radius:999px; background:rgba(255,255,255,.14); }
.plan-preview-control span { color:rgba(255,255,255,.78); font-size:8px; font-weight:850; letter-spacing:.1em; }
.plan-preview-control select { width:auto; padding:3px 20px 3px 7px; border:0; border-radius:999px; outline:0; color:#6f4b00; background:#ffd05a; font-size:9px; font-weight:900; cursor:pointer; }
.premium-crown { color:#e9a414 !important; }
[data-premium-feature].is-locked input { cursor:not-allowed; background:#f3f5f8; opacity:.65; }
[data-premium-feature].is-locked, .premium-action-locked { cursor:pointer; }
.is-premium .premium-crown { display:none; }

.premium-access-dialog { width:min(560px,calc(100% - 28px)); padding:0; border:0; border-radius:22px; color:#536074; background:transparent; box-shadow:0 28px 80px rgba(36,48,77,.28); }
.premium-access-dialog::backdrop { background:rgba(25,34,55,.58); backdrop-filter:blur(6px); }
.premium-access-dialog article { position:relative; overflow:hidden; padding:38px 42px 32px; border:1px solid rgba(232,169,31,.22); border-radius:22px; background:linear-gradient(155deg,#fff 0%,#fffaf0 60%,#f8f2ff 100%); text-align:center; }
.premium-access-dialog article::before { position:absolute; top:0; left:0; width:100%; height:5px; content:""; background:linear-gradient(90deg,#ffc334,#f59c21,#7a3ce4); }
.premium-access-close { position:absolute; top:16px; right:16px; display:grid; width:32px; height:32px; place-items:center; border:0; border-radius:50%; color:#8993a2; background:#f1f3f7; }
.premium-access-close .app-icon { width:15px; height:15px; }
.premium-access-emblem { display:grid; width:76px; height:76px; place-items:center; margin:0 auto 13px; border-radius:24px; color:#fff; background:linear-gradient(145deg,#ffca3d,#f59c22 58%,#7a3ce4); box-shadow:0 14px 30px rgba(224,155,34,.3); }
.premium-access-emblem .app-icon { width:38px; height:38px; }
.premium-access-dialog small { color:#d68c10; font-size:10px; font-weight:900; letter-spacing:.16em; }
.premium-access-dialog h2 { margin:9px 0 10px; color:#3e4b61; font-size:24px; line-height:1.2; }
.premium-access-dialog p { max-width:440px; margin:0 auto; color:#748093; font-size:13px; line-height:1.7; }
.premium-access-dialog ul { display:grid; gap:10px; max-width:390px; margin:22px auto 25px; padding:0; list-style:none; text-align:left; }
.premium-access-dialog li { display:flex; align-items:center; gap:9px; color:#68758a; font-size:12px; font-weight:650; }
.premium-access-dialog li .app-icon { width:18px; height:18px; padding:3px; border-radius:50%; color:#fff; background:#38b879; }
.premium-access-dialog footer { display:flex; justify-content:center; gap:10px; }
.premium-access-dialog footer button, .premium-access-dialog footer a { display:flex; min-height:44px; align-items:center; justify-content:center; gap:7px; padding:10px 20px; border:0; border-radius:10px; font-size:11px; font-weight:900; text-decoration:none; }
.premium-access-dialog footer button { color:#738094; background:#eef1f5; }
.premium-access-dialog footer a { color:#fff; background:linear-gradient(110deg,#f5a51e,#ef8f1f 47%,#7540df); box-shadow:0 8px 18px rgba(154,92,46,.22); }
.premium-access-dialog footer .app-icon { width:15px; height:15px; }
.legacy-search { display: flex; width: min(440px, calc(100% - 30px)); align-items: center; gap: 10px; margin: 22px auto 16px; padding: 9px 12px; border-bottom: 1px solid #cfd6e1; color: var(--legacy-blue); background: transparent; }
.legacy-search > .app-icon { width: 25px; height: 25px; }
.legacy-search input { width: 100%; border: 0; outline: 0; color: #555d6f; background: transparent; font-size: 16px; }
.directory-list-controls { display: flex; max-width: 1440px; align-items: center; justify-content: space-between; margin: 0 auto 12px; }
.directory-list-controls select { min-width: 76px; padding: 9px 12px; border: 1px solid #ced9e8; border-radius: 6px; color: var(--legacy-blue); background: #fff; font-size: 13px; }
.directory-list-controls select:focus, .directory-list-controls select:focus-visible { border-color: var(--legacy-blue); outline: 0; box-shadow: 0 0 0 3px rgba(45,127,240,.14); }
.directory-list-controls span { color: #7d8798; font-size: 12px; }
.directory-list-summary { display: flex; align-items: center; gap: 14px; }
.tutorial-help-button { display: grid; width: 40px; height: 40px; place-items: center; padding: 0; border: 1px solid #bdd7f2; border-radius: 9px; color: #fff; background: var(--legacy-gradient); box-shadow: 0 4px 11px rgba(48,83,185,.18); transition: transform .15s ease, box-shadow .15s ease; }
.tutorial-help-button:hover { transform: translateY(-2px); box-shadow: 0 7px 15px rgba(48,83,185,.24); }
.tutorial-help-button:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(45,127,240,.18), 0 7px 15px rgba(48,83,185,.24); }
.tutorial-help-button .app-icon { width: 21px; height: 21px; stroke-width: 1.9; }
.legacy-outline-button #advancedFilterCount { display: inline-grid; min-width: 20px; height: 20px; place-items: center; padding: 0 6px; border-radius: 999px; color: #fff; background: var(--legacy-gradient); font-size: 10px; }
.legacy-outline-button #advancedFilterCount[hidden] { display: none; }
.legacy-outline-button.is-open { border-color: #a9c9ec; background: #f7fbff; }
.legacy-advanced-search { max-width: 1440px; margin: 12px auto 20px; overflow: hidden; border: 1px solid #d7e4f1; border-radius: 8px; background: linear-gradient(135deg, #fff 0%, #f8fbff 52%, #faf7ff 100%); box-shadow: 0 6px 18px rgba(54,84,139,.09); animation: advanced-search-arrival 240ms ease both; }
.legacy-advanced-search > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 18px; border-bottom: 1px solid #dce7f2; }
.legacy-advanced-search h2 { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0; color: var(--legacy-blue); font-size: 15px; font-weight: 700; }
.legacy-advanced-search header p { margin: 4px 0 0; color: #7d8798; font-size: 11px; }
.legacy-advanced-search header button { padding: 9px 13px; border: 1px solid #c9dcef; border-radius: 6px; color: var(--legacy-blue); background: #fff; font-size: 11px; font-weight: 700; }
.legacy-advanced-search header button:disabled { cursor: default; opacity: .42; }
.advanced-search-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 7px 18px 13px; }
.advanced-search-fields label { display: flex; min-width: 0; flex-direction: column; gap: 6px; padding: 10px 12px; }
.advanced-search-fields label:nth-child(even) { border-left: 1px solid #dce7f2; }
.advanced-search-fields label:nth-child(n+3) { border-top: 1px solid #dce7f2; }
.advanced-search-fields label > span { display: flex; align-items: center; gap: 5px; color: var(--legacy-blue); font-size: 12px; font-weight: 700; }
.advanced-search-fields input { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid #d4dce7; border-radius: 6px; outline: 0; color: #535d6e; background: #fff; font-size: 13px; transition: .15s ease; }
.advanced-search-fields input:focus { border-color: #648eee; box-shadow: 0 0 0 3px rgba(64,54,223,.09); }
.advanced-filter-status { margin: 0; padding: 9px 18px; border-top: 1px solid #dce7f2; color: #758195; background: rgba(237,247,255,.6); font-size: 11px; text-align: center; }
@keyframes advanced-search-arrival { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.legacy-patient-grid { display: grid; max-width: 1440px; min-height: 420px; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; align-items: start; gap: 22px 24px; margin: 0 auto; padding: 24px; border-radius: 9px; background: linear-gradient(135deg, #eaf7ff, #f2efff); }
.legacy-patient-card { position: relative; overflow: hidden; min-height: 255px; padding: 20px 16px 16px; border: 0; border-radius: 8px; color: #4e7fe9; background: #fff; box-shadow: 0 5px 15px rgba(56,103,161,.18); text-align: left; transition: transform .16s ease, box-shadow .16s ease; }
.legacy-patient-card {
  opacity: 0;
  transform-origin: 50% 20%;
  animation: legacy-card-arrival 620ms cubic-bezier(.2,.78,.28,1.08) forwards;
  animation-delay: calc(var(--card-index) * 85ms);
}
.legacy-patient-card:hover { transform: translateY(-3px); box-shadow: 0 9px 20px rgba(59,76,182,.22); }
@keyframes legacy-card-arrival {
  0% { opacity: 0; transform: translateY(-24px) scale(.94) rotate(-1.2deg); filter: blur(3px); }
  58% { opacity: 1; transform: translateY(5px) scale(1.012) rotate(.25deg); filter: blur(0); }
  78% { transform: translateY(-2px) scale(.997) rotate(0); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: blur(0); }
}
.patient-card-accent { position: absolute; top: 0; left: 50%; width: 72%; height: 4px; border-radius: 0 0 4px 4px; background: var(--legacy-gradient); transform: translateX(-50%); }
.patient-card-close { position: absolute; top: 8px; right: 10px; color: var(--legacy-blue); }
.patient-card-close .app-icon { width: 15px; height: 15px; stroke-width: 2.4; }
.patient-card-main { display: block; width: 100%; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; }
.patient-card-main:focus-visible { outline: 2px solid var(--legacy-blue); outline-offset: 5px; border-radius: 4px; }
.patient-card-header { display: grid; grid-template-columns: 82px minmax(0,1fr); align-items: center; gap: 13px; }
.patient-card-avatar { display: grid; width: 82px; height: 82px; place-items: center; border: 4px solid #fff; border-radius: 50%; color: #fff; background: var(--legacy-gradient); box-shadow: 0 3px 9px rgba(27,45,94,.28); font-size: 21px; font-weight: 900; }
.patient-card-header strong { overflow: hidden; color: #4b82ed; font-size: 15px; line-height: 1.5; text-overflow: ellipsis; }
.patient-card-details { display: grid; gap: 8px; margin-top: 18px; }
.patient-card-details p { display: flex; gap: 7px; margin: 0; font-size: 12px; }
.patient-card-details p span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.patient-card-email { color: #3478ea; }
.patient-card-phone { color: #21a85b; }
.patient-card-tools { display: flex; justify-content: flex-end; margin: 8px -4px -6px; }
.patient-notes-toggle { display: flex; align-items: center; gap: 2px; padding: 5px 7px; border: 0; border-radius: 6px; color: #737d8c; background: transparent; font-size: 12px; transition: color .15s ease, background .15s ease; }
.patient-notes-toggle:hover, .patient-notes-toggle:focus-visible, .patient-notes-toggle.has-notes { color: var(--legacy-blue); background: #f2f7ff; }
.patient-notes-toggle.has-notes { color: #23a55b; }
.patient-notes-toggle .app-icon { width: 16px; height: 16px; }
.patient-notes-toggle .patient-notes-chevron { width: 14px; height: 14px; stroke-width: 2.5; transition: transform .18s ease; }
.patient-notes-toggle[aria-expanded="true"] .patient-notes-chevron { transform: rotate(180deg); }
.patient-card-notes { margin: 12px -3px -3px; padding: 14px; border-top: 1px solid #e3eaf3; border-radius: 6px; background: linear-gradient(135deg, #fbfdff, #faf8ff); animation: patient-notes-arrival 190ms ease both; }
.patient-card-notes[hidden] { display: none; }
.patient-card-notes-form textarea { display: block; width: 100%; min-height: 94px; padding: 10px 12px; resize: vertical; border: 1px solid #d5dce7; border-radius: 6px; outline: 0; color: #505969; background: #fff; font: inherit; font-size: 12px; line-height: 1.5; }
.patient-card-notes-form textarea:focus { border-color: var(--legacy-blue); box-shadow: 0 0 0 3px rgba(45,127,240,.12); }
.patient-card-notes-status { min-height: 14px; margin: 5px 0 0; color: #b52d41; font-size: 10px; }
.patient-card-notes-actions { display: flex; justify-content: flex-end; gap: 7px; }
.patient-card-notes-actions button { display: grid; width: 34px; height: 30px; place-items: center; padding: 0; border-radius: 7px; }
.patient-card-notes-actions .app-icon { width: 16px; height: 16px; }
.patient-notes-cancel { border: 1px solid #d8dfe9; color: #7c8797; background: #fff; }
.patient-notes-save { border: 1px solid transparent; color: #fff; background: var(--legacy-gradient); }
.patient-card-notes-actions button:disabled { cursor: wait; opacity: .55; }
@keyframes patient-notes-arrival { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }
.legacy-pagination { display: grid; max-width: 1440px; grid-template-columns: 140px 1fr 140px; align-items: center; gap: 14px; margin: 16px auto 0; }
.legacy-pagination > span { color: #747e90; font-size: 12px; text-align: center; }
.legacy-pagination button:disabled { opacity: .4; }

.legacy-record-view { display: block; width: 100%; max-width: 1800px; margin: 0 auto; }
.record-navigation { display: grid; width: 100%; max-width: 1800px; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin: -4px auto 16px; }
.record-navigation > button:last-child { justify-self: end; }
.legacy-nav-link { display: inline-flex !important; align-items: center !important; gap: 11px !important; padding: 0 !important; border: 0 !important; color: var(--legacy-blue) !important; background: transparent !important; font-size: 16px !important; font-weight: 850 !important; cursor: pointer !important; line-height: 1 !important; }
.legacy-nav-link span { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; height: 46px !important; min-width: 48px !important; min-height: 46px !important; flex-shrink: 0 !important; padding: 0 !important; border: 2.5px solid var(--legacy-blue) !important; border-radius: 12px !important; color: var(--legacy-blue) !important; background: #fff !important; line-height: 0 !important; margin: 0 !important; box-sizing: border-box !important; transition: transform .15s ease, background .15s ease !important; }
.legacy-nav-link span .app-icon { width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; stroke-width: 2.6 !important; display: block !important; margin: 0 !important; }
.legacy-nav-link:hover span { background: #edf5ff !important; }
.legacy-nav-link:disabled { cursor: default !important; opacity: .6 !important; }
.legacy-record-grid { display: grid; width: 100%; max-width: 1800px; margin: 0 auto; grid-template-columns: 450px minmax(0, 1fr) 370px; align-items: start; gap: 16px; }
.legacy-record-left { grid-column: 1; grid-row: 1; display: grid; gap: 14px; min-width: 0; width: 100%; }
.legacy-record-center { grid-column: 2; grid-row: 1; display: grid; gap: 14px; min-width: 0; width: 100%; overflow: hidden; }
.legacy-record-right { grid-column: 3; grid-row: 1; display: grid; gap: 14px; min-width: 0; width: 100%; }
.legacy-record-center > *, .legacy-module-tabs, .legacy-odontogram-card, .legacy-timeline-card, .legacy-studies-card, .legacy-budgets-card { min-width: 0; max-width: 100%; }
.legacy-profile-card, .legacy-appointments-card, .legacy-odontogram-card, .legacy-timeline-card, .legacy-gallery-card { border: 1px solid #dce5ef; border-radius: 8px; background: #fff; box-shadow: 0 3px 12px rgba(37,63,100,.08); }
.legacy-profile-card { padding: 18px; }
.legacy-profile-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.legacy-profile-card h2 { margin: 0; color: #4b82ed; font-size: 26px; font-weight: 700; }
.profile-card-actions { display: flex; align-items: center; gap: 8px; }
.legacy-profile-card header button { display: grid; width: 40px; height: 40px; place-items: center; padding: 0; border: 1px solid #cadcf8; border-radius: 10px; color: var(--legacy-blue); background: linear-gradient(145deg, #fff, #f1f6ff); box-shadow: 0 4px 12px rgba(45,127,240,.11); }
.legacy-profile-card header button .app-icon { width: 19px; height: 19px; }
.legacy-profile-card header button:not(:disabled) { transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
.legacy-profile-card header button:not(:disabled):hover, .legacy-profile-card header button:not(:disabled):focus-visible { border-color: transparent; color: #fff; background: var(--legacy-gradient); box-shadow: 0 8px 18px rgba(73,71,210,.25); outline: 0; transform: translateY(-2px); }
.profile-email { display: flex; align-items: center; gap: 6px; margin: 8px 0 14px; color: #3378e8; font-size: 14px; }
.profile-email a { overflow:hidden; color:inherit; text-decoration:none; text-overflow:ellipsis; white-space:nowrap; }
.profile-email a:hover, .profile-email a:focus-visible { text-decoration:underline; text-underline-offset:2px; }
.profile-email a[aria-disabled="true"] { pointer-events:none; text-decoration:none; }
.profile-main { display: flex; align-items: center; gap: 18px; }
.profile-avatar-button { position: relative; display: block; width: 120px; height: 120px; flex: 0 0 120px; padding: 0; overflow: hidden; border: 0; border-radius: 50%; color: inherit; background: transparent; cursor: pointer; }
.legacy-profile-avatar { display: grid; width: 120px; height: 120px; flex: 0 0 120px; place-items: center; border: 6px solid #fff; border-radius: 50%; color: #fff; background: var(--legacy-gradient); box-shadow: 0 4px 13px rgba(41,61,105,.26); font-size: 32px; font-weight: 900; }
.legacy-profile-photo { width: 120px; height: 120px; border: 6px solid #fff; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 13px rgba(41,61,105,.26); }
.profile-avatar-edit { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(33,38,86,.58); opacity: 0; transition: opacity .18s ease; }
.profile-avatar-edit .app-icon { width: 26px; height: 26px; }
.profile-avatar-button:hover .profile-avatar-edit, .profile-avatar-button:focus-visible .profile-avatar-edit { opacity: 1; }
.profile-avatar-button:focus-visible { outline: 3px solid rgba(45,127,240,.28); outline-offset: 4px; }
.profile-main dl { display: grid; gap: 10px; margin: 0; }
.profile-main dl div { display: flex; gap: 8px; }
.profile-main dt { color: #838b98; font-size: 13px; font-weight: 600; }
.profile-main dd { margin: 0; color: #4280ee; font-size: 15px; font-weight: 800; }
.profile-main .blood-row dt, .profile-main .blood-row dd { color: #ff3651; }
.coverage-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.coverage-columns > div { min-width: 0; }
.coverage-columns p { display: flex; align-items: center; gap: 6px; overflow: hidden; margin: 8px 0; color: #667181; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.coverage-columns p:nth-child(1) { color: #78808c; }
.coverage-columns p:nth-child(2) { color: #39a56a; }
.coverage-columns p:nth-child(3) { color: #8f929a; }
.profile-alerts { display: grid; gap: 8px; }
.profile-alerts p { display: flex; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 7px; font-size: 12px; font-weight: 600; }
.legacy-alert-danger { color: #9b2939; background: #fff0f2; }
.legacy-alert-warning { color: #895b04; background: #fff7e7; }
.read-more-button { margin-top: 12px; padding: 11px 16px; border: 1px solid #c8ddf3; border-radius: 8px; color: var(--legacy-blue); background: #fff; font-size: 12px; font-weight: 800; }
.profile-more { margin-top: 12px; padding: 16px; border-left: 4px solid var(--legacy-violet); border-radius: 0 8px 8px 0; color: #626c7c; background: #f7f5ff; }
.profile-more dl { display: grid; gap: 10px; margin: 0; }
.profile-more dl div { display: grid; grid-template-columns: minmax(100px, .9fr) minmax(0, 1.1fr); gap: 8px; padding-bottom: 7px; border-bottom: 1px solid #e8e1f7; }
.profile-more dt { color: #7c8390; font-size: 12px; font-weight: 600; }
.profile-more dd { overflow-wrap: anywhere; margin: 0; color: #4180ed; font-size: 12px; font-weight: 600; text-align: right; }
.profile-more-notes { margin-top: 12px; }
.profile-more-notes strong { color: #6f7380; font-size: 12px; }
.profile-more-notes p { margin: 6px 0 0; padding: 10px; border-radius: 6px; background: #fff; font-size: 12px; line-height: 1.55; white-space: pre-wrap; }
.legacy-appointments-card { padding: 16px; }
.appointments-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 12px 16px; border-radius: 8px; color: #fff; background: var(--legacy-gradient); }
.appointments-heading h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; }
.appointments-heading > span { padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.18); font-size: 12px; font-weight: 800; white-space: nowrap; }
.appointments-status { margin: 9px 0 0; padding: 24px 14px; border: 1px dashed #bad4ed; color: #728096; font-size: 12px; line-height: 1.5; text-align: center; }
.appointments-list { display: grid; max-height: 520px; gap: 12px; overflow-y: auto; margin-top: 12px; padding: 1px 4px 1px 1px; scrollbar-color: #9bc6ef transparent; scrollbar-width: thin; }
.appointment-item { --appointment-color: var(--legacy-blue); display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: start; gap: 12px; min-width: 0; padding: 14px 12px 14px 0; border: 1px solid #d7e8f7; border-left: 8px solid var(--appointment-color); border-radius: 8px; opacity: 0; background: #fff; box-shadow: 0 3px 9px rgba(34,75,112,.06); animation: appointment-arrival 320ms cubic-bezier(.2,.72,.2,1) both; }
.appointment-item.is-cancelado { --appointment-color: #e53b55; border-color: #f3cbd2; }
.appointment-item.is-ausente { --appointment-color: #eca600; border-color: #f5dfaa; }
.appointment-date { display: grid; align-content: start; justify-items: center; padding-right: 10px; border-right: 1px solid #e7edf3; color: var(--appointment-color); }
.appointment-date strong { font-size: 24px; line-height: 1; }
.appointment-date span { margin-top: 4px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.appointment-body { min-width: 0; }
.appointment-body > strong { display: block; overflow: hidden; color: #4d5b6c; font-size: 14px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.appointment-body p { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: #778493; font-size: 12px; line-height: 1.35; }
.appointment-body p .app-icon { flex: 0 0 auto; }
.appointment-schedule { color: var(--appointment-color) !important; font-weight: 700; }
.appointment-cancellation { padding: 5px 6px; border-radius: 4px; color: #a72c41 !important; background: #fff0f3; }
.appointment-recurrence { color: #7551c7 !important; }
.appointment-status { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 999px; color: var(--appointment-color); background: color-mix(in srgb, var(--appointment-color) 10%, white); font-size: 9px; font-weight: 800; white-space: nowrap; }
.appointment-status .app-icon { width: 11px; height: 11px; }
@keyframes appointment-arrival { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
.appointment-status .app-icon { width: 10px; height: 10px; }
@keyframes appointment-arrival { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }

.legacy-odontogram-card { min-width: 0; overflow: hidden; }
.odontogram-heading { display: flex; min-height: 49px; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px 7px; border-bottom: 1px solid #eef1f5; color: #727b85; background: #fff; }
.odontogram-heading > div { display: flex; align-items: center; gap: 8px; }
.odontogram-heading h3 { display: flex; align-items: center; gap: 5px; margin: 0; color: #6d7581; font-size: 11px; font-weight: 600; white-space: nowrap; }
.odontogram-heading h3 .app-icon { width: 13px; height: 13px; }
.odontogram-heading-actions { margin-left: auto; }
.odontogram-heading-actions > span { color: #7b8491; font-size: 8px; font-weight: 700; letter-spacing: 1px; }
.odontogram-heading-actions button { display: grid; width: 27px; height: 27px; place-items: center; padding: 0; border: 0; color: #707a87; background: transparent; }
.odontogram-heading-actions button:hover, .odontogram-heading-actions button:focus-visible { color: var(--legacy-blue); }
.odontogram-heading-actions .app-icon { grid-area: 1 / 1; width: 18px; height: 18px; }
.odontogram-heading-actions .compress-icon, .odontogram-heading-actions button[aria-pressed="true"] .expand-icon { display: none; }
.odontogram-heading-actions button[aria-pressed="true"] .compress-icon { display: block; }
.odontogram-body { padding: 12px 0 18px; }
.odontogram-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; padding: 0 9px 8px; border-bottom: 1px solid #f0f2f5; }
.odontogram-tools button, .odontogram-context-controls button { display: inline-flex; min-height: 32px; align-items: center; justify-content: center; gap: 6px; padding: 5px 12px; border: 1px solid #cbd5e1; border-radius: 20px; color: #64748b; background: #fff; box-shadow: none; font: inherit; font-size: 11px; font-weight: 700; white-space: nowrap; transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease; }
.odontogram-tools button:hover, .odontogram-tools button:focus-visible, .odontogram-context-controls button:hover, .odontogram-context-controls button:focus-visible { border-color: #87a7ce; transform: translateY(-1px); }
.odontogram-tools button .app-icon, .odontogram-context-controls button .app-icon { width: 13px; height: 13px; }
.odontogram-tools button[data-odontogram-tool="0"].is-active { border: 2px solid #eab308; color: #a16207; background: #fef9c3; }
.odontogram-tools button[data-odontogram-tool="1"].is-active { border: 2px solid #ef4444; color: #b91c1c; background: #fee2e2; }
.odontogram-tools button[data-odontogram-tool="2"].is-active { border: 2px solid #3b82f6; color: #1d4ed8; background: #dbeafe; }
.odontogram-tools button.is-active:not([data-odontogram-tool="0"]):not([data-odontogram-tool="1"]):not([data-odontogram-tool="2"]):not([data-odontogram-tool="10"]) { border: 2px solid #64748b; color: #334155; background: #f1f5f9; }
.odontogram-tools button[data-odontogram-tool="10"].is-active { border: 2px solid #ff9100; color: #ff9100; background: #fff3e0; }
.tool-color-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.tool-color-dot.is-red { background: #ef4444; }
.tool-color-dot.is-blue { background: #3b82f6; }
.tool-outline-circle, .tool-outline-square, .tool-solid-square { width: 10px; height: 10px; border: 1.5px solid currentColor; }
.tool-outline-circle { border-radius: 50%; }
.tool-solid-square { background: currentColor; }
.odontogram-context-controls { display: flex; min-height: 38px; align-items: center; justify-content: center; gap: 7px; padding: 8px 12px 0; animation: odontogram-fade-in .25s ease both; }
.odontogram-context-controls[hidden], .odontogram-note-help[hidden] { display: none; }
.odontogram-context-controls > strong { margin-right: 4px; color: #707b8b; font-size: 10px; letter-spacing: .2px; }
.odontogram-context-controls button.is-active { border: 2px solid #64748b; color: #334155; background: #e2e8f0; }
.odontogram-context-controls button.is-red.is-active { border-color: #ef4444; color: #b91c1c; background: #fee2e2; }
.odontogram-context-controls button.is-blue.is-active { border-color: #3b82f6; color: #1d4ed8; background: #dbeafe; }
.odontogram-note-help { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 10px 14px 0; color: #ff9100; font-size: 10px; font-weight: 700; text-align: center; animation: odontogram-fade-in .25s ease both; }
.odontogram-note-help .app-icon { width: 13px; height: 13px; }
.odontogram-status { margin: 14px; padding: 30px 14px; color: var(--legacy-blue); font-size: 12px; text-align: center; }
.odontogram-canvas { width: 100%; overflow-x: auto; overflow-y: hidden; padding: 12px 10px 0; }
.odontogram-canvas[hidden], .odontogram-orientation[hidden] { display: none; }
.odontogram-dentition { width: 100%; min-width: 430px; }
.odontogram-dentition[hidden] { display: none; }
.odontogram-row { display: grid; grid-template-columns: 1fr 1fr; justify-content: center; }
.odontogram-dentition .row-1 { margin-bottom: 8px; padding-bottom: 9px; border-bottom: 2px solid #ccc; }
.odontogram-half { display: flex; min-width: 0; }
.odontogram-half:first-child { justify-content: flex-end; padding-right: 4px; border-right: 2px solid #ccc; }
.odontogram-half:last-child { justify-content: flex-start; padding-left: 4px; }
.odontogram-tooth { display: flex; width: 12.5%; min-width: 0; flex-direction: column; align-items: center; padding: 0 3px; border-radius: 5px; outline: 0; text-align: center; transition: transform .2s ease-out, box-shadow .2s ease-out; }
.is-temporary .odontogram-tooth { width: 12.5%; padding-inline: 6px; }
.odontogram-tooth:hover, .odontogram-tooth:focus-visible { z-index: 2; border-radius: 5px; box-shadow: 0 5px 15px rgba(0,0,0,.08); transform: translateY(-3px) scale(1.02); }
.odontogram-tooth.is-saving { cursor: wait; opacity: .48; }
.odontogram-tooth-number { position: relative; color: #677180; font-size: 10px; font-style: normal; font-weight: 800; line-height: 1.4; }
.odontogram-tooth-svg { display: block; width: 100%; aspect-ratio: 1; overflow: visible; filter: drop-shadow(0 1px 2px rgba(0,0,0,.1)); }
.odontogram-tooth-svg [data-surface] { cursor: pointer; transition: fill .2s ease, stroke .1s ease, stroke-width .1s ease, filter .1s ease; }
.odontogram-tooth-svg [data-surface]:hover { stroke: #2563eb; stroke-width: 2.5; filter: drop-shadow(0 0 2px rgba(37,99,235,.4)); }
.odontogram-hit-area { cursor: pointer; }
.tooth-symbol { pointer-events: none; }
.odontogram-note-indicator { position: absolute; top: -1px; right: -7px; width: 6px; height: 6px; border-radius: 50%; background: #ff9100; box-shadow: 0 0 5px rgba(255,145,0,.8); animation: odontogram-fade-in .25s ease both; }
.temporary-dentition-heading { display: flex; width: 100%; min-width: 430px; align-items: center; justify-content: center; margin: 16px 0 14px; }
.temporary-dentition-heading button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 5px 12px; border: 0; border-radius: 14px; color: #667181; background: transparent; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.temporary-dentition-heading button:hover, .temporary-dentition-heading button:focus-visible { color: var(--legacy-blue); background: #edf6ff; outline: none; }
.temporary-dentition-heading .app-icon { width: 11px; height: 11px; }
.odontogram-orientation { display: flex; justify-content: space-between; margin-top: 14px; padding: 0 14px; color: #697382; font-size: 10px; font-weight: 800; letter-spacing: 2px; }
@keyframes odontogram-fade-in { from { opacity: 0; } to { opacity: 1; } }

.legacy-record-grid.is-odontogram-expanded { grid-template-columns: 1fr; }
.legacy-record-grid.is-odontogram-expanded .legacy-record-left, .legacy-record-grid.is-odontogram-expanded .legacy-record-right, .legacy-record-grid.is-odontogram-expanded .legacy-record-center > :not(.legacy-odontogram-card) { display: none !important; }
.legacy-record-grid.is-odontogram-expanded .legacy-record-center { grid-column: 1; grid-row: 1; }
.legacy-record-grid.is-odontogram-expanded .odontogram-tools button, .legacy-record-grid.is-odontogram-expanded .odontogram-context-controls button { min-height: 32px; padding-inline: 13px; font-size: 11px; }
.legacy-record-grid.is-odontogram-expanded .odontogram-dentition { min-width: 760px; }
.legacy-record-grid.is-odontogram-expanded .temporary-dentition-heading { min-width: 760px; }
.legacy-record-grid.is-odontogram-expanded .odontogram-tooth { padding-inline: 4px; }
.legacy-record-grid.is-odontogram-expanded .is-temporary .odontogram-tooth { padding-inline: 8px; }
.legacy-record-grid.is-odontogram-expanded .odontogram-tooth-number, .legacy-record-grid.is-odontogram-expanded .temporary-dentition-heading, .legacy-record-grid.is-odontogram-expanded .odontogram-orientation { font-size: 11px; }

.tooth-card-popup { position: fixed; z-index: 9999; min-width: 210px; max-width: 260px; padding: 16px 18px; pointer-events: none; border-radius: 16px; opacity: 0; color: #334155; background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08); transform: translateY(6px); transition: opacity .18s ease, transform .18s ease; }
.tooth-card-popup.is-visible { opacity: 1; transform: translateY(0); }
.tcp-number { margin-bottom: 2px; color: #94a3b8; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tcp-name { margin-bottom: 8px; color: #1e293b; font-size: 15px; font-weight: 700; line-height: 1.3; }
.tcp-tags { display: flex; min-height: 24px; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.tcp-tag { padding: 3px 10px; border-radius: 20px; color: #ef4444; background: #fee2e2; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.tcp-tag.azul { color: #2563eb; background: #dbeafe; }
.tcp-tag.gris { color: #64748b; background: #f1f5f9; }
.tcp-clean { color: #cbd5e1; font-size: 12px; font-style: italic; }
.tcp-note { margin: 8px 0; padding-top: 8px; border-top: 1px dashed #e2e8f0; font-size: 12px; text-align: left; }
.tcp-note strong { display: block; margin-bottom: 2px; color: #ff9100; font-size: 11px; letter-spacing: .5px; }
.tcp-note div { padding: 5px 10px; border-left: 3px solid #ff9100; border-radius: 6px; color: #334155; background: #fff8e7; font-style: italic; font-weight: 500; line-height: 1.4; white-space: pre-wrap; }
.tcp-divider { margin: 8px 0; border: 0; border-top: 1px solid #f1f5f9; }
.tcp-date { display: flex; align-items: center; gap: 5px; color: #94a3b8; font-size: 12px; }
.tcp-date .app-icon { width: 13px; height: 13px; }

.odontogram-note-dialog { width: min(540px, calc(100% - 28px)); max-width: none; padding: 0; overflow: hidden; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 28px 80px rgba(19,28,59,.36); }
.odontogram-note-dialog[open] { animation: legacy-modal-arrival 240ms ease both; }
.odontogram-note-dialog::backdrop { background: rgba(0,0,0,.15); backdrop-filter: blur(8px); }
.odontogram-note-dialog form { margin: 0; }
.odontogram-note-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; color: #fff; background: #ff9100; }
.odontogram-note-dialog h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; }
.odontogram-note-dialog h2 .app-icon { width: 20px; height: 20px; }
.odontogram-note-dialog header button { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 0; color: #fff; background: transparent; }
.odontogram-note-body { padding: 24px; }
.odontogram-note-body textarea { display: block; width: 100%; min-height: 140px; padding: 14px; resize: vertical; border: 1px solid #d8dee7; border-radius: 8px; outline: 0; color: #374151; font: inherit; font-size: 13px; line-height: 1.55; }
.odontogram-note-body textarea:focus { border-color: #ff9100; box-shadow: 0 0 0 3px rgba(255,145,0,.13); }
.odontogram-note-body p { min-height: 16px; margin: 6px 0 0; color: #b52d41; font-size: 11px; }
.odontogram-note-dialog footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; background: #f7f8fa; }
.odontogram-note-dialog footer button { padding: 10px 18px; border: 0; border-radius: 10px; font-size: 12px; font-weight: 700; }
#cancelOdontogramNote { color: #64748b; background: transparent; }
#saveOdontogramNote { color: #fff; background: #ff9100; box-shadow: 0 4px 12px rgba(255,145,0,.22); }
#saveOdontogramNote:disabled { cursor: wait; opacity: .58; }
.legacy-module-tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: 8px; border-radius: 8px; background: var(--legacy-gradient); gap: 4px; }
.legacy-module-tabs button { padding: 14px 10px; border: 1px solid transparent; border-radius: 6px; color: rgba(255,255,255,.85); background: transparent; font-size: 14px; font-weight: 700; cursor: pointer; transition: all .18s ease; }
.legacy-module-tabs button:hover:not(.is-active) { color: #fff; background: rgba(255, 255, 255, 0.12); }
.legacy-module-tabs button.is-active { color: #ffffff; background: rgba(12, 42, 110, 0.48); border-color: rgba(255, 255, 255, 0.28); box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.2); font-weight: 850; }
.legacy-module-tabs b { font-weight: 700; }
.legacy-timeline-card { overflow: hidden; min-height: 420px; padding: 0 16px 20px; background: #fefbff; }
.history-card-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 68px; margin: 0 -16px 8px; padding: 12px 18px; border-bottom: 1px solid #eadff3; background: #fff; box-shadow: 0 3px 8px rgba(89,43,105,.05); }
.history-report-button { display: inline-flex; min-height: 46px; align-items: center; gap: 8px; justify-self: start; padding: 9px 15px; border: 1px solid #a9c8f5; border-radius: 999px; color: #216bd5; background: #f2f7ff; box-shadow: 0 5px 14px rgba(33,107,213,.12); font-size: 13px; font-weight: 900; letter-spacing: .035em; cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.history-report-button:hover:not(:disabled) { color: #fff; border-color: #216bd5; background: #216bd5; box-shadow: 0 7px 18px rgba(33,107,213,.22); transform: translateY(-1px); }
.history-report-button:disabled { cursor: wait; opacity: .62; }
.history-report-button .app-icon { width: 19px; height: 19px; }
.history-report-button > span { white-space: nowrap; }
.history-report-button > small { padding: 3px 7px; border-radius: 999px; color: #216bd5; background: #dceaff; font-size: 12px; font-weight: 850; letter-spacing: 0; white-space: nowrap; }
.history-report-button:hover:not(:disabled) > small { color: #216bd5; background: #fff; }
.history-new-button { display: flex; min-height: 46px; align-items: center; justify-content: center; gap: 6px; padding: 10px 22px; border: 1px solid #aa66cc; border-radius: 999px; color: #aa66cc; background: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 3px 8px rgba(98,44,124,.08); }
.history-new-button:hover { color: #fff; background: #aa66cc; }
.history-new-button strong { font-size: 13px; }
.history-new-button .app-icon { width: 16px; height: 16px; }
.history-status { display: grid; min-height: 300px; place-items: center; margin: 0; padding: 25px; color: #8a6a93; font-size: 12px; text-align: center; }
.legacy-timeline { position: relative; max-height: 650px; min-height: 300px; overflow: auto; padding: 22px 18px 28px 54px; color: #a94dca; scrollbar-color: #c99bd9 #f7f0fa; }
.legacy-timeline::before { display: none; }
.history-entry { position: relative; margin: 0 0 22px; padding: 14px 16px 16px; border: 1px solid #eee6f2; border-radius: 7px; background: #fff; box-shadow: 0 3px 9px rgba(89,43,105,.08); }
.history-entry::before { content: ""; position: absolute; top: -24px; bottom: -24px; left: -26px; width: 2px; background: #d4d9df; transform: translateX(-50%); z-index: 1; }
.history-entry:first-child::before { top: 18px; }
.history-entry:last-child::before { bottom: calc(100% - 18px); }
.history-entry-dot { position: absolute; top: 18px; left: -26px; z-index: 2; width: 22px; height: 22px; transform: translateX(-50%); border: 3px solid #aa66cc; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #fff; }
.history-entry > header { display: flex; min-height: 32px; align-items: center; gap: 10px; color: #596170; }
.history-entry time { margin-right: auto; padding: 7px 14px; border-radius: 14px; color: #aa66cc; background: #f0e2f6; font-size: 13px; font-weight: 850; }
.history-entry-actions { display: flex; align-items: center; gap: 6px; }
.history-entry-edit, .history-entry-delete { display: grid; width: 38px; height: 38px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: background .15s ease, color .15s ease, transform .15s ease; }
.history-entry-edit { color: #8f49b1; }
.history-entry-edit:hover, .history-entry-edit:focus-visible { color: #fff; background: #9a54bd; outline: 0; transform: scale(1.08); }
.history-entry-delete { color: #ef5350; }
.history-entry-delete:hover, .history-entry-delete:focus-visible { color: #fff; background: #ef5350; outline: 0; transform: scale(1.08); }
.history-entry-edit .app-icon, .history-entry-delete .app-icon { width: 18px; height: 18px; }
.history-entry-delete:disabled { cursor: default; opacity: .72; }
.history-entry > p { margin: 12px 0 0; padding: 14px 16px; border-radius: 8px; color: #374151; background: #fbf8fd; font-size: 14px; line-height: 1.6; text-align: left; }
.legacy-module-stage { display: grid; min-height: 390px; place-content: center; justify-items: center; padding: 28px; border: 1px solid #dce5ef; border-radius: 6px; color: #8b6b94; background: #fefbff; box-shadow: 0 3px 9px rgba(37,63,100,.08); text-align: center; }
.legacy-module-stage[hidden] { display: none; }
.legacy-module-stage > span { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 12px; border-radius: 50%; color: #fff; background: var(--legacy-gradient); }
.legacy-module-stage > span .app-icon { width: 22px; height: 22px; }
.legacy-module-stage strong { color: var(--legacy-blue); font-size: 11px; }
.legacy-module-stage p { max-width: 330px; margin: 8px 0 0; font-size: 9px; line-height: 1.55; }

/* Estudios: mismo contrato e interacción del módulo legacy. */
.legacy-studies-card { min-height: 420px; padding: 18px; border: 1px solid #dce5ef; border-radius: 8px; background: #fff; box-shadow: 0 3px 12px rgba(37,63,100,.08); }
.legacy-studies-card[hidden] { display: none; }
.studies-heading { display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 48px; padding: 0 12px 0 18px; border-radius: 6px; color: #fff; background: linear-gradient(120deg, #21a8dc, #327fee); }
.studies-heading h3 { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 850; letter-spacing: .03em; }
.studies-heading h3 .app-icon { width: 17px; height: 17px; }
.new-study-button { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px auto 14px; padding: 10px 18px; border: 0; color: #168bc7; background: transparent; font-size: 13px; font-weight: 850; }
.new-study-button:hover { color: #2e55df; }
.new-study-button .app-icon { width: 16px; height: 16px; }
.studies-status { margin: 0; padding: 58px 18px; color: #7a8797; font-size: 13px; text-align: center; }
.studies-list { display: grid; max-height: 480px; gap: 12px; overflow: auto; padding: 4px 6px 6px; }
.study-row { display: grid; grid-template-columns: minmax(130px, 1.1fr) minmax(0, 2fr) minmax(110px, 1.1fr) 44px; align-items: center; min-height: 68px; overflow: hidden; border: 1px solid #e3eaf2; border-top: 3px solid #2da8da; border-radius: 10px; background: #fff; box-shadow: 0 4px 12px rgba(34,67,105,.07); animation: legacy-card-arrival 330ms ease both; animation-delay: calc(var(--study-index, 0) * 45ms); }
.study-row-main { display: contents; }
.study-row-main > span, .study-row-main > strong { margin: 0 10px; }
.study-date-pill { padding: 9px 16px; border: 1px solid #cbeaf7; border-radius: 999px; color: #188abf; background: #eaf8fd; font-size: 13px; font-weight: 850; text-align: center; white-space: nowrap; }
.study-row-title { overflow: hidden; color: #1e7eb5; font-size: 14px; font-weight: 750; line-height: 1.45; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.study-status-pill { padding: 8px 16px; border-radius: 999px; color: #df344d; background: #ffe9ed; font-size: 12px; font-weight: 850; text-align: center; }
.study-status-pill.is-received { color: #099d59; background: #e6f8ee; }
.study-row-edit { display: grid; grid-column: 1 / 4; grid-template-columns: minmax(130px, 1.1fr) minmax(0, 2fr) minmax(110px, 1.1fr); min-width: 0; min-height: 65px; align-items: center; padding: 10px 8px; border: 0; color: inherit; background: transparent; cursor: pointer; }
.study-row-edit:hover { background: linear-gradient(90deg, #f7fcff, #fbf9ff); }
.study-row-edit:focus-visible { outline: 3px solid rgba(45,127,240,.22); outline-offset: -3px; }
.study-row-delete { display: grid; width: 38px; height: 38px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #8f9baa; background: transparent; }
.study-row-delete .app-icon { width: 18px; height: 18px; }
.study-row-delete:hover { color: #e43d58; background: #fff0f2; }

.legacy-study-dialog, .legacy-photo-dialog { width: min(720px, calc(100% - 28px)); max-width: none; max-height: 90vh; padding: 0; overflow: hidden; border: 0; border-radius: 12px; color: #566172; background: #fff; box-shadow: 0 28px 80px rgba(20,31,59,.36); }
.legacy-study-dialog[open], .legacy-photo-dialog[open] { animation: legacy-modal-arrival 240ms cubic-bezier(.2,.72,.2,1) both; }
.legacy-study-dialog::backdrop, .legacy-photo-dialog::backdrop { background: rgba(21,29,57,.62); backdrop-filter: blur(3px); }
.legacy-study-dialog form, .legacy-study-dialog article, .legacy-photo-dialog form { display: flex; max-height: 90vh; flex-direction: column; }
.study-dialog-header, .legacy-photo-dialog > form > header { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; color: #fff; background: linear-gradient(120deg, #21a8dc, #327fee); }
.study-dialog-header h2, .legacy-photo-dialog h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 19px; font-weight: 800; }
.study-dialog-header h2 .app-icon, .legacy-photo-dialog h2 .app-icon { width: 22px; height: 22px; }
.study-dialog-header > button, .legacy-photo-dialog header > button { display: grid; width: 40px; height: 40px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.18); }
.study-dialog-header > button .app-icon, .legacy-photo-dialog header > button .app-icon { width: 20px; height: 20px; }
.study-dialog-body { display: grid; gap: 18px; overflow: auto; padding: 26px; }
.study-dialog-body label { display: flex; flex-direction: column; gap: 8px; color: #435165; font-size: 13px; font-weight: 800; }
.study-dialog-body label b { color: #e53a54; }
.study-dialog-body textarea, .study-dialog-body input[type="date"] { width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid #d6e0ea; border-radius: 8px; outline: 0; color: #334155; background: #fff; font: inherit; font-size: 14px; font-weight: 600; resize: vertical; }
.study-dialog-body textarea { min-height: 90px; }
.study-dialog-body textarea:focus, .study-dialog-body input:focus { border-color: #278fd5; box-shadow: 0 0 0 3px rgba(39,143,213,.16); }
.study-dialog-body > p[role="alert"] { min-height: 18px; margin: 0; color: #c92e49; font-size: 12px; font-weight: 700; }
.legacy-study-dialog footer, .legacy-photo-dialog footer { display: flex; justify-content: flex-end; gap: 14px; padding: 16px 24px; border-top: 1px solid #e1e8ef; background: #fafdff; }
.legacy-study-dialog footer button, .legacy-photo-dialog footer button { min-width: 140px; min-height: 46px; padding: 12px 24px; border-radius: 8px; font-size: 13px; font-weight: 850; letter-spacing: .03em; }
.study-cancel-button, .photo-cancel-button { border: 1px solid #2a91d3; color: #2788c7; background: #fff; }
.study-save-button, .photo-save-button { border: 0; color: #fff; background: linear-gradient(120deg, #21a8dc, #327fee); }
.study-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.study-wide-field, .study-status-editor { grid-column: 1 / -1; }
.study-date-field { max-width: 220px; justify-self: start; }
.study-status-editor { display: grid; grid-template-columns: 1fr auto minmax(200px, 1fr); align-items: center; gap: 18px; padding: 16px 20px; border: 1px solid #d9e6ee; border-radius: 10px; background: #f7fcff; }
.study-status-editor > div { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: #536172; }
.study-status-editor strong { padding: 8px 16px; border-radius: 999px; color: #dc354d; background: #ffe7eb; font-size: 12px; font-weight: 850; }
.study-status-editor strong.is-received { color: #079955; background: #e4f8ed; }
.study-status-editor > label:has(input[type="checkbox"]) { min-height: 44px; align-items: center; flex-direction: row; gap: 10px; font-size: 13px; font-weight: 800; cursor: pointer; }
.study-status-editor input[type="checkbox"] { width: 20px; height: 20px; accent-color: #11aa63; cursor: pointer; }
.study-delete-dialog .study-dialog-header { background: linear-gradient(120deg, #ff4a62, #e53653); }
.study-delete-dialog .study-dialog-body { color: #bf2d46; background: #fff1f3; text-align: center; }
.study-delete-dialog .study-dialog-body > p:not([role="alert"]) { margin: 0; font-size: 13px; font-weight: 700; }
.study-delete-dialog .study-dialog-body > strong { font-size: 16px; }

/* Presupuestos: replica funcional del módulo legacy con cálculos seguros. */
.legacy-budgets-card { container-type: inline-size; min-height: 390px; padding: 18px; border: 1px solid #dce5ef; border-radius: 7px; background: #fff; box-shadow: 0 3px 9px rgba(37,63,100,.08); }
.legacy-budgets-card[hidden] { display: none; }
.premium-feature-lock { min-height:310px; place-content:center; justify-items:center; padding:35px; text-align:center; }
.premium-feature-lock:not([hidden]) { display:grid; }
.premium-feature-lock > .app-icon { width:48px; height:48px; color:#e9a414; }
.premium-feature-lock h3 { margin:16px 0 5px; color:#626e7d; font-size:16px; }
.premium-feature-lock p { max-width:390px; margin:0; color:#8a94a1; font-size:10px; line-height:1.6; }
.premium-feature-lock button { margin-top:18px; padding:9px 17px; border:0; border-radius:6px; color:#fff; background:var(--legacy-gradient); font-size:8px; font-weight:850; }
.budgets-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid #e6ebf1; }
.budgets-heading h3 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--legacy-blue); font-size: 18px; font-weight: 850; }
.budgets-heading h3 .app-icon { width: 22px; height: 22px; }
.budgets-heading p { margin: 4px 0 0; color: #778393; font-size: 13px; font-weight: 600; }
.budget-heading-actions { display: flex; align-items: center; gap: 10px; }
.new-budget-button { display: flex; min-height: 46px; align-items: center; gap: 8px; padding: 10px 20px; border: 0; border-radius: 8px; color: #fff; background: var(--legacy-gradient); box-shadow: 0 6px 14px rgba(53,104,225,.2); font-size: 13px; font-weight: 850; letter-spacing: .02em; }
.new-budget-button .app-icon { width: 16px; height: 16px; }
.budget-status-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 18px 0; }
.budget-status-summary span { display: flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px; border: 1px solid #e2e8ef; border-radius: 8px; color: #5f6b7a; background: #f8fafc; font-size: 12px; font-weight: 850; }
.budget-status-summary b { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: #fff; background: #8b96a4; font-size: 12px; font-weight: 850; }
.budget-status-summary .is-borrador b, .budget-state.is-borrador { background: #8994a4; }
.budget-status-summary .is-esperando b, .budget-state.is-esperando { background: #e7a52d; }
.budget-status-summary .is-aceptado b, .budget-state.is-aceptado { background: #25a5d7; }
.budget-status-summary .is-activo b, .budget-state.is-activo { background: #15ad6b; }
.budget-status-summary .is-finalizado b, .budget-state.is-finalizado { background: #6d65d8; }
.budget-status-summary .is-rechazado b, .budget-state.is-rechazado { background: #e54a61; }
.budgets-status { margin: 44px 0; color: #8290a0; font-size: 13px; font-weight: 700; text-align: center; }
.budgets-table-wrap { max-width:100%; overflow-x:hidden; }
.budgets-table { width: 100%; table-layout:fixed; border-collapse: separate; border-spacing: 0 10px; font-size: 13px; }
.budgets-table th { padding: 0 8px 6px; color: #6c7684; font-size: 11px; font-weight: 850; text-align: left; text-transform: uppercase; letter-spacing: .04em; }
.budgets-table th:nth-child(1) { width:11%; }
.budgets-table th:nth-child(2) { width:22%; }
.budgets-table th:nth-child(3) { width:13%; }
.budgets-table th:nth-child(4) { width:14%; }
.budgets-table th:nth-child(5) { width:14%; text-align:center; }
.budgets-table th:nth-child(6) { width:26%; text-align:right; padding-right: 12px; }
.budgets-table td { min-width:0; padding: 14px 10px; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; color: #4b5563; background: #fff; overflow:hidden; text-overflow:ellipsis; }
.budgets-table td:first-child { border-left: 1px solid #e2e8f0; border-radius: 8px 0 0 8px; color: #3989d5; font-weight: 800; }
.budgets-table td:last-child { border-right: 1px solid #e2e8f0; border-radius: 0 8px 8px 0; padding-right: 8px; }
.budgets-table .budget-compact-date { padding-inline: 4px; color: #3989d5; text-align: center; }
.budget-compact-date-content { display: grid; align-content: center; justify-items: center; gap: 3px; }
.budget-compact-date-content strong { font-size: 22px; line-height: .95; letter-spacing: -.04em; font-weight: 900; }
.budget-compact-date-content span { font-size: 12px; font-weight: 850; line-height: 1.1; white-space: nowrap; }
.budgets-table tr { animation: legacy-card-arrival 330ms ease both; animation-delay: calc(var(--budget-index, 0) * 42ms); }
.budgets-table tr:hover td { background: #f8fbff; }
.budgets-table td:nth-child(2) strong, .budgets-table td:nth-child(2) small { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.budgets-table td:nth-child(2) strong { color: #1e7eb5; font-size: 14px; font-weight: 800; }
.budgets-table td:nth-child(2) small { margin-top: 4px; color: #828a96; font-size: 12px; font-weight: 600; }
.budget-final-amount { color: #7250d6 !important; font-size: 16px; font-weight: 900; white-space: nowrap; }
.budget-expired-date { color: #df4058 !important; font-weight: 800; }
.budgets-table td:nth-child(4) { position: relative; display: table-cell; vertical-align: middle; text-align: center; }
.budgets-table td:nth-child(4) small, .budgets-table td:nth-child(4) time { display: block; white-space: nowrap; }
.budgets-table td:nth-child(4) small { position: absolute; top: 6px; right: 0; left: 0; color: #8a94a3; font-size: 10px; font-weight: 850; letter-spacing: .04em; }
.budgets-table td:nth-child(4) time { color: #4b5563; font-size: 14px; font-weight: 850; line-height: 1; margin-top: 8px; }
.budgets-table .budget-expired-date small, .budgets-table .budget-expired-date time { color: #df4058 !important; }
.budgets-table td:nth-child(5) { text-align:center; }
.budget-state { display: inline-flex; width: 100%; max-width: 95px; min-width: 0; min-height: 34px; align-items: center; justify-content: center; padding: 0 8px; border: 0; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 850; line-height: 1; letter-spacing: .02em; text-align: center; }
.budgets-table .budget-state { width: 90px !important; max-width: 90px !important; min-height: 34px; padding: 0 6px; }
.budget-state:disabled { cursor: default; opacity: .8; }
.budget-row-actions { display: flex; min-width:0; align-items: center; justify-content: flex-end; gap: 3px; white-space: nowrap; }
.budget-row-actions button { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #6b7684; background: transparent; }
.budget-row-actions button .app-icon { width: 17px; height: 17px; }
.budget-row-actions button:hover, .budget-row-actions button:focus-visible { color: #347fd2; background: #eaf4ff; outline: 0; }
.budget-row-actions button.is-whatsapp { color: #12a85f; }
.budget-row-actions button.is-whatsapp .app-icon { width: 18px; height: 18px; }
.budget-row-actions button.is-whatsapp:hover, .budget-row-actions button.is-whatsapp:focus-visible { color: #fff; background: #12a85f; }
.budget-row-actions button.is-email { color: #2b9bd6; }
.budget-row-actions button.is-pdf { color: #e4475d; }
.budget-row-actions button.is-delete:hover { color: #df4058; background: #fff0f2; }
.budget-row-actions button:disabled { cursor: not-allowed; opacity: .3; }
.budget-action-divider { width: 1px; height: 22px; margin: 0 2px; background: #dfe5ec; }

.budget-editor-dialog, .budget-preview-dialog, .budget-status-dialog { width: min(980px, calc(100% - 28px)); max-width: none; max-height: 92vh; padding: 0; overflow: hidden; border: 0; border-radius: 12px; color: #586576; background: #fff; box-shadow: 0 28px 80px rgba(20,31,59,.38); }
.budget-preview-dialog { width: min(800px, calc(100% - 28px)); }
.budget-status-dialog { width: min(540px, calc(100% - 28px)); }
.budget-editor-dialog[open], .budget-preview-dialog[open], .budget-status-dialog[open] { animation: legacy-modal-arrival 240ms cubic-bezier(.2,.72,.2,1) both; }
.budget-editor-dialog::backdrop, .budget-preview-dialog::backdrop, .budget-status-dialog::backdrop { background: rgba(21,29,57,.64); backdrop-filter: blur(3px); }
.budget-editor-dialog form, .budget-preview-dialog article, .budget-status-dialog form { display: flex; max-height: 92vh; flex-direction: column; }
.budget-dialog-header { display: flex; min-height: 80px; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; color: #fff; background: var(--legacy-gradient); }
.budget-dialog-header > div { display: flex; align-items: center; gap: 12px; }
.budget-dialog-header > div > .app-icon { width: 26px; height: 26px; }
.budget-dialog-header h2 { margin: 0; font-size: 19px; font-weight: 800; }
.budget-dialog-header p { margin: 4px 0 0; color: rgba(255,255,255,.9); font-size: 13px; font-weight: 600; }
.budget-dialog-header > button { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.18); display: grid; place-items: center; }
.budget-dialog-header > button .app-icon { width: 20px; height: 20px; }
.budget-steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(44px, .82fr) minmax(0, 1fr); align-items: center; width: 100%; padding: 18px 32px; border-bottom: 1px solid #e4e9f0; background: linear-gradient(180deg, #fafcff, #f6f8fc); }
.budget-steps button { display: flex; width: 100%; min-width: 0; min-height: 56px; align-items: center; justify-content: flex-start; gap: 12px; padding: 10px 18px; border: 1px solid transparent; border-radius: 12px; color: #7f8897; background: transparent; font-size: 13px; font-weight: 850; }
.budget-steps button span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #7b8492; background: #e4e8ee; font-size: 13px; font-weight: 850; }
.budget-steps button.is-active { color: #347fd2; border-color: #dce7f3; background: #fff; box-shadow: 0 5px 14px rgba(43,84,135,.08); }
.budget-steps button.is-active span { color: #fff; background: var(--legacy-gradient); }
.budget-steps button.is-complete { border-color: #c9ecd9; color: #168d58; background: #f5fdf8; box-shadow: 0 5px 14px rgba(31,151,91,.08); }
.budget-steps button.is-complete span { color: #fff; background: #20ae6a; }
.budget-steps i { align-self: center; height: 4px; border-radius: 999px; background: #dfe5ed; }
.budget-steps button.is-complete + i { background: linear-gradient(90deg, #20ae6a, #6bcf91); }
.budget-dialog-body { overflow: auto; padding: 26px; }
.budget-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.budget-form-grid label, .budget-status-body label { display: flex; min-width: 0; flex-direction: column; gap: 8px; color: #374151; font-size: 14px; font-weight: 800; }
.budget-form-grid label > span b { color: #e63e57; }
.budget-form-grid label > small { margin-top: -2px; color: #778393; font-size: 12px; font-weight: 500; }
.budget-form-grid input, .budget-form-grid textarea, .budget-form-grid select, .budget-status-body select { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #d7e0ea; border-radius: 8px; outline: 0; color: #374151; background: #fff; font: inherit; font-size: 14px; font-weight: 600; }
.budget-form-grid textarea { resize: vertical; min-height: 110px; padding: 12px 14px; font-size: 14px; font-weight: 600; }
.budget-form-grid input:focus, .budget-form-grid textarea:focus, .budget-form-grid select:focus, .budget-status-body select:focus { border-color: #2e81e6; box-shadow: 0 0 0 3px rgba(46,129,230,.12); }
.budget-wide { grid-column: 1 / -1; }
.budget-values-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); gap: 24px; align-items: start; }
.budget-suffix-input { display: flex; align-items: center; }
.budget-suffix-input input { border-radius: 8px 0 0 8px; }
.budget-suffix-input span { display: grid; min-height: 48px; place-items: center; padding: 0 16px; border: 1px solid #d7e0ea; border-left: 0; border-radius: 0 8px 8px 0; color: #fff; background: #7b5bd7; font-size: 14px; font-weight: 800; }
.budget-calculation { padding: 22px; border: 1px solid #dfe5ef; border-radius: 10px; background: linear-gradient(145deg, #f7fbff, #fbf8ff); }
.budget-calculation h3 { margin: 0 0 12px; color: #347fd2; font-size: 15px; font-weight: 850; }
.budget-calculation dl { margin: 0; }
.budget-calculation dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #e2e7ef; font-size: 13px; }
.budget-calculation dt { color: #6b7684; }
.budget-calculation dd { margin: 0; color: #374151; font-weight: 850; }
.budget-calculation .is-total { margin: 6px -8px; padding: 14px 10px; border: 0; border-radius: 8px; color: #fff; background: var(--legacy-gradient); }
.budget-calculation .is-total dt, .budget-calculation .is-total dd { color: #fff; font-size: 15px; font-weight: 850; }
.budget-calculation small { display: block; margin-top: 12px; color: #795c9c; font-size: 12px; line-height: 1.55; }
.budget-calculation small.is-error { color: #cf3850; font-weight: 750; }
.budget-form-error, .budget-status-body p[role="alert"] { min-height: 20px; margin: 16px 0 0; color: #c92e49; font-size: 12px; font-weight: 700; }
.budget-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 24px; border-top: 1px solid #e1e8ef; background: #fafdff; }
.budget-dialog-footer > div { display: flex; gap: 10px; }
.budget-dialog-footer button, .budget-preview-footer button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border: 1px solid #d9e1ea; border-radius: 8px; color: #4b5563; background: #fff; font-size: 13px; font-weight: 850; }
.budget-next-button, .budget-save-button { border-color: transparent !important; color: #fff !important; background: var(--legacy-gradient) !important; }
.budget-status-body { padding: 26px; }
.budget-preview-body { overflow: auto; padding: 26px; }
.budget-preview-patient { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid #e0e6ee; }
.budget-preview-patient strong, .budget-preview-patient span { display: block; }
.budget-preview-patient > .budget-state { display: inline-flex; }
.budget-preview-patient strong { color: #337fc9; font-size: 18px; font-weight: 850; }
.budget-preview-patient div > span { margin-top: 4px; color: #6b7684; font-size: 13px; }
.budget-preview-treatment { padding: 22px 0; }
.budget-preview-treatment h3 { margin: 0 0 10px; color: #6550c7; font-size: 18px; font-weight: 850; }
.budget-preview-treatment > p { margin: 0; color: #4b5563; font-size: 14px; line-height: 1.65; white-space: pre-wrap; }
.budget-preview-treatment > div { display: flex; gap: 24px; margin-top: 14px; }
.budget-preview-treatment > div p, .budget-preview-money > p { display: flex; align-items: center; gap: 8px; margin: 0; color: #6b7684; font-size: 13px; }
.budget-preview-money { overflow: hidden; border: 1px solid #dfe5ed; border-radius: 10px; }
.budget-preview-money > div { display: flex; justify-content: space-between; gap: 15px; padding: 13px 18px; border-bottom: 1px solid #e7ebf1; font-size: 13px; }
.budget-preview-money > div:last-of-type { border-bottom: 0; }
.budget-preview-money > div strong { color: #374151; font-weight: 850; }
.budget-preview-money > div.is-total { color: #fff; background: var(--legacy-gradient); font-size: 15px; font-weight: 850; }
.budget-preview-money > div.is-total strong { color: #fff; }
.budget-preview-money > p { padding: 12px 18px; background: #faf8ff; font-size: 13px; }
.budget-preview-notes { margin: 18px 0 0; padding: 16px 18px; border-radius: 8px; color: #4b5563; background: #f4f7fb; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.budget-preview-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 24px; border-top: 1px solid #e1e8ef; background: #fafdff; }
.budget-preview-footer small { display: flex; align-items: center; gap: 8px; color: #6b7684; font-size: 12px; }
.budget-preview-footer > div { display: flex; gap: 10px; }
.budget-preview-footer button.is-whatsapp { color: #079c58; border-color: #b9e7d0; }
.budget-preview-footer button.is-email { color: #248fc8; border-color: #bfdef0; }
.budget-preview-footer button.is-pdf { color: #d83d56; border-color: #efc5cd; }
.budget-preview-footer button:disabled { cursor: not-allowed; opacity: .38; }
.budget-share-dialog { width: min(620px, calc(100% - 28px)); max-width: none; max-height: 92vh; padding: 0; overflow: hidden; border: 0; border-radius: 10px; color: #586576; background: #fff; box-shadow: 0 28px 80px rgba(20,31,59,.38); }
.budget-share-dialog[open] { animation: legacy-modal-arrival 240ms cubic-bezier(.2,.72,.2,1) both; }
.budget-share-dialog::backdrop { background: rgba(21,29,57,.64); backdrop-filter: blur(3px); }
.budget-share-dialog article { display: flex; max-height: 92vh; flex-direction: column; }
.budget-share-body { display: grid; gap: 14px; overflow: auto; padding: 22px; }
.budget-share-destination { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 14px; border-radius: 7px; color: #447ea8; background: #edf8ff; font-size: 9px; }
.budget-share-body label { display: flex; flex-direction: column; gap: 6px; color: #606c7d; font-size: 9px; font-weight: 800; }
.budget-share-body input, .budget-share-body textarea { width: 100%; padding: 10px 12px; border: 1px solid #d8e1eb; border-radius: 6px; color: #536071; background: #fafcff; font: inherit; font-size: 9px; resize: vertical; }
.budget-share-body > p { display: flex; gap: 7px; margin: 0; padding: 10px 12px; border-radius: 6px; color: #82629a; background: #faf5ff; font-size: 8px; line-height: 1.5; }

@media (max-width: 880px) {
  .budget-status-summary { grid-template-columns: repeat(3, 1fr); }
  .budget-values-layout { grid-template-columns: 1fr; }
}

/* La ficha tiene columnas laterales: conserva una fila corta y se adapta al ancho real de Presupuestos. */
@container (max-width: 800px) {
  .budgets-table thead { display: none; }
  .budgets-table, .budgets-table tbody { display: block; width: 100%; }
  .budgets-table { table-layout: auto; border-spacing: 0 8px; }
  .budgets-table tr { display: grid; grid-template-columns: 64px minmax(120px, 1fr) minmax(86px, auto) minmax(82px, auto) 76px 122px; grid-template-areas: "date treatment amount expiration status actions"; width: 100%; min-width: 0; min-height: 72px; margin-bottom: 8px; overflow: hidden; border: 1px solid #e1e7ef; border-top: 4px solid #2da8da; border-radius: 7px; }
  .budgets-table tr:last-child { margin-bottom: 0; }
  .budgets-table td { display: flex; min-width: 0; align-items: center; padding: 8px 7px; border: 0 !important; border-radius: 0 !important; overflow: hidden; }
  .budgets-table td::before { display: none; }
  .budgets-table td:nth-child(1) { grid-area: date; justify-content: center; border-right: 1px solid #edf0f4 !important; }
  .budgets-table td:nth-child(2) { grid-area: treatment; align-items: flex-start; flex-direction: column; justify-content: center; }
  .budgets-table td:nth-child(3) { grid-area: amount; justify-content: flex-start; }
  .budgets-table td:nth-child(4) { position: relative; display: flex; grid-area: expiration; align-items: center; justify-content: center; color: #697788; white-space: nowrap; }
  .budgets-table td:nth-child(4) small { top: 7px; }
  .budgets-table td:nth-child(4) time { font-size: 12px; }
  .budgets-table td:nth-child(5) { grid-area: status; justify-content: center; }
  .budgets-table td:nth-child(6) { grid-area: actions; justify-content: flex-end; padding-right: 7px; }
  .budgets-table .budget-compact-date-content { gap: 2px; }
  .budget-compact-date-content strong { font-size: 19px; }
  .budget-compact-date-content span { font-size: 8px; }
  .budgets-table td:nth-child(2) strong { max-width: 100%; }
  .budgets-table td:nth-child(2) strong { font-size: 9px; }
  .budgets-table .budget-final-amount { font-size: 12px; }
  .budgets-table .budget-state { width: 72px !important; max-width: 72px !important; min-height: 29px; font-size: 7px; }
  .budget-row-actions { gap: 0; justify-content: flex-end !important; overflow: visible !important; white-space: nowrap; }
  .budget-row-actions button { width: 24px; height: 24px; flex-basis: 24px; }
  .budget-row-actions button .app-icon { width: 15px; height: 15px; }
  .budget-row-actions button.is-whatsapp .app-icon { width: 17px; height: 17px; }
  .budget-action-divider { height: 16px; margin-inline: 0; }
}

@container (max-width: 540px) {
  .budgets-table tr { grid-template-columns: 56px minmax(84px, 1fr) 72px 116px; grid-template-areas: "date treatment status actions" "date amount expiration actions"; min-height: 82px; }
  .budgets-table td { padding-block: 5px; }
  .budgets-table td:nth-child(3) { align-items: flex-start; }
  .budgets-table .budget-final-amount { font-size: 11px; }
  .budgets-table .budget-state { width: 68px !important; max-width: 68px !important; }
}

@media (max-width: 620px) {
  .budgets-heading, .budget-dialog-footer, .budget-preview-footer { align-items: stretch; flex-direction: column; }
  .new-budget-button { justify-content: center; }
  .budget-status-summary { grid-template-columns: repeat(2, 1fr); }
  .budget-form-grid { grid-template-columns: 1fr; }
  .budget-wide { grid-column: auto; }
  .budget-steps { grid-template-columns: 1fr 24px 1fr; padding-inline: 8px; }
  .budget-steps button { min-width: 0; min-height: 44px; padding-inline: 7px; }
  .budget-steps button { font-size: 7px; }
}

.account-view { width: min(1480px, 100%); min-height: 760px; margin: 0 auto; padding: 12px 0 54px; color: #2d394d; }
.account-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 22px; margin-bottom: 24px; padding: 16px 2px 18px; border-bottom: 1px solid #dce5ef; }
.account-heading > div { display: grid; gap: 2px; }
.account-heading p, .account-heading h1, .account-heading span { margin: 0; }
.account-heading p { color: #7b8ba1; font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.account-heading h1 { color: #26384f; font-size: clamp(27px,3vw,38px); line-height: 1.05; }
.account-heading span { color: #6f7e91; font-size: 13px; font-weight: 650; }
.account-heading > aside { display: grid; justify-items: end; gap: 5px; }
.account-heading > aside small { color: #93a0b0; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.account-heading > aside strong { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid #bfe6d4; border-radius: 999px; color: #14714e; background: #eefaf5; font-size: 12px; }
.account-heading > aside .app-icon { width: 16px; height: 16px; }
.account-status { display: grid; min-height: 260px; place-items: center; margin: 0; border: 1px solid #dce5ef; border-radius: 18px; color: #76869a; background: #fff; box-shadow: 0 10px 28px rgba(39,58,83,.07); font-weight: 750; }
.account-overview { display: grid; gap: 24px; }
.account-hero-card { display: grid; grid-template-columns: 68px minmax(0,1fr) auto; align-items: center; gap: 20px; padding: 24px 28px; overflow: hidden; border: 1px solid #d8def7; border-radius: 20px; background: linear-gradient(135deg,#fafbff,#f1f3ff); box-shadow: 0 12px 32px rgba(52,64,125,.09); }
.account-plan-mark { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 18px; color: #fff; background: linear-gradient(135deg,#5c59cf,#7d6de3); box-shadow: 0 9px 20px rgba(92,89,207,.24); }
.account-plan-mark .app-icon { width: 31px; height: 31px; }
.account-plan-mark.is-premium-plan .app-icon { color: #e9a414; }
.account-hero-card > div:nth-child(2) { min-width: 0; }
.account-hero-card small { color: #858aa8; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.account-hero-card h2 { margin: 2px 0 4px; color: #403f9e; font-size: 28px; }
.account-hero-card p { margin: 0; color: #737a91; font-size: 13px; }
.account-hero-card dl { display: grid; grid-template-columns: repeat(3,minmax(105px,1fr)); margin: 0; overflow: hidden; border: 1px solid #dce1f5; border-radius: 13px; background: rgba(255,255,255,.78); }
.account-hero-card dl div { display: grid; gap: 3px; padding: 13px 17px; }
.account-hero-card dl div + div { border-left: 1px solid #dce1f5; }
.account-hero-card dt { color: #8b91a5; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.account-hero-card dd { margin: 0; color: #354058; font-size: 18px; font-weight: 900; }
.account-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.account-card { --account-color:#357dc7; --account-soft:#eef6ff; display: grid; grid-template-rows: auto auto auto auto; gap: 15px; min-width: 0; padding: 22px; border: 1px solid #dfe6ee; border-top: 4px solid var(--account-color); border-radius: 17px; background: #fff; box-shadow: 0 9px 24px rgba(41,58,80,.065); }
.account-card.is-green { --account-color:#16a66d; --account-soft:#eefaf5; }
.account-card.is-amber { --account-color:#d99316; --account-soft:#fff8e9; }
.account-card.is-cyan { --account-color:#168ea7; --account-soft:#ebf9fb; }
.account-card.is-purple { --account-color:#7258cf; --account-soft:#f4f1ff; }
.account-card.is-indigo { --account-color:#475fc2; --account-soft:#eff2ff; }
.account-card.is-slate { --account-color:#526172; --account-soft:#f1f4f7; }
.account-card.is-teal { --account-color:#138c83; --account-soft:#ecfaf8; }
.account-card header { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 13px; }
.account-card header > span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; color: var(--account-color); background: var(--account-soft); }
.account-card header .app-icon { width: 22px; height: 22px; }
.account-card header p, .account-card header h2 { margin: 0; }
.account-card header p { color: var(--account-color); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.account-card header h2 { color: #303c50; font-size: 19px; }
.account-card > p { min-height: 39px; margin: 0; color: #798697; font-size: 12px; line-height: 1.6; }
.account-card-summary { display: flex; min-height: 43px; flex-wrap: wrap; align-items: center; gap: 9px; }
.account-card-summary span { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border-radius: 8px; color: #718094; background: #f4f7fa; font-size: 10px; font-weight: 700; }
.account-card-summary b { color: #354258; font-size: 11px; }
.account-card > button { display: flex; min-height: 44px; align-items: center; justify-content: flex-start; gap: 8px; padding: 10px 13px; border: 1px solid color-mix(in srgb,var(--account-color) 38%,white); border-radius: 10px; color: var(--account-color); background: var(--account-soft); font: inherit; font-size: 12px; font-weight: 850; }
.account-card > button .app-icon { width: 17px; height: 17px; }
.account-card > button small { margin-left: auto; color: #8996a5; font-size: 9px; font-weight: 750; }
.account-card > button:not(:disabled) { cursor: pointer; }
.account-card > button:not(:disabled):hover { color: #fff; background: var(--account-color); }
.account-card > button:not(:disabled):hover small { color: rgba(255,255,255,.8); }
.account-card > button:disabled { cursor: not-allowed; opacity: .82; }
.account-integrity-note { display: flex; align-items: flex-start; gap: 13px; padding: 17px 19px; border: 1px solid #f0d28e; border-left: 5px solid #dfa324; border-radius: 12px; color: #7c5d16; background: #fff9e9; }
.account-integrity-note > .app-icon { width: 21px; height: 21px; flex: 0 0 21px; margin-top: 1px; }
.account-integrity-note strong { display: block; margin-bottom: 3px; font-size: 13px; }
.account-integrity-note p { margin: 0; color: #846f3e; font-size: 11px; line-height: 1.55; }

.patient-export-dialog { width: min(760px,calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; overflow: hidden; border: 0; border-radius: 20px; color: #2d394d; background: #f5fafc; box-shadow: 0 28px 80px rgba(16,64,77,.34); }
.patient-export-dialog::backdrop { background: rgba(18,39,54,.66); backdrop-filter: blur(4px); }
.patient-export-dialog > article { display: grid; max-height: calc(100vh - 28px); grid-template-rows: auto minmax(0,1fr) auto; }
.patient-export-dialog > article > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; border-bottom: 1px solid #d5e7eb; background: #fff; }
.patient-export-dialog > article > header > div { display: flex; align-items: center; gap: 13px; }
.patient-export-dialog > article > header > div > span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg,#168ea7,#28afbd); box-shadow: 0 7px 17px rgba(22,142,167,.24); }
.patient-export-dialog > article > header .app-icon { width: 22px; height: 22px; }
.patient-export-dialog > article > header p, .patient-export-dialog > article > header h2 { margin: 0; }
.patient-export-dialog > article > header p { color: #168ea7; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.patient-export-dialog > article > header h2 { color: #29364c; font-size: 24px; }
.patient-export-dialog > article > header > button { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #d8e3e7; border-radius: 10px; color: #657487; background: #fff; cursor: pointer; }
.patient-export-body { display: grid; gap: 16px; padding: 22px 24px 26px; overflow-y: auto; }
.patient-export-summary { display: grid; grid-template-columns: 54px minmax(0,1fr); align-items: center; gap: 15px; padding: 17px 19px; border: 1px solid #cce7eb; border-radius: 14px; background: linear-gradient(135deg,#fff,#eefbfc); }
.patient-export-summary > span { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 14px; color: #168ea7; background: #dff6f8; }
.patient-export-summary .app-icon { width: 24px; height: 24px; }
.patient-export-summary div { display: grid; gap: 3px; }
.patient-export-summary small { color: #168ea7; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.patient-export-summary strong { color: #294154; font-size: 25px; }
.patient-export-summary p { margin: 1px 0 0; color: #6e7e8b; font-size: 10px; line-height: 1.5; }
.patient-export-included { overflow: hidden; border: 1px solid #dce6ea; border-radius: 14px; background: #fff; }
.patient-export-included > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; border-bottom: 1px solid #e5ecef; }
.patient-export-included header p, .patient-export-included header h3 { margin: 0; }
.patient-export-included header p { color: #168ea7; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.patient-export-included header h3 { margin-top: 2px; color: #344356; font-size: 15px; }
.patient-export-included header b { padding: 6px 9px; border-radius: 999px; color: #14788e; background: #e6f7fa; font-size: 8px; letter-spacing: .08em; }
.patient-export-included > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: #e7edef; }
.patient-export-included > div span { position: relative; min-width: 0; padding: 10px 12px 10px 26px; color: #5f6e7c; background: #fbfcfd; font-size: 9px; font-weight: 700; }
.patient-export-included > div span::before { position: absolute; top: 12px; left: 12px; width: 7px; height: 7px; border-radius: 50%; background: #20a8b4; content: ''; }
.patient-export-excluded, .patient-export-security { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border-radius: 11px; }
.patient-export-excluded { border: 1px solid #cfe6dc; color: #267256; background: #f0faf5; }
.patient-export-security { border: 1px solid #d6e2e8; color: #42697a; background: #f2f8fa; }
.patient-export-excluded > .app-icon, .patient-export-security > .app-icon { width: 19px; height: 19px; flex: 0 0 19px; }
.patient-export-excluded p, .patient-export-security p { margin: 0; font-size: 9px; line-height: 1.55; }
.patient-export-excluded p { display: grid; gap: 2px; }
.patient-export-excluded strong { font-size: 10px; }
.patient-export-excluded span { color: #667b72; }
.patient-export-status { min-height: 16px; margin: -3px 0; color: #327184; font-size: 10px; font-weight: 750; text-align: center; }
.patient-export-primary { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(135deg,#168ea7,#20a8b4); box-shadow: 0 8px 18px rgba(22,142,167,.22); font: inherit; font-size: 11px; font-weight: 900; cursor: pointer; }
.patient-export-primary .app-icon { width: 18px; height: 18px; }
.patient-export-primary:disabled { cursor: wait; opacity: .65; box-shadow: none; }
.patient-export-dialog > article > footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 24px; border-top: 1px solid #d5e7eb; background: #fff; }
.patient-export-dialog > article > footer small { display: inline-flex; align-items: center; gap: 7px; color: #788697; font-size: 10px; }
.patient-export-dialog > article > footer small .app-icon { width: 16px; height: 16px; color: #168ea7; }
.patient-export-dialog > article > footer > button { min-height: 40px; padding: 9px 18px; border: 1px solid #cbd9de; border-radius: 9px; color: #59697b; background: #fff; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }

.account-signature-dialog { width: min(820px,calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; overflow: hidden; border: 0; border-radius: 20px; color: #2d394d; background: #f6f8fa; box-shadow: 0 28px 80px rgba(37,48,60,.36); }
.account-signature-dialog::backdrop { background: rgba(25,33,43,.68); backdrop-filter: blur(4px); }
.account-signature-dialog > article { display: grid; max-height: calc(100vh - 28px); grid-template-rows: auto minmax(0,1fr) auto; }
.account-signature-dialog > article > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; border-bottom: 1px solid #dce2e7; background: #fff; }
.account-signature-dialog > article > header > div { display: flex; align-items: center; gap: 13px; }
.account-signature-dialog > article > header > div > span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg,#455362,#667789); box-shadow: 0 7px 17px rgba(69,83,98,.25); }
.account-signature-dialog > article > header .app-icon { width: 22px; height: 22px; }
.account-signature-dialog > article > header p, .account-signature-dialog > article > header h2 { margin: 0; }
.account-signature-dialog > article > header p { color: #526172; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.account-signature-dialog > article > header h2 { color: #29364c; font-size: 24px; }
.account-signature-dialog > article > header > button { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #d9e0e6; border-radius: 10px; color: #657487; background: #fff; cursor: pointer; }
.account-signature-body { padding: 22px 24px 28px; overflow-y: auto; }
.account-signature-status { display: grid; min-height: 220px; place-items: center; margin: 0; color: #778398; font-size: 13px; font-weight: 750; }
#accountSignatureWorkspace { display: grid; gap: 16px; }
.account-signature-current { display: grid; gap: 12px; padding: 17px 19px; border: 1px solid #d9e0e6; border-radius: 14px; background: linear-gradient(135deg,#fff,#f2f5f7); }
.account-signature-current > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.account-signature-current header p, .account-signature-current header h3 { margin: 0; }
.account-signature-current header p { color: #637181; font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.account-signature-current header h3 { margin-top: 2px; color: #344155; font-size: 16px; }
.account-signature-current header b { padding: 6px 9px; border-radius: 999px; color: #657383; background: #e9edf1; font-size: 8px; letter-spacing: .06em; }
.account-signature-current.is-registered header b { color: #14764d; background: #e4f7ed; }
.account-signature-preview { display: grid; min-height: 150px; place-items: center; overflow: hidden; border: 1px dashed #ccd5dc; border-radius: 12px; background: #fff; }
.account-signature-preview img { display: block; width: min(100%,520px); max-height: 170px; object-fit: contain; }
.account-signature-preview > span { display: inline-flex; align-items: center; gap: 8px; color: #8994a0; font-size: 10px; font-weight: 750; }
.account-signature-preview > span .app-icon { width: 18px; height: 18px; }
.account-signature-current > small { color: #84909c; font-size: 9px; }
.account-signature-editor { display: grid; gap: 13px; padding: 17px 19px; border: 1px solid #d8dee4; border-radius: 14px; background: #fff; box-shadow: 0 8px 20px rgba(39,52,67,.05); }
.account-signature-editor > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.account-signature-editor > header p, .account-signature-editor > header h3 { margin: 0; }
.account-signature-editor > header p { color: #59697a; font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.account-signature-editor > header h3 { margin-top: 2px; color: #344155; font-size: 16px; }
.account-signature-editor > header > button { display: inline-flex; min-height: 35px; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid #d9e0e6; border-radius: 8px; color: #657383; background: #fff; font: inherit; font-size: 8px; font-weight: 900; cursor: pointer; }
.account-signature-editor > header .app-icon { width: 13px; height: 13px; }
.account-signature-canvas-shell { position: relative; overflow: hidden; border: 2px solid #cbd4dc; border-radius: 13px; background-color: #fff; background-image: linear-gradient(#f2f4f6 1px,transparent 1px),linear-gradient(90deg,#f2f4f6 1px,transparent 1px); background-size: 24px 24px; }
#accountSignatureCanvas { display: block; width: 100%; aspect-ratio: 5/2; cursor: crosshair; touch-action: none; }
.account-signature-canvas-shell > span { position: absolute; right: 10px; bottom: 8px; padding: 4px 7px; border-radius: 999px; color: #98a1aa; background: rgba(255,255,255,.88); font-size: 7px; font-weight: 750; pointer-events: none; }
.account-signature-editor > aside { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; border: 1px solid #d8e4ea; border-radius: 10px; color: #456a7a; background: #f3f8fa; }
.account-signature-editor > aside > .app-icon { width: 17px; height: 17px; flex: 0 0 17px; }
.account-signature-editor > aside p { display: grid; gap: 2px; margin: 0; }
.account-signature-editor > aside strong { font-size: 9px; }
.account-signature-editor > aside span { color: #687f89; font-size: 8px; line-height: 1.45; }
#accountSignatureError { min-height: 15px; margin: -4px 0; color: #c34258; font-size: 9px; font-weight: 750; text-align: center; }
.account-signature-editor > footer { display: flex; justify-content: space-between; gap: 9px; }
.account-signature-editor > footer button { min-height: 42px; padding: 9px 14px; border: 1px solid #e6cbd0; border-radius: 9px; color: #b84457; background: #fff8f9; font: inherit; font-size: 9px; font-weight: 900; cursor: pointer; }
.account-signature-editor > footer button:last-child { display: inline-flex; align-items: center; gap: 7px; border-color: #526172; color: #fff; background: #526172; }
.account-signature-editor > footer button:disabled { cursor: not-allowed; opacity: .45; }
.account-signature-editor > footer .app-icon { width: 15px; height: 15px; }
.account-signature-confirm { display: grid; gap: 13px; padding: 15px 17px; border: 1px solid #efc8cf; border-left: 5px solid #c6475c; border-radius: 11px; background: #fff7f8; }
.account-signature-confirm > div { display: flex; align-items: flex-start; gap: 10px; color: #953649; }
.account-signature-confirm > div > .app-icon { width: 19px; height: 19px; flex: 0 0 19px; }
.account-signature-confirm p { display: grid; gap: 3px; margin: 0; }
.account-signature-confirm strong { font-size: 11px; }
.account-signature-confirm span { color: #7f6670; font-size: 9px; line-height: 1.45; }
.account-signature-confirm footer { display: flex; justify-content: flex-end; gap: 8px; }
.account-signature-confirm footer button { min-height: 37px; padding: 8px 12px; border: 1px solid #dfcdd1; border-radius: 8px; color: #756268; background: #fff; font: inherit; font-size: 8px; font-weight: 900; cursor: pointer; }
.account-signature-confirm footer button:last-child { border-color: #c6475c; color: #fff; background: #c6475c; }
.account-signature-dialog > article > footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 24px; border-top: 1px solid #dce2e7; background: #fff; }
.account-signature-dialog > article > footer small { display: inline-flex; align-items: center; gap: 7px; color: #788697; font-size: 10px; }
.account-signature-dialog > article > footer small .app-icon { width: 16px; height: 16px; color: #526172; }
.account-signature-dialog > article > footer > button { min-height: 40px; padding: 9px 18px; border: 1px solid #cbd6df; border-radius: 9px; color: #59697b; background: #fff; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }

.account-settings-dialog { width: min(900px,calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; overflow: hidden; border: 0; border-radius: 20px; color: #2e4250; background: #f4fbfa; box-shadow: 0 28px 80px rgba(19,74,70,.34); }
.account-settings-dialog::backdrop { background: rgba(17,45,48,.66); backdrop-filter: blur(4px); }
.account-settings-dialog > article { display: grid; max-height: calc(100vh - 28px); grid-template-rows: auto minmax(0,1fr) auto; }
.account-settings-dialog > article > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; border-bottom: 1px solid #d2e6e2; background: #fff; }
.account-settings-dialog > article > header > div { display: flex; align-items: center; gap: 13px; }
.account-settings-dialog > article > header > div > span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg,#168c83,#2caf9e); box-shadow: 0 7px 17px rgba(22,140,131,.24); }
.account-settings-dialog > article > header .app-icon { width: 22px; height: 22px; }
.account-settings-dialog > article > header p, .account-settings-dialog > article > header h2 { margin: 0; }
.account-settings-dialog > article > header p { color: #188277; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.account-settings-dialog > article > header h2 { color: #293e4d; font-size: 24px; }
.account-settings-dialog > article > header > button { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #d4e2e0; border-radius: 10px; color: #657487; background: #fff; cursor: pointer; }
.account-settings-body { padding: 22px 24px 28px; overflow-y: auto; }
.account-settings-status { display: grid; min-height: 220px; place-items: center; margin: 0; color: #778d91; font-size: 13px; font-weight: 750; }
#accountSettingsWorkspace { display: grid; gap: 16px; }
.account-settings-permission { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; border: 1px solid #cfe0ec; border-left: 5px solid #4f83bc; border-radius: 12px; color: #35618f; background: #f3f8fd; }
.account-settings-permission > .app-icon { width: 19px; height: 19px; flex: 0 0 19px; }
.account-settings-permission p { display: grid; gap: 3px; margin: 0; }
.account-settings-permission strong { font-size: 10px; }
.account-settings-permission span { color: #637e98; font-size: 9px; line-height: 1.45; }
.account-settings-form { display: grid; gap: 16px; padding: 18px 20px; border: 1px solid #d3e5e1; border-radius: 15px; background: #fff; box-shadow: 0 8px 22px rgba(29,81,75,.05); }
.account-settings-form > header { display: flex; align-items: center; justify-content: space-between; gap: 13px; }
.account-settings-form > header p, .account-settings-form > header h3 { margin: 0; }
.account-settings-form > header p { color: #188277; font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.account-settings-form > header h3 { margin-top: 2px; color: #324655; font-size: 17px; }
.account-settings-form > header b { padding: 6px 9px; border-radius: 999px; color: #188277; background: #e7f7f3; font-size: 8px; letter-spacing: .08em; }
.account-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.account-settings-grid label { display: grid; gap: 6px; min-width: 0; color: #526674; font-size: 9px; font-weight: 850; letter-spacing: .06em; }
.account-settings-grid label.is-wide { grid-column: 1 / -1; }
.account-settings-grid label b { color: #c55365; }
.account-settings-grid input, .account-settings-duration input { min-width: 0; min-height: 43px; padding: 10px 12px; border: 1px solid #cededc; border-radius: 9px; outline: none; color: #344a58; background: #fff; font: inherit; font-size: 12px; font-weight: 700; transition: border-color .16s,box-shadow .16s; }
.account-settings-grid input:focus, .account-settings-duration input:focus { border-color: #199387; box-shadow: 0 0 0 3px rgba(25,147,135,.12); }
.account-settings-grid input[readonly] { color: #7c8a92; background: #f4f7f7; cursor: default; }
.account-settings-duration { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 16px; border: 1px solid #cce5df; border-radius: 12px; background: linear-gradient(135deg,#f2fcf9,#ecf8f6); }
.account-settings-duration > div { display: grid; gap: 3px; }
.account-settings-duration p, .account-settings-duration strong, .account-settings-duration span { margin: 0; }
.account-settings-duration p { color: #168477; font-size: 8px; font-weight: 900; letter-spacing: .11em; }
.account-settings-duration strong { color: #2f4956; font-size: 13px; }
.account-settings-duration strong b { color: #158878; }
.account-settings-duration span { color: #667c82; font-size: 9px; line-height: 1.4; }
.account-settings-duration label { display: grid; gap: 5px; width: 100px; color: #54706f; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.account-settings-duration input { width: 100%; text-align: center; }
.account-settings-whatsapp { display: grid; gap: 13px; padding: 17px 18px; border: 1px solid #d7e4e1; border-radius: 12px; background: #fbfdfd; transition: border-color .18s,background .18s; }
.account-settings-whatsapp.is-enabled { border-color: #a6dbd3; background: #f6fcfa; }
.account-settings-whatsapp > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.account-settings-whatsapp header p, .account-settings-whatsapp header h4 { margin: 0; }
.account-settings-whatsapp header p { color: #168477; font-size: 8px; font-weight: 900; letter-spacing: .11em; }
.account-settings-whatsapp header h4 { margin-top: 2px; color: #344a58; font-size: 13px; }
.account-settings-switch { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid #cbdedb; border-radius: 11px; color: #3f5d62; background: #f2f8f7; cursor: pointer; transition: .18s; }
.account-settings-switch:hover { border-color: #91cfc6; background: #edf9f6; }
.account-settings-switch > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.account-settings-switch-track { display: flex; width: 47px; height: 27px; align-items: center; padding: 3px; border-radius: 999px; background: #aeb9bd; box-shadow: inset 0 1px 2px rgba(30,53,58,.14); transition: background .18s; }
.account-settings-switch-track i { width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(36,57,61,.25); transition: transform .18s; }
.account-settings-switch > input:focus-visible + .account-settings-switch-track { outline: 3px solid rgba(25,147,135,.25); outline-offset: 3px; }
.account-settings-switch > input:checked + .account-settings-switch-track { background: #189687; }
.account-settings-switch > input:checked + .account-settings-switch-track i { transform: translateX(20px); }
.account-settings-switch > span:last-child { display: grid; gap: 3px; }
.account-settings-switch b { color: #35535a; font-size: 11px; }
.account-settings-switch small { color: #6c7e83; font-size: 8px; line-height: 1.4; }
.account-settings-whatsapp > p { margin: -3px 0 0; color: #7d8b8e; font-size: 9px; line-height: 1.45; }
.account-settings-whatsapp.is-enabled > p { color: #368276; }
.account-settings-whatsapp-modes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.account-settings-whatsapp-modes label { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 11px 12px; border: 1px solid #d6e2e0; border-radius: 9px; color: #4b666a; background: #fff; cursor: pointer; transition: .18s; }
.account-settings-whatsapp-modes input { width: 15px; height: 15px; margin: 1px 0 0; accent-color: #199387; }
.account-settings-whatsapp-modes span { display: grid; gap: 2px; }
.account-settings-whatsapp-modes b { color: #36515b; font-size: 10px; }
.account-settings-whatsapp-modes small { color: #718187; font-size: 8px; line-height: 1.35; }
.account-settings-whatsapp-modes label:has(input:disabled) { border-color: #e1e6e5; color: #98a3a5; background: #f3f5f5; cursor: not-allowed; }
.account-settings-whatsapp-modes label:has(input:disabled) b, .account-settings-whatsapp-modes label:has(input:disabled) small { color: #98a3a5; }
.account-settings-whatsapp-modes label:has(input:checked:not(:disabled)) { border-color: #80cabe; background: #eefaf7; box-shadow: 0 0 0 2px rgba(25,147,135,.08); }
.account-settings-professional { border-color: #d9dbea; background: #fdfdff; }
.account-settings-professional > header p { color: #5962a0; }
.account-settings-professional > header b { color: #5962a0; background: #eef0ff; }
.account-settings-professional > aside { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; border: 1px solid #d9e0ec; border-radius: 10px; color: #516485; background: #f4f7fc; }
.account-settings-professional > aside .app-icon { width: 17px; height: 17px; flex: 0 0 17px; }
.account-settings-professional > aside p { display: grid; gap: 2px; margin: 0; }
.account-settings-professional > aside strong { font-size: 9px; }
.account-settings-professional > aside span { color: #72809a; font-size: 8px; line-height: 1.45; }
.account-settings-password { border-color: #d9ddea; background: #fdfdff; }
.account-settings-password > header p { color: #58679a; }
.account-settings-password > header b { color: #58679a; background: #eef1fb; }
.account-settings-password > aside { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; border: 1px solid #dbe1ec; border-radius: 10px; color: #4f6283; background: #f5f7fc; }
.account-settings-password > aside .app-icon { width: 17px; height: 17px; flex: 0 0 17px; }
.account-settings-password > aside p { display: grid; gap: 2px; margin: 0; }
.account-settings-password > aside strong { font-size: 9px; }
.account-settings-password > aside span { color: #72809a; font-size: 8px; line-height: 1.45; }
.account-settings-password .account-password-count { min-height:18px; color:#72809a; font-size:12px; font-weight:700; line-height:1.45; letter-spacing:0; }
.account-settings-password .account-password-count.is-ready { color:#16855b; }
.account-settings-password .account-password-count.is-invalid { color:#b9384f; }
.account-settings-password > footer button { background: #58679a; box-shadow: 0 7px 15px rgba(70,86,135,.18); }
.account-settings-error { min-height: 14px; margin: -6px 0; color: #bf4659; font-size: 9px; font-weight: 800; text-align: center; }
.account-settings-form > footer { display: flex; align-items: center; justify-content: space-between; gap: 13px; padding-top: 2px; }
.account-settings-form > footer small { display: inline-flex; align-items: center; gap: 6px; color: #728087; font-size: 8px; line-height: 1.35; }
.account-settings-form > footer small .app-icon { width: 14px; height: 14px; color: #198e83; }
.account-settings-form > footer button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 7px; padding: 9px 13px; border: 0; border-radius: 9px; color: #fff; background: #198e83; box-shadow: 0 7px 15px rgba(25,142,131,.18); font: inherit; font-size: 9px; font-weight: 900; cursor: pointer; }
.account-settings-form > footer button:disabled { cursor: wait; opacity: .65; box-shadow: none; }
.account-settings-form > footer button .app-icon { width: 15px; height: 15px; }
.account-settings-dialog > article > footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 24px; border-top: 1px solid #d2e6e2; background: #fff; }
.account-settings-dialog > article > footer small { display: inline-flex; align-items: center; gap: 7px; color: #788697; font-size: 10px; }
.account-settings-dialog > article > footer small .app-icon { width: 16px; height: 16px; color: #188277; }
.account-settings-dialog > article > footer > button { min-height: 40px; padding: 9px 18px; border: 1px solid #cbd9d7; border-radius: 9px; color: #59697b; background: #fff; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }

.account-reminders-dialog { width: min(980px,calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; overflow: hidden; border: 0; border-radius: 20px; color: #2d394d; background: #f5faf8; box-shadow: 0 28px 80px rgba(24,71,61,.34); }
.account-reminders-dialog::backdrop { background: rgba(18,44,41,.66); backdrop-filter: blur(4px); }
.account-reminders-dialog > article { display: grid; max-height: calc(100vh - 28px); grid-template-rows: auto minmax(0,1fr) auto; }
.account-reminders-dialog > article > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; border-bottom: 1px solid #d8e7e2; background: #fff; }
.account-reminders-dialog > article > header > div { display: flex; align-items: center; gap: 13px; }
.account-reminders-dialog > article > header > div > span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg,#16a266,#35bd82); box-shadow: 0 7px 17px rgba(22,162,102,.22); }
.account-reminders-dialog > article > header .app-icon { width: 22px; height: 22px; }
.account-reminders-dialog > article > header p, .account-reminders-dialog > article > header h2 { margin: 0; }
.account-reminders-dialog > article > header p { color: #15915d; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.account-reminders-dialog > article > header h2 { color: #293e4d; font-size: 24px; }
.account-reminders-dialog > article > header > button { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #d4e2de; border-radius: 10px; color: #657487; background: #fff; cursor: pointer; }
.account-reminders-body { padding: 22px 24px 28px; overflow-y: auto; }
.account-reminders-status { display: grid; min-height: 260px; place-items: center; margin: 0; color: #748b85; font-size: 13px; font-weight: 750; }
.account-reminders-workspace { display: grid; gap: 15px; }
.account-reminders-local-note, .account-reminders-readonly { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; border: 1px solid #cde1dc; border-left: 5px solid #1b9b7f; border-radius: 12px; color: #237863; background: #f1faf7; }
.account-reminders-local-note > .app-icon, .account-reminders-readonly > .app-icon { width: 19px; height: 19px; flex: 0 0 19px; }
.account-reminders-local-note > div, .account-reminders-readonly p { display: grid; gap: 3px; margin: 0; }
.account-reminders-local-note strong, .account-reminders-readonly strong { font-size: 10px; }
.account-reminders-local-note span, .account-reminders-readonly span { color: #638078; font-size: 9px; line-height: 1.45; }
.account-reminders-readonly { border-color: #d4ddec; border-left-color: #5877aa; color: #49668f; background: #f4f7fc; }
.account-reminders-balance { display: grid; grid-template-columns: minmax(245px,1fr) auto auto; align-items: center; gap: 18px; padding: 16px 18px; border: 1px solid #dbe5e1; border-radius: 16px; background: #fff; box-shadow: 0 10px 28px rgba(31,65,57,.08); }
.account-reminders-balance-heading { display: flex !important; align-items: center; gap: 14px; }
.account-reminders-balance-heading > div { display: grid; gap: 4px; }
.account-reminders-balance-icon { display: grid; width: 53px; height: 53px; flex: 0 0 53px; place-items: center; border-radius: 17px; color: #fff; background: #25d366; box-shadow: 0 9px 18px rgba(37,211,102,.24); }
.account-reminders-balance-icon .app-icon { width: 28px; height: 28px; }
.account-reminders-balance p, .account-reminders-balance strong, .account-reminders-balance span { margin: 0; }
.account-reminders-balance p { color: #168950; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.account-reminders-balance strong { color: #21394a; font-size: 14px; }
.account-reminders-balance strong b { color: #12a957; font-size: 25px; }
.account-reminders-balance-heading span:not(.account-reminders-balance-icon) { max-width: 380px; color: #6b7d85; font-size: 9px; line-height: 1.4; }
.account-reminders-balance dl { display: grid; grid-template-columns: repeat(3,auto); gap: 8px; margin: 0; }
.account-reminders-balance dl div { display: grid; min-width: 104px; gap: 3px; padding: 10px 12px; border: 1px solid #e5ece9; border-radius: 12px; background: #f7fbf9; }
.account-reminders-balance dl div:nth-child(2) { background: #f4f8ff; }
.account-reminders-balance dl div:nth-child(3) { background: #fff9eb; }
.account-reminders-balance dt { color: #71828a; font-size: 8px; font-weight: 850; }
.account-reminders-balance dd { margin: 0; color: #253e4f; font-size: 11px; font-weight: 900; }
.account-reminders-balance > button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 8px; padding: 10px 15px; border: 0; border-radius: 12px; color: #fff; background: #1dbd62; box-shadow: 0 9px 18px rgba(29,189,98,.22); font: inherit; font-size: 10px; font-weight: 900; cursor: pointer; }
.account-reminders-balance > button:disabled { color: #98a6a1; background: #e4eae8; box-shadow: none; cursor: not-allowed; }
.account-reminders-balance > button .app-icon { width: 15px; height: 15px; }
#accountRemindersForm { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.account-reminder-channel { display: grid; align-content: start; gap: 13px; padding: 18px; border: 1px solid #d4e2df; border-radius: 15px; background: #fff; box-shadow: 0 8px 22px rgba(29,81,75,.05); transition: border-color .18s,background .18s; }
.account-reminder-channel.is-enabled { border-color: #9fd8c4; background: #fbfffd; box-shadow: 0 8px 24px rgba(22,143,91,.08); }
.account-reminder-channel.is-unavailable { border-color: #dfe5e3; background: #f7f9f8; }
.account-reminder-channel > header { display: flex; align-items: flex-start; gap: 11px; }
.account-reminder-channel > header > span { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 10px; color: #397cc0; background: #edf5fd; }
.account-reminder-channel.is-whatsapp > header > span { color: #0da75e; background: #eaf9f1; }
.account-reminder-channel > header > span .app-icon { width: 19px; height: 19px; }
.account-reminder-channel > header > div { min-width: 0; }
.account-reminder-channel header p, .account-reminder-channel header h3, .account-reminder-channel header small { margin: 0; }
.account-reminder-channel header p { display: flex; align-items: center; gap: 5px; color: #397cc0; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.account-reminder-channel.is-whatsapp header p { color: #0d9657; }
.account-reminder-channel header h3 { margin-top: 2px; color: #314858; font-size: 15px; }
.account-reminder-channel header small { display: block; margin-top: 3px; color: #78878a; font-size: 8px; line-height: 1.4; }
.account-reminder-crown { width: 14px; height: 14px; color: #f2b928; filter: drop-shadow(0 2px 2px rgba(194,139,7,.18)); }
.account-reminder-master { display: grid; grid-template-columns: 46px minmax(0,1fr); align-items: center; gap: 11px; padding: 12px 13px; border: 1px solid #d4e2df; border-radius: 11px; background: #f5f8f7; cursor: pointer; transition: .18s; }
.account-reminder-master > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.account-reminder-switch { display: flex; width: 45px; height: 26px; align-items: center; padding: 3px; border-radius: 999px; background: #aeb9b6; box-shadow: inset 0 1px 2px rgba(30,53,48,.14); transition: background .18s; }
.account-reminder-switch i { width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(36,57,51,.25); transition: transform .18s; }
.account-reminder-master > input:focus-visible + .account-reminder-switch { outline: 3px solid rgba(25,147,107,.25); outline-offset: 3px; }
.account-reminder-master > input:checked + .account-reminder-switch { background: #159b66; }
.account-reminder-master > input:checked + .account-reminder-switch i { transform: translateX(19px); }
.account-reminder-master > span:last-child { display: grid; gap: 2px; }
.account-reminder-master b { color: #36534a; font-size: 10px; }
.account-reminder-master small { color: #71827c; font-size: 8px; line-height: 1.35; }
.account-reminder-master:has(input:disabled) { color: #99a5a1; background: #eef1f0; cursor: not-allowed; }
.account-reminder-master:has(input:disabled) b, .account-reminder-master:has(input:disabled) small { color: #99a5a1; }
.account-reminder-channel-note { min-height: 25px; margin: -4px 2px 0; color: #6b7f79; font-size: 8px; line-height: 1.45; }
.account-reminder-options { display: grid; gap: 8px; }
.account-reminder-options label { display: flex; align-items: flex-start; gap: 9px; min-width: 0; padding: 11px 12px; border: 1px solid #d9e4e1; border-radius: 10px; background: #fff; cursor: pointer; transition: .18s; }
.account-reminder-options input { width: 16px; height: 16px; flex: 0 0 16px; margin: 1px 0 0; accent-color: #159b66; }
.account-reminder-options span { display: grid; min-width: 0; grid-template-columns: 18px 1fr; align-items: center; gap: 1px 5px; }
.account-reminder-options .app-icon { width: 15px; height: 15px; color: #4a84b9; }
.account-reminder-options b { color: #3d535b; font-size: 9px; }
.account-reminder-options small { grid-column: 2; color: #758489; font-size: 8px; line-height: 1.35; }
.account-reminder-options label:has(input:checked:not(:disabled)) { border-color: #8ed0b7; background: #f1fbf7; box-shadow: 0 0 0 2px rgba(21,155,102,.06); }
.account-reminder-options label:has(input:disabled) { border-color: #e1e6e4; background: #f1f4f3; cursor: not-allowed; }
.account-reminder-options label:has(input:disabled) b, .account-reminder-options label:has(input:disabled) small, .account-reminder-options label:has(input:disabled) .app-icon { color: #9aa6a2; }
.account-reminders-error { grid-column: 1/-1; min-height: 14px; margin: -4px 0; color: #bf4659; font-size: 9px; font-weight: 800; text-align: center; }
#accountRemindersForm > footer { display: flex; grid-column: 1/-1; align-items: center; justify-content: space-between; gap: 13px; padding: 4px 2px 0; }
#accountRemindersForm > footer small { display: inline-flex; align-items: center; gap: 6px; color: #72827c; font-size: 8px; }
#accountRemindersForm > footer small .app-icon { width: 14px; height: 14px; color: #178e61; }
#accountRemindersForm > footer button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 7px; padding: 10px 15px; border: 0; border-radius: 9px; color: #fff; background: #159b66; box-shadow: 0 7px 15px rgba(21,155,102,.18); font: inherit; font-size: 9px; font-weight: 900; cursor: pointer; }
#accountRemindersForm > footer button:disabled { cursor: not-allowed; opacity: .58; box-shadow: none; }
#accountRemindersForm > footer button .app-icon { width: 15px; height: 15px; }
.account-reminder-queue { display: grid; gap: 13px; padding: 18px; border: 1px solid #d5e2e8; border-radius: 15px; background: #fff; box-shadow: 0 8px 22px rgba(40,75,98,.05); }
.account-reminder-queue > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.account-reminder-queue > header p, .account-reminder-queue > header h3, .account-reminder-queue > header small { margin: 0; }
.account-reminder-queue > header p { color: #2676ae; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.account-reminder-queue > header h3 { margin-top: 2px; color: #30495a; font-size: 16px; }
.account-reminder-queue > header small { display: block; margin-top: 3px; color: #74858e; font-size: 8px; }
.account-reminder-queue > header nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.account-reminder-queue > header button { display: inline-flex; min-height: 39px; align-items: center; justify-content: center; gap: 7px; padding: 9px 13px; border: 1px solid #8bb9d8; border-radius: 9px; color: #246e9f; background: #f2f8fc; font: inherit; font-size: 8px; font-weight: 900; cursor: pointer; }
.account-reminder-queue > header #dispatchAccountReminders { color: #fff; border-color: #168c69; background: #168c69; }
.account-reminder-queue > header button:disabled { color: #99a7ad !important; border-color: #dde4e7 !important; background: #f1f3f4 !important; cursor: not-allowed; }
.account-reminder-queue > header button .app-icon { width: 14px; height: 14px; }
.account-reminder-dispatcher { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid #bfe0d3; border-radius: 10px; background: #f2fbf7; }
.account-reminder-dispatcher > span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; color: #fff; background: #19966d; }
.account-reminder-dispatcher > span .app-icon { width: 15px; height: 15px; }
.account-reminder-dispatcher p { display: grid; gap: 2px; margin: 0; }
.account-reminder-dispatcher strong { color: #276852; font-size: 9px; }
.account-reminder-dispatcher small { color: #638075; font-size: 8px; line-height: 1.4; }
.account-reminder-dispatcher a { padding: 7px 9px; border: 1px solid #8fcab4; border-radius: 8px; color: #187453; background: #fff; font-size: 7px; font-weight: 900; text-decoration: none; }
.account-reminder-queue > aside { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; border: 1px solid #f0dfae; border-left: 4px solid #e7ad27; border-radius: 10px; color: #76591a; background: #fffaf0; }
.account-reminder-queue > aside .app-icon { width: 17px; height: 17px; flex: 0 0 17px; color: #d99b14; }
.account-reminder-queue > aside p { display: grid; gap: 2px; margin: 0; }
.account-reminder-queue > aside strong { font-size: 9px; }
.account-reminder-queue > aside span { color: #806e4d; font-size: 8px; line-height: 1.45; }
.account-reminder-queue-counts { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; margin: 0; }
.account-reminder-queue-counts div { display: grid; gap: 2px; padding: 9px 10px; border: 1px solid #dce6ea; border-radius: 9px; background: #f7fafb; }
.account-reminder-queue-counts dt { color: #748792; font-size: 7px; font-weight: 850; }
.account-reminder-queue-counts dd { margin: 0; color: #304b5c; font-size: 15px; font-weight: 900; }
.account-reminder-queue-status { min-height: 12px; margin: 0; color: #687d88; font-size: 8px; font-weight: 750; text-align: center; }
.account-reminder-job-list { display: grid; gap: 8px; }
.account-reminder-job { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px 13px; border: 1px solid #dce5e9; border-radius: 11px; background: #fbfcfd; }
.account-reminder-job > div { display: grid; min-width: 0; gap: 4px; }
.account-reminder-job header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.account-reminder-job header strong { overflow: hidden; color: #314958; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.account-reminder-job header span { padding: 3px 6px; border-radius: 999px; color: #356f99; background: #eaf4fb; font-size: 7px; font-weight: 900; }
.account-reminder-job header span.is-whatsapp { color: #13794b; background: #e8f8ef; }
.account-reminder-job p { margin: 0; color: #71818a; font-size: 8px; line-height: 1.4; }
.account-reminder-job small { color: #8a7074; font-size: 7px; font-weight: 750; }
.account-reminder-job > footer { display: flex; gap: 6px; }
.account-reminder-job > footer button { min-height: 34px; padding: 7px 9px; border: 1px solid #d0dbe0; border-radius: 8px; color: #687a84; background: #fff; font: inherit; font-size: 7px; font-weight: 900; cursor: pointer; }
.account-reminder-job > footer button[data-reminder-result="DELIVERED"] { color: #147b50; border-color: #8bcab0; background: #f1fbf6; }
.account-reminder-job > footer button:disabled { opacity: .5; cursor: not-allowed; }
.account-reminder-job.is-delivered { border-color: #b9ddca; background: #f7fcf9; }
.account-reminder-job.is-failed { border-color: #edc6cc; background: #fff9fa; }
.account-reminder-job.is-processing { border-color: #a9cfdf; background: #f2f9fc; }
.account-reminder-job.is-cancelled, .account-reminder-job.is-skipped { opacity: .72; }
.account-reminder-job-empty { margin: 0; padding: 22px; border: 1px dashed #cad8de; border-radius: 10px; color: #788a93; background: #fafcfd; font-size: 9px; text-align: center; }
.account-reminders-dialog > article > footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 24px; border-top: 1px solid #d8e7e2; background: #fff; }
.account-reminders-dialog > article > footer small { display: inline-flex; align-items: center; gap: 7px; color: #788697; font-size: 9px; }
.account-reminders-dialog > article > footer small .app-icon { width: 16px; height: 16px; color: #159b66; }
.account-reminders-dialog > article > footer > button { min-height: 40px; padding: 9px 18px; border: 1px solid #cbd6e0; border-radius: 9px; color: #59697b; background: #fff; font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; }

.message-pack-dialog { width: min(980px,calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; overflow: hidden; border: 0; border-radius: 20px; color: #2d394d; background: #f7f9fc; box-shadow: 0 28px 80px rgba(28,43,62,.3); }
.message-pack-dialog::backdrop { background: rgba(22,34,48,.64); backdrop-filter: blur(3px); }
.message-pack-dialog > article { display: grid; max-height: calc(100vh - 28px); grid-template-rows: auto minmax(0,1fr) auto; }
.message-pack-dialog > article > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; border-bottom: 1px solid #dce5ee; background: #fff; }
.message-pack-dialog > article > header > div { display: flex; align-items: center; gap: 13px; }
.message-pack-dialog > article > header > div > span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; color: #10a862; background: #eaf9f1; }
.message-pack-dialog > article > header .app-icon { width: 21px; height: 21px; }
.message-pack-dialog > article > header p, .message-pack-dialog > article > header h2 { margin: 0; }
.message-pack-dialog > article > header p { color: #10a862; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.message-pack-dialog > article > header h2 { color: #26384f; font-size: 24px; }
.message-pack-dialog > article > header > button { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #dbe4ed; border-radius: 10px; color: #657487; background: #fff; cursor: pointer; }
.message-pack-body { display: grid; gap: 20px; padding: 22px 24px 28px; overflow-y: auto; }
.message-pack-intro { display: grid; gap: 13px; padding: 19px 21px; border: 0; border-radius: 18px; color: #fff; background: #172f68; box-shadow: 0 13px 28px rgba(24,49,108,.20); }
.message-pack-intro > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.message-pack-intro-tags strong, .message-pack-intro-tags b { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 999px; font-size: 14px; font-weight: 900; }
.message-pack-intro-tags strong { color: #fff; background: #20bd69; box-shadow: 0 7px 16px rgba(32,189,105,.25); }
.message-pack-intro-tags strong .app-icon { width: 19px; height: 19px; }
.message-pack-intro-tags b { border: 1px solid #a9cef5; color: #124e93; background: #e9f4ff; }
.message-pack-intro p { display: flex; align-items: center; gap: 10px; margin: 0; color: rgba(255,255,255,.88); font-size: 15px; line-height: 1.5; }
.message-pack-intro p > .app-icon { width: 20px; height: 20px; flex: 0 0 20px; color: #75eab0; }
.message-pack-intro p strong { display: inline-flex; padding: 3px 10px; border-radius: 999px; color: #fff; background: #7858dd; font-size: 14px; }
.message-pack-status { display: grid; min-height: 180px; place-items: center; margin: 0; color: #758496; font-size: 13px; font-weight: 750; }
.message-pack-catalog { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.message-pack-card { position: relative; display: grid; gap: 18px; min-width: 0; padding: 21px; border: 1px solid #dde6f0; border-radius: 18px; background: #fff; box-shadow: 0 10px 25px rgba(39,55,75,.08); }
.message-pack-card.is-recommended { border: 2px solid #2278ff; background: #f3f6ff; box-shadow: 0 15px 32px rgba(34,120,255,.20); transform: translateY(-5px); }
.message-pack-card > em { position: absolute; top: 15px; right: 15px; padding: 7px 10px; border-radius: 999px; color: #fff; background: #2278ff; font-size: 9px; font-style: normal; font-weight: 900; letter-spacing: .05em; }
.message-pack-card > header { display: flex; align-items: center; gap: 12px; min-width: 0; }
.message-pack-card.is-recommended > header { padding-right: 103px; }
.message-pack-card > header > div { display: grid; gap: 3px; min-width: 0; }
.message-pack-symbol { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; border-radius: 15px; color: #fff; background: #25d366; box-shadow: 0 8px 17px rgba(37,211,102,.22); }
.message-pack-symbol .app-icon { width: 24px; height: 24px; }
.message-pack-card.is-recommended .message-pack-symbol { background: #2278ff; box-shadow: 0 8px 17px rgba(34,120,255,.22); }
.message-pack-card h3 { margin: 0; color: #1c314d; font-size: 21px; line-height: 1.08; }
.message-pack-card header small { color: #667893; font-size: 8px; font-weight: 900; letter-spacing: .09em; }
.message-pack-card header span:not(.message-pack-symbol) { color: #6d7a8c; font-size: 11px; }
.message-pack-price { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; gap: 10px; padding: 15px 0 0 !important; border-top: 1px solid #e4eaf1 !important; }
.message-pack-price > div { display: grid; align-content: center; gap: 4px; min-width: 0; padding: 11px 12px; border-radius: 12px; }
.message-pack-total { border: 1px solid #d7e5fa; background: #f1f6ff; }
.message-pack-monthly { border: 1px solid #f3d375; background: #fff5cf; }
.message-pack-price small { color: #77879d; font-size: 9px; font-weight: 900; letter-spacing: .09em; }
.message-pack-price strong { overflow-wrap: anywhere; color: #163d77; font-size: 25px; line-height: 1.05; }
.message-pack-monthly small { color: #8a650b; }
.message-pack-monthly strong { color: #7a5000; }
.message-pack-price > button[data-buy-catalog] { display: inline-flex; grid-column: 1/-1; min-height: 49px; align-items: center; justify-content: center; gap: 9px; padding: 11px 14px; border: 0; border-radius: 12px; color: #fff; background: #173b79; box-shadow: 0 8px 17px rgba(23,59,121,.18); font: inherit; font-size: 12px; font-weight: 900; cursor: pointer; }
.message-pack-card.is-recommended .message-pack-price > button[data-buy-catalog] { background: #2278ff; }
.message-pack-card > div > button[data-buy-catalog]:disabled { cursor: wait; opacity: .6; }
.message-pack-card .app-icon { width: 16px; height: 16px; }
.message-pack-validity { display: inline-flex; align-items: center; gap: 6px; margin: -4px 0 0; color: #5f7187; font-size: 10px; font-weight: 800; }
.message-pack-validity .app-icon { width: 14px; height: 14px; color: #2278ff; }
.message-pack-card.is-custom { grid-column: 1/-1; grid-template-columns: minmax(230px,1fr) auto minmax(300px,1.15fr); align-items: center; border-color: #d9dff1; background: #fbfcff; }
.message-pack-card.is-custom > header { padding: 0; }
.message-pack-card.is-custom .message-pack-symbol { color: #fff; background: #7858d7; box-shadow: 0 8px 17px rgba(120,88,215,.18); }
.message-pack-card.is-custom .message-pack-price { padding: 0 0 0 18px !important; border-top: 0 !important; border-left: 1px solid #e1e5f0; }
.message-pack-no-expiry { display: inline-flex; width: fit-content; margin-top: 3px; padding: 6px 10px; border-radius: 999px; color: #fff; background: #7858d7; font-size: 10px; font-weight: 900; letter-spacing: .06em; }
.message-pack-forever { border: 1px solid #d9cbff; background: #f3eeff; }
.message-pack-forever small { color: #7359b5; }
.message-pack-forever strong { color: #6040ad; font-size: 17px; }
.message-custom-controls { display: grid; grid-template-columns: 54px 98px 54px; align-items: center; justify-content: center; gap: 10px; }
.message-custom-controls button { display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid #bda9e9; border-radius: 50%; color: #7258cf; background: #fff; cursor: pointer; }
.message-custom-controls input { display: block; box-sizing: border-box; width: 98px; height: 54px; margin: 0; padding: 0 10px; border: 1px solid #cfd7e3; border-radius: 12px; color: #26384f; background: #fff; font: inherit; font-size: 20px; font-weight: 900; line-height: normal; text-align: center; vertical-align: middle; appearance: textfield; }
.message-custom-controls > span { grid-column: 1/-1; color: #68788c; font-size: 11px; font-weight: 750; text-align: center; }
.message-custom-rules {
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  margin-top: 2px;
}
.message-custom-rules > span {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid #ddd2f5;
  border-radius: 11px;
  background: #f5f1ff;
  text-align: center;
}
.message-custom-rules small { color: #745bad; font-size: 9px; font-weight: 900; letter-spacing: .06em; }
.message-custom-rules strong { color: #4e3786; font-size: 13px !important; line-height: 1.2; }
.message-pack-card .message-custom-rules strong {
  color: #4e3786;
  font-size: 13px !important;
  line-height: 1.25;
  white-space: nowrap;
}
.message-payment-simulator { display: grid; gap: 13px; padding: 19px; border: 1px solid #d7c8ef; border-left: 5px solid #7555c5; border-radius: 14px; background: #faf8ff; }
.message-payment-simulator > header, .message-order-history > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.message-payment-simulator h3, .message-payment-simulator p, .message-order-history h3, .message-order-history p { margin: 0; }
.message-payment-simulator header p, .message-order-history header p { color: #8065c4; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.message-payment-simulator h3, .message-order-history h3 { color: #303c50; font-size: 17px; }
.message-payment-simulator header > strong { padding: 6px 9px; border-radius: 999px; color: #795cbd; background: #eee8fb; font-size: 10px; }
.message-payment-simulator[data-status="APPROVED"] header > strong { color: #09864a; background: #e4f8ed; }
.message-payment-simulator[data-status="REJECTED"] header > strong { color: #c53d51; background: #ffe9ed; }
.message-payment-simulator > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 10px; background: #fff; }
.message-payment-simulator > div span { color: #556377; font-size: 12px; font-weight: 750; }
.message-payment-simulator > div b { color: #6545b5; font-size: 18px; }
.message-payment-simulator > p { color: #7b718d; font-size: 11px; line-height: 1.55; }
.message-payment-simulator > footer { display: flex; justify-content: flex-end; gap: 9px; }
.message-payment-simulator > footer button { min-height: 40px; padding: 9px 13px; border: 1px solid #d7cde9; border-radius: 9px; color: #7058a8; background: #fff; font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; }
.message-payment-simulator > footer button:last-child { display: inline-flex; align-items: center; gap: 7px; border-color: #11af65; color: #fff; background: #11af65; }
.message-payment-simulator > footer button:disabled { cursor: not-allowed; opacity: .55; }
.message-payment-simulator > footer .app-icon { width: 15px; height: 15px; }
.message-order-history { display: grid; gap: 10px; padding-top: 4px; }
.message-order-history > header > span { color: #8a97a6; font-size: 10px; }
.message-order-history > p { padding: 16px; border: 1px dashed #d9e1e9; border-radius: 10px; color: #8a96a4; font-size: 11px; text-align: center; }
#messageOrderHistory { display: grid; gap: 7px; }
#messageOrderHistory > article { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 13px; border: 1px solid #e0e6ec; border-radius: 10px; background: #fff; }
#messageOrderHistory > article > div { display: grid; gap: 3px; }
#messageOrderHistory > article > div:last-child { justify-items: end; text-align: right; }
#messageOrderHistory strong, #messageOrderHistory b { color: #3a4658; font-size: 12px; }
#messageOrderHistory small { color: #84909e; font-size: 9px; }
#messageOrderHistory span { padding: 3px 7px; border-radius: 999px; color: #856a27; background: #fff5d9; font-size: 8px; font-weight: 900; }
#messageOrderHistory article[data-status="APPROVED"] span { color: #087d46; background: #e3f7ec; }
#messageOrderHistory article[data-status="REJECTED"] span { color: #b63b4d; background: #ffe8ec; }
.message-pack-dialog > article > footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 24px; border-top: 1px solid #dce5ee; background: #fff; }
.message-pack-dialog > article > footer small { display: inline-flex; align-items: center; gap: 7px; color: #788697; font-size: 10px; }
.message-pack-dialog > article > footer small .app-icon { width: 16px; height: 16px; color: #12985c; }
.message-pack-dialog > article > footer > button { min-height: 40px; padding: 9px 18px; border: 1px solid #cbd6e0; border-radius: 9px; color: #59697b; background: #fff; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }

.subscription-dialog { width: min(980px,calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; overflow: hidden; border: 0; border-radius: 20px; color: #2d394d; background: #f6f7fc; box-shadow: 0 28px 80px rgba(28,37,77,.34); }
.subscription-dialog::backdrop { background: rgba(24,30,60,.66); backdrop-filter: blur(4px); }
.subscription-dialog > article { display: grid; max-height: calc(100vh - 28px); grid-template-rows: auto minmax(0,1fr) auto; }
.subscription-dialog > article > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; border-bottom: 1px solid #dcdff0; background: #fff; }
.subscription-dialog > article > header > div { display: flex; align-items: center; gap: 13px; }
.subscription-dialog > article > header p, .subscription-dialog > article > header h2 { margin: 0; }
.subscription-dialog > article > header p { color: #6257c8; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.subscription-dialog > article > header h2 { color: #29364c; font-size: 24px; }
.subscription-crown { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; background: linear-gradient(135deg,#5c59cf,#7d6de3); box-shadow: 0 7px 17px rgba(92,89,207,.22); }
.subscription-crown .app-icon, .subscription-tier-options .is-premium .app-icon { width: 23px; height: 23px; color: #f3b329; }
.subscription-dialog > article > header > button { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #dbe0ec; border-radius: 10px; color: #657487; background: #fff; cursor: pointer; }
.subscription-dialog > article > header > button .app-icon { width: 19px; height: 19px; }
.subscription-body { padding: 22px 24px 28px; overflow-y: auto; }
.subscription-status { display: grid; min-height: 220px; place-items: center; margin: 0; color: #778398; font-size: 13px; font-weight: 750; }
#subscriptionWorkspace { display: grid; gap: 18px; }
.subscription-current { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 19px; border: 1px solid #d8dbf1; border-radius: 14px; background: linear-gradient(135deg,#fff,#f3f2ff); }
.subscription-current > div { display: grid; gap: 3px; }
.subscription-current small { color: #8177c8; font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.subscription-current strong { color: #433b99; font-size: 18px; }
.subscription-current span { color: #768096; font-size: 11px; }
.subscription-current dl { display: grid; grid-template-columns: repeat(2,minmax(100px,1fr)); margin: 0; overflow: hidden; border: 1px solid #dedff0; border-radius: 10px; background: rgba(255,255,255,.84); }
.subscription-current dl div { display: grid; gap: 2px; padding: 10px 14px; }
.subscription-current dl div + div { border-left: 1px solid #dedff0; }
.subscription-current dt { color: #8b91a4; font-size: 8px; font-weight: 850; text-transform: uppercase; }
.subscription-current dd { margin: 0; color: #374157; font-size: 16px; font-weight: 900; }
#subscriptionOrderForm { display: grid; gap: 14px; }
.subscription-step { display: grid; gap: 13px; padding: 17px 19px; border: 1px solid #e0e4ec; border-radius: 14px; background: #fff; box-shadow: 0 7px 18px rgba(36,49,71,.045); }
.subscription-step > header { display: flex; align-items: center; gap: 10px; }
.subscription-step > header > span { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 50%; color: #fff; background: #675ac8; font-size: 11px; font-weight: 900; }
.subscription-step > header > div { display: grid; gap: 1px; }
.subscription-step > header strong { color: #354056; font-size: 13px; }
.subscription-step > header small { color: #8590a0; font-size: 10px; }
.subscription-tier-options, .subscription-period-options, .subscription-license-options { display: grid; gap: 10px; }
.subscription-tier-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
.subscription-period-options, .subscription-license-options { grid-template-columns: repeat(3,minmax(0,1fr)); }
.subscription-tier-options label, .subscription-period-options label, .subscription-license-options label { min-width: 0; cursor: pointer; }
.subscription-tier-options input, .subscription-period-options input, .subscription-license-options input { position: absolute; opacity: 0; pointer-events: none; }
.subscription-tier-options label > span, .subscription-period-options label > span, .subscription-license-options label > span { display: grid; height: 100%; border: 1px solid #dce1e9; border-radius: 11px; color: #657286; background: #fafbfd; transition: 140ms ease; }
.subscription-tier-options label > span { grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 0 10px; padding: 13px 15px; }
.subscription-tier-options .app-icon { width: 22px; height: 22px; grid-row: 1/3; color: #5968b9; }
.subscription-tier-options b { color: #344057; font-size: 14px; }
.subscription-tier-options small { font-size: 9px; }
.subscription-period-options label > span { gap: 3px; padding: 13px; text-align: center; }
.subscription-period-options b { color: #354157; font-size: 15px; }
.subscription-period-options small { font-size: 9px; }
.subscription-license-options label > span { grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 2px 9px; padding: 13px; }
.subscription-license-options b { display: grid; width: 34px; height: 34px; grid-row: 1/3; place-items: center; border-radius: 9px; color: #675ac8; background: #eeecfb; font-size: 17px; }
.subscription-license-options strong { color: #3e495d; font-size: 11px; }
.subscription-license-options small { color: #118a5b; font-size: 9px; font-weight: 750; }
.subscription-tier-options input:checked + span, .subscription-period-options input:checked + span, .subscription-license-options input:checked + span { border-color: #7467d0; background: #f4f2ff; box-shadow: 0 0 0 2px rgba(103,90,200,.12); }
.subscription-tier-options input:disabled + span, .subscription-license-options input:disabled + span { cursor: not-allowed; opacity: .48; filter: grayscale(.3); }
#subscriptionTierRestriction { margin: 0; padding: 10px 12px; border-radius: 9px; color: #8a681b; background: #fff7df; font-size: 10px; line-height: 1.5; }
.subscription-manual-quote { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px dashed #d7c7eb; border-radius: 10px; color: #7157a7; background: #fbf8ff; }
.subscription-manual-quote .app-icon { width: 19px; height: 19px; flex: 0 0 19px; }
.subscription-manual-quote div { display: grid; gap: 2px; }
.subscription-manual-quote strong { font-size: 10px; }
.subscription-manual-quote small { color: #837792; font-size: 9px; }
.subscription-price-summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border: 1px solid #cbdde9; border-left: 5px solid #2784c4; border-radius: 14px; background: #f4fbff; }
.subscription-price-summary > div { display: grid; gap: 2px; }
.subscription-price-summary small { color: #2675a8; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.subscription-price-summary strong { color: #235d88; font-size: 24px; }
.subscription-price-summary span { color: #6f8090; font-size: 10px; }
.subscription-price-summary button { display: inline-flex; min-height: 46px; align-items: center; gap: 8px; padding: 11px 17px; border: 0; border-radius: 10px; color: #fff; background: #2784c4; box-shadow: 0 7px 15px rgba(39,132,196,.2); font: inherit; font-size: 10px; font-weight: 900; cursor: pointer; }
.subscription-price-summary button .app-icon { width: 16px; height: 16px; }
.subscription-price-summary button:disabled { cursor: not-allowed; opacity: .5; }
.subscription-form-note { margin: -5px 2px 0; color: #83909e; font-size: 9px; text-align: center; }
.subscription-payment-simulator { display: grid; gap: 13px; padding: 19px; border: 1px solid #d7c8ef; border-left: 5px solid #7555c5; border-radius: 14px; background: #faf8ff; }
.subscription-payment-simulator > header, .subscription-order-history > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.subscription-payment-simulator h3, .subscription-payment-simulator p, .subscription-order-history h3, .subscription-order-history p { margin: 0; }
.subscription-payment-simulator header p, .subscription-order-history header p { color: #8065c4; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.subscription-payment-simulator h3, .subscription-order-history h3 { color: #303c50; font-size: 17px; }
.subscription-payment-simulator header > strong { padding: 6px 9px; border-radius: 999px; color: #795cbd; background: #eee8fb; font-size: 10px; }
.subscription-payment-simulator[data-status="APPROVED"] header > strong { color: #09864a; background: #e4f8ed; }
.subscription-payment-simulator[data-status="REJECTED"] header > strong { color: #c53d51; background: #ffe9ed; }
.subscription-payment-simulator > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 10px; background: #fff; }
.subscription-payment-simulator > div span { color: #556377; font-size: 12px; font-weight: 750; }
.subscription-payment-simulator > div b { color: #6545b5; font-size: 18px; }
.subscription-payment-simulator > p { color: #7b718d; font-size: 11px; line-height: 1.55; }
.subscription-payment-simulator > footer { display: flex; justify-content: flex-end; gap: 9px; }
.subscription-payment-simulator > footer button { min-height: 40px; padding: 9px 13px; border: 1px solid #d7cde9; border-radius: 9px; color: #7058a8; background: #fff; font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; }
.subscription-payment-simulator > footer button:last-child { display: inline-flex; align-items: center; gap: 7px; border-color: #11af65; color: #fff; background: #11af65; }
.subscription-payment-simulator > footer button:disabled { cursor: not-allowed; opacity: .55; }
.subscription-payment-simulator > footer .app-icon { width: 15px; height: 15px; }
.subscription-order-history { display: grid; gap: 10px; padding-top: 4px; }
.subscription-order-history > header > span { color: #8a97a6; font-size: 10px; }
.subscription-order-history > p { padding: 16px; border: 1px dashed #d9e1e9; border-radius: 10px; color: #8a96a4; font-size: 11px; text-align: center; }
#subscriptionOrderHistory { display: grid; gap: 7px; }
#subscriptionOrderHistory > article { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 13px; border: 1px solid #e0e6ec; border-radius: 10px; background: #fff; }
#subscriptionOrderHistory > article > div { display: grid; gap: 3px; }
#subscriptionOrderHistory > article > div:last-child { justify-items: end; text-align: right; }
#subscriptionOrderHistory strong, #subscriptionOrderHistory b { color: #3a4658; font-size: 12px; }
#subscriptionOrderHistory small { color: #84909e; font-size: 9px; }
#subscriptionOrderHistory span { padding: 3px 7px; border-radius: 999px; color: #856a27; background: #fff5d9; font-size: 8px; font-weight: 900; }
#subscriptionOrderHistory article[data-status="APPROVED"] span { color: #087d46; background: #e3f7ec; }
#subscriptionOrderHistory article[data-status="REJECTED"] span { color: #b63b4d; background: #ffe8ec; }
.subscription-dialog > article > footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 24px; border-top: 1px solid #dcdff0; background: #fff; }
.subscription-dialog > article > footer small { display: inline-flex; align-items: center; gap: 7px; color: #788697; font-size: 10px; }
.subscription-dialog > article > footer small .app-icon { width: 16px; height: 16px; color: #675ac8; }
.subscription-dialog > article > footer > button { min-height: 40px; padding: 9px 18px; border: 1px solid #cbd6e0; border-radius: 9px; color: #59697b; background: #fff; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }

.professional-dialog { width: min(1060px,calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; overflow: hidden; border: 0; border-radius: 20px; color: #2d394d; background: #f7f7fc; box-shadow: 0 28px 80px rgba(37,30,76,.34); container-type: inline-size; }
.professional-dialog::backdrop { background: rgba(26,28,58,.66); backdrop-filter: blur(4px); }
.professional-dialog > article { display: grid; max-height: calc(100vh - 28px); grid-template-rows: auto minmax(0,1fr) auto; }
.professional-dialog > article > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; border-bottom: 1px solid #dfdeef; background: #fff; }
.professional-dialog > article > header > div { display: flex; align-items: center; gap: 13px; }
.professional-dialog > article > header > div > span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg,#6850c8,#8c62dc); box-shadow: 0 7px 17px rgba(104,80,200,.22); }
.professional-dialog > article > header .app-icon { width: 22px; height: 22px; }
.professional-dialog > article > header p, .professional-dialog > article > header h2 { margin: 0; }
.professional-dialog > article > header p { color: #7056c0; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.professional-dialog > article > header h2 { color: #29364c; font-size: 24px; }
.professional-dialog > article > header > button { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #dbe0ec; border-radius: 10px; color: #657487; background: #fff; cursor: pointer; }
.professional-body { padding: 22px 24px 28px; overflow-y: auto; }
.professional-status { display: grid; min-height: 220px; place-items: center; margin: 0; color: #778398; font-size: 13px; font-weight: 750; }
#professionalWorkspace { display: grid; gap: 18px; }
.professional-capacity { display: grid; grid-template-columns: minmax(220px,1fr) auto auto; align-items: center; gap: 18px; padding: 18px 20px; border: 1px solid #d9d7ef; border-radius: 14px; background: linear-gradient(135deg,#fff,#f3f1ff); }
.professional-capacity > div { display: grid; gap: 3px; }
.professional-capacity small { color: #7966c3; font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.professional-capacity strong { color: #433b99; font-size: 17px; }
.professional-capacity span { color: #7b8495; font-size: 9px; }
.professional-capacity dl { display: grid; grid-template-columns: repeat(3,minmax(82px,1fr)); margin: 0; overflow: hidden; border: 1px solid #dfdfee; border-radius: 10px; background: rgba(255,255,255,.88); }
.professional-capacity dl div { display: grid; gap: 2px; padding: 10px 13px; }
.professional-capacity dl div + div { border-left: 1px solid #dfdfee; }
.professional-capacity dt { color: #8b91a4; font-size: 7px; font-weight: 850; text-transform: uppercase; }
.professional-capacity dd { margin: 0; color: #39445a; font-size: 16px; font-weight: 900; }
.professional-capacity > button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 7px; padding: 10px 14px; border: 0; border-radius: 10px; color: #fff; background: #6e55c8; box-shadow: 0 7px 16px rgba(110,85,200,.2); font: inherit; font-size: 10px; font-weight: 900; cursor: pointer; }
.professional-capacity > button:disabled { color: #8b879b; background: #e5e3eb; box-shadow: none; cursor: not-allowed; }
.professional-capacity > button .app-icon { width: 16px; height: 16px; }
.professional-editor { overflow: hidden; border: 1px solid #d4c9ec; border-radius: 15px; background: #fff; box-shadow: 0 11px 25px rgba(78,57,133,.09); }
.professional-editor > header { display: flex; align-items: center; justify-content: space-between; padding: 15px 19px; color: #fff; background: linear-gradient(110deg,#6850c8,#8b5fd6); }
.professional-editor > header p, .professional-editor > header h3 { margin: 0; }
.professional-editor > header p { font-size: 8px; font-weight: 900; letter-spacing: .13em; opacity: .82; }
.professional-editor > header h3 { margin-top: 2px; font-size: 17px; }
.professional-editor > header button { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.16); cursor: pointer; }
.professional-editor > header .app-icon { width: 17px; height: 17px; }
#professionalForm { display: grid; gap: 16px; padding: 20px; }
.professional-form-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.professional-form-grid label { display: grid; gap: 6px; min-width: 0; }
.professional-form-grid label > span { color: #4a5568; font-size: 10px; font-weight: 800; }
.professional-form-grid label b { color: #d93f5b; }
.professional-form-grid input, .professional-form-grid select { width: 100%; min-height: 43px; padding: 9px 11px; border: 1px solid #d8dce6; border-radius: 9px; outline: 0; color: #364255; background: #fff; font: inherit; font-size: 11px; font-weight: 650; }
.professional-form-grid input:focus, .professional-form-grid select:focus { border-color: #7960cd; box-shadow: 0 0 0 3px rgba(121,96,205,.13); }
#professionalForm > aside { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid #cce4d9; border-radius: 10px; color: #257453; background: #f1faf6; }
#professionalForm > aside .app-icon { width: 18px; height: 18px; flex: 0 0 18px; }
#professionalForm > aside p { display: grid; gap: 2px; margin: 0; }
#professionalForm > aside strong { font-size: 10px; }
#professionalForm > aside span { color: #657e72; font-size: 9px; }
#professionalFormError { min-height: 16px; margin: -5px 0 0; color: #c63d55; font-size: 10px; font-weight: 750; }
#professionalForm > footer { display: flex; justify-content: flex-end; gap: 9px; }
#professionalForm > footer button { min-height: 42px; padding: 9px 15px; border: 1px solid #d4d9e2; border-radius: 9px; color: #657286; background: #fff; font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; }
#professionalForm > footer button:last-child { display: inline-flex; align-items: center; gap: 7px; border-color: #6e55c8; color: #fff; background: #6e55c8; }
#professionalForm > footer .app-icon { width: 15px; height: 15px; }
.professional-confirm { display: grid; gap: 14px; padding: 17px 19px; border: 1px solid #efd393; border-left: 5px solid #dfa324; border-radius: 12px; background: #fff9e9; }
.professional-confirm > div { display: flex; align-items: flex-start; gap: 11px; color: #795d1f; }
.professional-confirm > div > .app-icon { width: 20px; height: 20px; flex: 0 0 20px; }
.professional-confirm p { display: grid; gap: 3px; margin: 0; }
.professional-confirm strong { font-size: 12px; }
.professional-confirm span { color: #806f47; font-size: 10px; line-height: 1.5; }
.professional-confirm footer { display: flex; justify-content: flex-end; gap: 8px; }
.professional-confirm footer button { min-height: 38px; padding: 8px 13px; border: 1px solid #dfcfaa; border-radius: 8px; color: #796633; background: #fff; font: inherit; font-size: 9px; font-weight: 850; cursor: pointer; }
.professional-confirm footer button:last-child { border-color: #6e55c8; color: #fff; background: #6e55c8; }
.professional-confirm footer button.is-danger { border-color: #cf4359; background: #cf4359; }
.professional-directory { display: grid; gap: 12px; }
.professional-directory > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 3px 2px; }
.professional-directory > header p, .professional-directory > header h3 { margin: 0; }
.professional-directory > header p { color: #765bc5; font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.professional-directory > header h3 { color: #303c50; font-size: 17px; }
.professional-directory > header > span { color: #8a96a5; font-size: 10px; }
#professionalList { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
#professionalList > article { display: grid; gap: 12px; min-width: 0; padding: 16px; border: 1px solid #dfe3eb; border-left: 4px solid #36a878; border-radius: 13px; background: #fff; box-shadow: 0 7px 18px rgba(39,53,72,.05); }
#professionalList > article[data-status="INVITED"] { border-left-color: #d39b28; }
#professionalList > article[data-status="INACTIVE"] { border-left-color: #9ba4b1; background: #f8f9fb; }
#professionalList article > header { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 10px; }
#professionalList article > header > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: #6650b9; background: #eeeafd; font-size: 11px; font-weight: 900; }
#professionalList article > header > div { display: grid; gap: 2px; min-width: 0; }
#professionalList article > header strong { overflow: hidden; color: #364155; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
#professionalList article > header small { overflow: hidden; color: #84909d; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
#professionalList article > header em { padding: 5px 7px; border-radius: 999px; color: #1c7955; background: #e8f8ef; font-size: 7px; font-style: normal; font-weight: 900; }
#professionalList article[data-status="INVITED"] > header em { color: #8a6719; background: #fff4d7; }
#professionalList article[data-status="INACTIVE"] > header em { color: #687382; background: #e9edf1; }
#professionalList dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; overflow: hidden; border: 1px solid #e5e8ee; border-radius: 9px; background: #fafbfd; }
#professionalList dl div { display: grid; gap: 2px; min-width: 0; padding: 8px 10px; }
#professionalList dl div + div { border-left: 1px solid #e5e8ee; }
#professionalList dt { color: #929aa7; font-size: 7px; font-weight: 850; text-transform: uppercase; }
#professionalList dd { overflow: hidden; margin: 0; color: #4a5669; font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
#professionalList article > small { color: #8a7580; font-size: 8px; }
#professionalList article > footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
#professionalList article > footer button { display: inline-flex; min-height: 34px; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid #d9d3ec; border-radius: 8px; color: #6e57ae; background: #fff; font: inherit; font-size: 8px; font-weight: 850; cursor: pointer; }
#professionalList article > footer button.is-danger { border-color: #efcbd2; color: #bd3e54; }
#professionalList article > footer button.is-success { border-color: #bfe2d1; color: #18835a; }
#professionalList article > footer button:disabled { opacity: .5; cursor: wait; }
#professionalList article > footer .app-icon { width: 13px; height: 13px; }
.professional-dialog > article > footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 24px; border-top: 1px solid #dfdeef; background: #fff; }
.professional-dialog > article > footer small { display: inline-flex; align-items: center; gap: 7px; color: #788697; font-size: 10px; }
.professional-dialog > article > footer small .app-icon { width: 16px; height: 16px; color: #675ac8; }
.professional-dialog > article > footer > button { min-height: 40px; padding: 9px 18px; border: 1px solid #cbd6e0; border-radius: 9px; color: #59697b; background: #fff; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }

.account-availability-dialog { width: min(1100px,calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; overflow: hidden; border: 0; border-radius: 20px; color: #2d394d; background: #f6f8fc; box-shadow: 0 28px 80px rgba(22,42,82,.34); }
.account-availability-dialog::backdrop { background: rgba(20,31,57,.66); backdrop-filter: blur(4px); }
.account-availability-dialog > article { display: grid; max-height: calc(100vh - 28px); grid-template-rows: auto minmax(0,1fr) auto; }
.account-availability-dialog > article > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; border-bottom: 1px solid #dce3ef; background: #fff; }
.account-availability-dialog > article > header > div { display: flex; align-items: center; gap: 13px; }
.account-availability-dialog > article > header > div > span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg,#435dc7,#6479df); box-shadow: 0 7px 17px rgba(67,93,199,.25); }
.account-availability-dialog > article > header .app-icon { width: 22px; height: 22px; }
.account-availability-dialog > article > header p, .account-availability-dialog > article > header h2 { margin: 0; }
.account-availability-dialog > article > header p { color: #526bc9; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.account-availability-dialog > article > header h2 { color: #29364c; font-size: 24px; }
.account-availability-dialog > article > header > button { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #dbe0ec; border-radius: 10px; color: #657487; background: #fff; cursor: pointer; }
.account-availability-body { padding: 22px 24px 28px; overflow-y: auto; }
.account-availability-status { display: grid; min-height: 220px; place-items: center; margin: 0; color: #778398; font-size: 13px; font-weight: 750; }
#accountAvailabilityWorkspace { display: grid; gap: 17px; }
.account-availability-toolbar { display: grid; grid-template-columns: minmax(240px,1fr) auto auto; align-items: end; gap: 15px; padding: 17px 19px; border: 1px solid #d7dfef; border-radius: 14px; background: linear-gradient(135deg,#fff,#f0f3ff); }
.account-availability-toolbar > label { display: grid; gap: 6px; }
.account-availability-toolbar > label > span { color: #526bc9; font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.account-availability-toolbar select { width: 100%; min-height: 43px; padding: 9px 34px 9px 12px; border: 1px solid #d3dbea; border-radius: 9px; outline: 0; color: #334158; background: #fff; font: inherit; font-size: 11px; font-weight: 750; }
.account-availability-toolbar select:focus { border-color: #5a71d4; box-shadow: 0 0 0 3px rgba(90,113,212,.13); }
.account-availability-toolbar dl { display: grid; grid-template-columns: repeat(3,minmax(78px,1fr)); margin: 0; overflow: hidden; border: 1px solid #dbe1ed; border-radius: 10px; background: rgba(255,255,255,.9); }
.account-availability-toolbar dl div { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 9px 12px; }
.account-availability-toolbar dl div + div { border-left: 1px solid #dbe1ed; }
.account-availability-toolbar dt { color: #8a94a6; font-size: 7px; font-weight: 850; text-transform: uppercase; }
.account-availability-toolbar dd { margin: 0; color: #37445a; font-size: 15px; font-weight: 900; }
.account-availability-toolbar > button { display: inline-flex; min-height: 43px; align-items: center; justify-content: center; gap: 7px; padding: 10px 14px; border: 0; border-radius: 10px; color: #fff; background: #5069cf; box-shadow: 0 7px 16px rgba(80,105,207,.22); font: inherit; font-size: 10px; font-weight: 900; cursor: pointer; }
.account-availability-toolbar > button:disabled { color: #8d95a4; background: #e1e5ec; box-shadow: none; cursor: not-allowed; }
.account-availability-toolbar > button .app-icon { width: 15px; height: 15px; }
.account-availability-integrity { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid #edd79c; border-left: 4px solid #d6a22d; border-radius: 10px; color: #7a5e1f; background: #fff9e9; }
.account-availability-integrity > .app-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.account-availability-integrity p { display: grid; gap: 2px; margin: 0; }
.account-availability-integrity strong { font-size: 10px; }
.account-availability-integrity span { color: #806f47; font-size: 9px; line-height: 1.45; }
.account-availability-editor { overflow: hidden; border: 1px solid #cbd6f0; border-radius: 15px; background: #fff; box-shadow: 0 11px 25px rgba(40,67,140,.09); }
.account-availability-editor > header { display: flex; align-items: center; justify-content: space-between; padding: 15px 19px; color: #fff; background: linear-gradient(110deg,#435dc7,#687ee1); }
.account-availability-editor > header p, .account-availability-editor > header h3 { margin: 0; }
.account-availability-editor > header p { font-size: 8px; font-weight: 900; letter-spacing: .13em; opacity: .82; }
.account-availability-editor > header h3 { margin-top: 2px; font-size: 17px; }
.account-availability-editor > header button { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.16); cursor: pointer; }
.account-availability-editor > header .app-icon { width: 17px; height: 17px; }
#accountAvailabilityForm { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(260px,.7fr); gap: 16px 20px; padding: 20px; }
#accountAvailabilityDayFields { min-width: 0; margin: 0; padding: 0; border: 0; }
#accountAvailabilityDayFields legend { margin-bottom: 8px; color: #4a566b; font-size: 10px; font-weight: 850; }
#accountAvailabilityDayFields legend b, .account-availability-ranges-header b, .account-availability-time-grid label b { color: #d03f59; }
#accountAvailabilityDayFields > div { display: grid; width: 100%; grid-template-columns: repeat(7,minmax(0,1fr)); align-items: start; gap: 6px; }
#accountAvailabilityDayFields label { min-width: 0; cursor: pointer; }
#accountAvailabilityDayFields input { position: absolute; opacity: 0; pointer-events: none; }
#accountAvailabilityDayFields label span { display: grid; height: 42px; min-height: 42px; place-items: center; overflow: hidden; border: 1px solid #d7deea; border-radius: 9px; color: #667286; background: #fff; font-size: 10px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
#accountAvailabilityDayFields input:checked + span { border-color: #5069cf; color: #fff; background: #5069cf; box-shadow: 0 5px 12px rgba(80,105,207,.2); }
#accountAvailabilityDayFields input:disabled + span { opacity: .58; cursor: not-allowed; }
#accountAvailabilityDayFields input:checked:disabled + span { opacity: 1; }
#accountAvailabilityDayFields > small { display: block; margin-top: 7px; color: #8791a0; font-size: 8px; }
.account-availability-ranges { display: grid; align-content: start; gap: 9px; }
.account-availability-ranges-header { display: grid; gap: 3px; color: #4a566b; font-size: 10px; font-weight: 850; }
.account-availability-ranges-header small { color: #8791a0; font-size: 8px; font-weight: 650; }
#accountAvailabilityIntervalsEditor { display: grid; gap: 9px; }
.account-availability-time-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)) auto; gap: 10px; align-items: end; }
.account-availability-time-grid label { display: grid; gap: 6px; }
.account-availability-time-grid label span { color: #4a566b; font-size: 10px; font-weight: 850; }
.account-availability-time-grid input { width: 100%; min-height: 43px; padding: 9px 11px; border: 1px solid #d5dce8; border-radius: 9px; outline: 0; color: #364255; background: #fff; font: inherit; font-size: 11px; font-weight: 750; }
.account-availability-time-grid input:focus { border-color: #5a71d4; box-shadow: 0 0 0 3px rgba(90,113,212,.13); }
.account-availability-time-grid button { display: grid; width: 43px; min-height: 43px; place-items: center; border: 1px solid #efd2d7; border-radius: 9px; color: #c55264; background: #fff8f9; cursor: pointer; }
.account-availability-time-grid button .app-icon { width: 15px; height: 15px; }
#addAvailabilityRange { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; color: #5069cf; background: transparent; font: inherit; font-size: 9px; font-weight: 900; cursor: pointer; }
#addAvailabilityRange .app-icon { width: 14px; height: 14px; }
#accountAvailabilityForm > aside { display: flex; grid-column: 1/-1; align-items: flex-start; gap: 10px; padding: 11px 13px; border: 1px solid #c9e0ed; border-radius: 10px; color: #306b88; background: #f1f9fc; }
#accountAvailabilityForm > aside .app-icon { width: 18px; height: 18px; flex: 0 0 18px; }
#accountAvailabilityForm > aside p { display: grid; gap: 2px; margin: 0; }
#accountAvailabilityForm > aside strong { font-size: 10px; }
#accountAvailabilityForm > aside span { color: #66808d; font-size: 9px; }
#accountAvailabilityFormError { min-height: 15px; grid-column: 1/-1; margin: -5px 0 0; color: #c63d55; font-size: 10px; font-weight: 750; }
#accountAvailabilityForm > footer { display: flex; grid-column: 1/-1; justify-content: flex-end; gap: 9px; }
#accountAvailabilityForm > footer button { min-height: 41px; padding: 9px 15px; border: 1px solid #d3dae5; border-radius: 9px; color: #647184; background: #fff; font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; }
#accountAvailabilityForm > footer button:last-child { display: inline-flex; align-items: center; gap: 7px; border-color: #5069cf; color: #fff; background: #5069cf; }
#accountAvailabilityForm > footer .app-icon { width: 15px; height: 15px; }
.account-availability-confirm { display: grid; gap: 14px; padding: 17px 19px; border: 1px solid #efd393; border-left: 5px solid #dfa324; border-radius: 12px; background: #fff9e9; }
.account-availability-confirm > div { display: flex; align-items: flex-start; gap: 11px; color: #795d1f; }
.account-availability-confirm > div > .app-icon { width: 20px; height: 20px; flex: 0 0 20px; }
.account-availability-confirm p { display: grid; gap: 3px; margin: 0; }
.account-availability-confirm strong { font-size: 12px; }
.account-availability-confirm span { color: #806f47; font-size: 10px; line-height: 1.5; }
.account-availability-confirm footer { display: flex; justify-content: flex-end; gap: 8px; }
.account-availability-confirm footer button { min-height: 38px; padding: 8px 13px; border: 1px solid #dfcfaa; border-radius: 8px; color: #796633; background: #fff; font: inherit; font-size: 9px; font-weight: 850; cursor: pointer; }
.account-availability-confirm footer button:last-child { border-color: #c64a5f; color: #fff; background: #c64a5f; }
.account-availability-week { display: grid; gap: 10px; }
.account-availability-week > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 2px; }
.account-availability-week > header p, .account-availability-week > header h3 { margin: 0; }
.account-availability-week > header p { color: #526bc9; font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.account-availability-week > header h3 { color: #303c50; font-size: 17px; }
.account-availability-week > header > span { color: #8a96a5; font-size: 9px; }
#accountAvailabilityWeek { overflow: hidden; border: 1px solid #dce2eb; border-radius: 13px; background: #fff; }
#accountAvailabilityWeek > article { display: grid; grid-template-columns: 145px minmax(0,1fr); min-height: 66px; }
#accountAvailabilityWeek > article + article { border-top: 1px solid #e5e9ef; }
#accountAvailabilityWeek > article > header { display: grid; align-content: center; gap: 2px; padding: 13px 16px; border-right: 1px solid #e5e9ef; background: #f8faff; }
#accountAvailabilityWeek > article > header strong { color: #39465a; font-size: 11px; }
#accountAvailabilityWeek > article > header small { color: #929cab; font-size: 8px; }
#accountAvailabilityWeek > article.is-legacy-day > header { background: #fff8e8; }
#accountAvailabilityWeek > article.is-legacy-day > header strong { color: #8a651c; }
#accountAvailabilityWeek > article > section { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; }
.account-availability-interval { display: flex; min-height: 42px; align-items: center; gap: 5px; overflow: hidden; border: 1px solid #cbd8f1; border-radius: 10px; background: #f7f9ff; }
.account-availability-interval > span { display: inline-flex; align-items: center; gap: 5px; padding: 7px 4px 7px 10px; color: #4059b7; }
.account-availability-interval > span b { font-size: 10px; }
.account-availability-interval > span i { color: #9aa7c0; font-size: 9px; font-style: normal; }
.account-availability-interval > span em { display: inline-flex; align-items: center; gap: 3px; margin-left: 3px; padding: 4px 5px; border-radius: 999px; color: #8b6515; background: #fff0c9; font-size: 6px; font-style: normal; font-weight: 900; }
.account-availability-interval > span em .app-icon { width: 9px; height: 9px; }
.account-availability-interval > div { display: flex; align-self: stretch; border-left: 1px solid #d9e1f0; }
.account-availability-interval button { display: grid; width: 34px; place-items: center; border: 0; color: #60729a; background: #fff; cursor: pointer; }
.account-availability-interval button + button { border-left: 1px solid #e2e7ef; color: #bd5365; }
.account-availability-interval button:hover { background: #eef3ff; }
.account-availability-interval button .app-icon { width: 13px; height: 13px; }
.account-availability-interval.has-issue { border-color: #e5c77b; background: #fffbf0; }
.account-availability-closed { color: #a0a8b4; font-size: 10px; font-weight: 700; }
.account-availability-dialog > article > footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 24px; border-top: 1px solid #dce3ef; background: #fff; }
.account-availability-dialog > article > footer small { display: inline-flex; align-items: center; gap: 7px; color: #788697; font-size: 10px; }
.account-availability-dialog > article > footer small .app-icon { width: 16px; height: 16px; color: #5069cf; }
.account-availability-dialog > article > footer > button { min-height: 40px; padding: 9px 18px; border: 1px solid #cbd6e0; border-radius: 9px; color: #59697b; background: #fff; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }

.treatment-values-dialog { width: min(1120px, calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; overflow: hidden; border: 1px solid #cbd5e1; border-radius: 18px; color: #1e293b; background: #f8fafc; box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22); }
.treatment-values-dialog::backdrop { background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(4px); }
.treatment-values-dialog > article { display: grid; max-height: calc(100vh - 28px); grid-template-rows: auto minmax(0, 1fr) auto; }
.treatment-values-dialog > article > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 24px; border-bottom: 1px solid #e2e8f0; background: #ffffff; }
.treatment-values-dialog > article > header > div { display: flex; align-items: center; gap: 14px; }
.treatment-values-dialog > article > header > div > span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; color: #ffffff; background: linear-gradient(135deg, #4f46e5, #4338ca); box-shadow: 0 6px 16px rgba(79, 70, 229, 0.25); }
.treatment-values-dialog > article > header .app-icon { width: 22px; height: 22px; }
.treatment-values-dialog > article > header p { margin: 0; color: #4f46e5; font-size: 11px !important; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.treatment-values-dialog > article > header h2 { margin: 2px 0 0 0; color: #0f172a; font-size: 22px !important; font-weight: 750; }
.treatment-values-dialog > article > header > button { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #e2e8f0; border-radius: 8px; color: #64748b; background: #ffffff; cursor: pointer; transition: all .15s ease; }
.treatment-values-dialog > article > header > button:hover { background: #f1f5f9; color: #0f172a; }
.treatment-values-dialog > article > header > button .app-icon { width: 18px; height: 18px; }

.treatment-values-body { overflow: auto; padding: 20px 24px 28px; background: #f8fafc; }
.treatment-values-status { margin: 0; padding: 22px; border: 1px solid #cbd5e1; border-radius: 14px; color: #475569; background: #ffffff; text-align: center; font-size: 14px !important; font-weight: 600; }
#treatmentValuesWorkspace { display: grid; gap: 16px; }

.treatment-values-toolbar { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(360px, 1.2fr); gap: 20px; padding: 18px 22px; border: 1.5px solid #cbd5e1; border-radius: 14px; background: #ffffff; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); }
.treatment-values-toolbar > label { display: grid; gap: 8px; }
.treatment-values-toolbar > label > span, .treatment-values-filters label > span { color: #475569; font-size: 11px !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.treatment-values-toolbar select, .treatment-values-filters input, .treatment-values-filters select, #treatmentValueBulkForm input, #treatmentValueBulkForm select, #treatmentValueForm input { width: 100%; min-height: 42px; border: 1.5px solid #cbd5e1; border-radius: 9px; color: #0f172a; background: #ffffff; font: inherit; font-size: 13.5px !important; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.treatment-values-toolbar select:focus, .treatment-values-filters input:focus, .treatment-values-filters select:focus, #treatmentValueBulkForm input:focus, #treatmentValueBulkForm select:focus, #treatmentValueForm input:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15); }
.treatment-values-toolbar select, .treatment-values-filters select, #treatmentValueBulkForm select { padding: 8px 12px; }
.treatment-values-filters input, #treatmentValueBulkForm input, #treatmentValueForm input { padding: 8px 12px; }

.treatment-values-toolbar dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: 1px solid #cbd5e1; border-radius: 12px; background: #ffffff; overflow: hidden; }
.treatment-values-toolbar dl div { display: grid; align-content: center; justify-items: center; gap: 2px; padding: 10px 12px; text-align: center; }
.treatment-values-toolbar dl div + div { border-left: 1px solid #cbd5e1; }
.treatment-values-toolbar dt { color: #475569; font-size: 11px !important; font-weight: 750; text-transform: uppercase; letter-spacing: .03em; }
.treatment-values-toolbar dd { margin: 0; color: #312e81; font-size: 22px !important; font-weight: 850; line-height: 1.1; }

.treatment-values-integrity { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border: 1.5px solid #fde68a; border-radius: 12px; color: #92400e; background: #fffdf5; }
.treatment-values-integrity .app-icon { width: 18px; height: 18px; flex: 0 0 auto; color: #d97706; }
.treatment-values-integrity p { display: grid; gap: 2px; margin: 0; }
.treatment-values-integrity strong { font-size: 12px !important; font-weight: 800; }
.treatment-values-integrity span { font-size: 12px !important; line-height: 1.45; }

.treatment-values-dialog .smart-select-value.is-placeholder { color: #344156; font-weight: 800; }
.treatment-values-toolbar > label > span, .treatment-values-filters label > span { color: #475569; font-size: 11px !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.treatment-values-filters { display: grid; grid-template-columns: minmax(170px, .9fr) minmax(210px, 1.4fr) minmax(120px, .7fr) auto auto; align-items: end; gap: 12px; padding: 16px 20px; border: 1.5px solid #cbd5e1; border-radius: 14px; background: #ffffff; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); }
.treatment-values-filters label, #treatmentValueBulkForm label, #treatmentValueForm label { display: grid; gap: 6px; }
.treatment-values-filters > button, #treatmentValueBulkForm > button { min-height: 42px; padding: 8px 18px; border: 0; border-radius: 9px; color: #ffffff; background: #4f46e5; font: inherit; font-size: 12px !important; font-weight: 800; letter-spacing: .04em; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25); transition: all .15s ease; }
.treatment-values-filters > button:hover, #treatmentValueBulkForm > button:hover { background: #4338ca; }
.treatment-values-filters > button .app-icon, #treatmentValueBulkForm > button .app-icon { width: 14px; height: 14px; }
#clearTreatmentValueFilters { color: #475569; background: #ffffff; border: 1.5px solid #cbd5e1; border-radius: 9px; min-height: 42px; padding: 8px 16px; font: inherit; font-size: 12px !important; font-weight: 750; cursor: pointer; transition: all .15s ease; }
#clearTreatmentValueFilters:hover { background: #f1f5f9; color: #0f172a; border-color: #94a3b8; }

.treatment-values-bulk { display: grid; gap: 14px; padding: 16px 20px; border: 1.5px solid #4338ca; border-radius: 14px; background: linear-gradient(135deg, #1e1b4b, #312e81); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04); color: #ffffff; transition: all .2s ease; }
.treatment-values-bulk > header { display: flex; align-items: center; gap: 14px; width: 100%; }
.treatment-values-bulk.is-collapsible > header { cursor: pointer; user-select: none; }
.treatment-premium-crown { display: grid; width: 40px; height: 40px; place-items: center; flex: 0 0 auto; border-radius: 11px; color: #ffffff; background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25); }
.treatment-premium-crown .app-icon { width: 20px; height: 20px; }
.treatment-values-bulk > header > div { flex: 1; min-width: 0; }
.treatment-values-bulk > header p { margin: 0; color: #a5b4fc; font-size: 10px !important; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.treatment-values-bulk > header h3 { margin: 2px 0 0 0; color: #ffffff; font-size: 15px !important; font-weight: 750; }
.treatment-values-bulk > header small { display: block; margin-top: 2px; color: #cbd5e1; font-size: 12px !important; line-height: 1.35; }
.treatment-bulk-toggle-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.14); color: #ffffff; font: inherit; font-size: 12px !important; font-weight: 750; cursor: pointer; transition: all .18s ease; flex-shrink: 0; }
.treatment-bulk-toggle-btn:hover { background: rgba(255, 255, 255, 0.24); transform: translateY(-1px); }
.treatment-bulk-toggle-btn .app-icon { width: 14px; height: 14px; transition: transform .2s ease; }
.treatment-values-bulk.is-open .treatment-bulk-toggle-btn .app-icon { transform: rotate(180deg); }
.treatment-bulk-form-wrap { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.15); animation: tv-slide-down .2s ease; }
#treatmentValueBulkForm { display: grid; grid-template-columns: minmax(140px, .8fr) minmax(120px, .6fr) minmax(180px, 1fr) auto; align-items: end; gap: 12px; }
#treatmentValueBulkForm label > span { color: #f8fafc !important; font-size: 11px !important; font-weight: 750; letter-spacing: .04em; }
.percentage-input { display: grid; grid-template-columns: 1fr 38px; overflow: hidden; border: 1.5px solid #cbd5e1; border-radius: 9px; background: #ffffff; }
.percentage-input:focus-within { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15); }
.percentage-input input { min-width: 0; border: 0 !important; border-radius: 0 !important; outline: 0; box-shadow: none !important; color: #0f172a; font-size: 14px !important; }
.percentage-input b { display: grid; place-items: center; color: #4338ca; background: #eef2ff; font-size: 14px !important; font-weight: 800; }
#treatmentValueBulkForm > button { min-height: 42px; padding: 8px 18px; border: 0; border-radius: 9px; background: linear-gradient(135deg, #6366f1, #4f46e5); color: #ffffff; font: inherit; font-size: 12px !important; font-weight: 800; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: all .15s ease; }
#treatmentValueBulkForm > button:hover { opacity: .92; transform: translateY(-1px); }
#treatmentValueBulkForm > button .app-icon { width: 14px; height: 14px; }
#treatmentValueBulkRestriction { margin: 0; color: #cbd5e1; font-size: 12px !important; font-weight: 750; }

.treatment-value-confirm { display: grid; gap: 12px; padding: 14px 18px; border: 1.5px solid #fde68a; border-radius: 13px; background: #fffdf5; }
.treatment-value-confirm > div { display: flex; gap: 12px; align-items: center; }
.treatment-value-confirm > div > .app-icon { width: 20px; height: 20px; color: #d97706; flex-shrink: 0; }
.treatment-value-confirm p { display: grid; gap: 2px; margin: 0; }
.treatment-value-confirm strong { font-size: 13px !important; font-weight: 800; color: #92400e; }
.treatment-value-confirm span { color: #78350f; font-size: 12px !important; line-height: 1.45; }
.treatment-value-confirm footer { display: flex; justify-content: flex-end; gap: 8px; }
.treatment-value-confirm button { min-height: 38px; padding: 8px 16px; border: 1.5px solid #cbd5e1; border-radius: 8px; color: #334155; background: #ffffff; font: inherit; font-size: 12px !important; font-weight: 750; cursor: pointer; }
#applyTreatmentValueBulk { color: #ffffff; border: 0; background: #4f46e5; }
#applyTreatmentValueBulk:hover { background: #4338ca; }

.treatment-value-editor { border: 1.5px solid #3b82f6; border-radius: 14px; background: #ffffff; box-shadow: 0 10px 25px rgba(37, 99, 235, 0.08); overflow: hidden; }
.treatment-value-editor > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #dbeafe; background: #eff6ff; }
.treatment-value-editor > header p { margin: 0; color: #2563eb; font-size: 10px !important; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.treatment-value-editor > header h3 { margin: 2px 0 0 0; font-size: 15px !important; font-weight: 750; color: #0f172a; }
.treatment-value-editor > header small { display: block; margin-top: 2px; color: #64748b; font-size: 12px !important; }
.treatment-value-editor > header > button { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #cbd5e1; border-radius: 8px; color: #64748b; background: #ffffff; cursor: pointer; }
.treatment-value-editor > header > button .app-icon { width: 15px; height: 15px; }
#treatmentValueForm { display: grid; grid-template-columns: minmax(220px, 320px) 1fr auto; align-items: end; gap: 14px; padding: 16px 20px; }
#treatmentValueForm .money-input { display: grid; grid-template-columns: 42px 1fr; overflow: hidden; border: 1.5px solid #cbd5e1; border-radius: 9px; background: #ffffff; }
#treatmentValueForm .money-input:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
#treatmentValueForm .money-input > span { display: grid; place-items: center; color: #1d4ed8; background: #eff6ff; font-weight: 800; font-size: 16px !important; }
#treatmentValueForm .money-input input { border: 0; border-radius: 0; font-size: 18px !important; font-weight: 700; color: #0f172a; }
#treatmentValueFormError { margin: 0; color: #be3d4b; font-size: 12px !important; font-weight: 600; }
.treatment-value-editor footer { display: flex; justify-content: flex-end; gap: 8px; }
.treatment-value-editor footer button { min-height: 42px; padding: 8px 18px; border-radius: 9px; font: inherit; font-size: 12.5px !important; font-weight: 750; cursor: pointer; }
#cancelTreatmentValueEdit { border: 1.5px solid #cbd5e1; background: #ffffff; color: #475569; }
#saveTreatmentValue { border: 0; background: #2563eb; color: #ffffff; display: inline-flex; align-items: center; gap: 6px; }
#saveTreatmentValue:hover { background: #1d4ed8; }
#saveTreatmentValue .app-icon { width: 14px; height: 14px; }

.treatment-values-directory { overflow: hidden; border: 1px solid #cbd5e1; border-radius: 16px; background: #ffffff; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04); }
.treatment-values-directory > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid #e2e8f0; background: #ffffff; }
.treatment-values-directory > header p { margin: 0; color: #4f46e5; font-size: 10px !important; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.treatment-values-directory > header h3 { margin: 2px 0 0 0; font-size: 16px !important; font-weight: 750; color: #0f172a; }
.treatment-values-directory > header > span { color: #64748b; font-size: 12px !important; }

#treatmentValueList { display: grid; gap: 12px; padding: 16px; background: #f8fafc; }
#treatmentValueList > article { display: grid; grid-template-columns: minmax(300px, 1.8fr) minmax(200px, 1.1fr) minmax(130px, auto); align-items: center; gap: 18px; padding: 16px 20px; background: #ffffff; border: 1.5px solid #e2e8f0; border-radius: 12px; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03); transition: all .18s ease; }
#treatmentValueList > article:hover { border-color: #818cf8; box-shadow: 0 8px 20px rgba(79, 70, 229, 0.08); transform: translateY(-1px); }
#treatmentValueList > article.has-duplicate { background: #fffdf5; }

.tv-item-left { display: flex; flex-direction: column; gap: 6px; }
.tv-item-title-wrap { display: flex; align-items: center; gap: 10px; }
.tv-code-pill { font-size: 12px !important; font-weight: 850; padding: 4px 8px; border-radius: 6px; background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; letter-spacing: .02em; flex-shrink: 0; }
.tv-item-name { margin: 0; font-size: 15px !important; font-weight: 750; color: #0f172a; }
.tv-item-meta-wrap { display: flex; align-items: center; gap: 10px; }
.tv-category-tag { font-size: 11px !important; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: #065f46; background: #ecfdf5; border: 1px solid #a7f3d0; padding: 2px 8px; border-radius: 5px; }
.tv-item-date { font-size: 12px !important; color: #64748b; display: inline-flex; align-items: center; gap: 5px; }
.tv-item-date .app-icon { width: 13px; height: 13px; color: #6366f1; }
.tv-item-date.is-empty { color: #94a3b8; }
.tv-item-date.is-empty .app-icon { color: #94a3b8; }

.tv-item-center { display: flex; align-items: center; justify-content: center; }
.tv-price-box { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 10px 20px; min-width: 150px; text-align: center; }
.tv-price-tag-label { font-size: 10px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .06em !important; color: #6366f1 !important; line-height: 1 !important; margin-bottom: 4px !important; }
.tv-price-amount { font-size: 26px !important; font-weight: 900 !important; color: #1e1b4b !important; line-height: 1.1 !important; letter-spacing: -.02em !important; }
.tv-price-empty { font-size: 13px !important; font-weight: 600 !important; color: #94a3b8 !important; padding: 6px 0 !important; }

.tv-item-right { display: flex; justify-content: flex-end; }
.tv-btn-action { min-height: 40px; padding: 8px 18px; border: 0; border-radius: 9px; background: #4f46e5; color: #ffffff; font: inherit; font-size: 12.5px !important; font-weight: 750; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; transition: all .15s ease; box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25); white-space: nowrap; }
.tv-btn-action:hover { background: #4338ca; box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35); }
.tv-btn-action .app-icon { width: 14px; height: 14px; }
.tv-btn-action.is-add { background: #2563eb; }
.tv-btn-action.is-add:hover { background: #1d4ed8; }

.tv-duplicate-alert { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: #fef3c7; color: #92400e; border: 1px solid #fde68a; font-size: 12px !important; font-weight: 600; margin-bottom: 4px; }
.tv-duplicate-alert .app-icon { width: 15px; height: 15px; color: #d97706; flex-shrink: 0; }
.tv-duplicate-entries-list { grid-column: 1 / -1; display: grid; gap: 8px; }
.tv-duplicate-entry { display: grid; grid-template-columns: minmax(280px, 1.8fr) minmax(200px, 1.2fr) minmax(150px, auto); align-items: center; gap: 20px; padding: 10px 14px; border-radius: 8px; background: #ffffff; border: 1px solid #e2e8f0; }

.treatment-values-empty { margin: 0; padding: 24px; color: #64748b; font-size: 14px !important; text-align: center; }

.treatment-values-dialog > article > footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 24px; border-top: 1px solid #e2e8f0; background: #ffffff; }
.treatment-values-dialog > article > footer small { display: inline-flex; align-items: center; gap: 8px; color: #64748b; font-size: 12px !important; }
.treatment-values-dialog > article > footer small .app-icon { width: 16px; height: 16px; color: #4f46e5; }
.treatment-values-dialog > article > footer > button { min-height: 40px; padding: 8px 22px; border: 1.5px solid #cbd5e1; border-radius: 9px; color: #334155; background: #ffffff; font: inherit; font-size: 13px !important; font-weight: 750; cursor: pointer; transition: all .15s ease; }
.treatment-values-dialog > article > footer > button:hover { background: #f1f5f9; color: #0f172a; }

@media (max-width: 920px) {
  .account-hero-card { grid-template-columns: 58px minmax(0,1fr); }
  .account-plan-mark { width: 56px; height: 56px; }
  .account-hero-card dl { grid-column: 1/-1; }
  .message-pack-catalog { grid-template-columns: 1fr; }
  .message-pack-card.is-custom { grid-column: auto; grid-template-columns: 1fr; }
  .account-reminders-balance { grid-template-columns: 1fr auto; }
  .account-reminders-balance dl { grid-column: 1/-1; grid-template-columns: repeat(3,minmax(0,1fr)); }
  #accountRemindersForm { grid-template-columns: 1fr; }
  .account-reminder-queue-counts { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .subscription-license-options { grid-template-columns: 1fr; }
  .professional-capacity { grid-template-columns: 1fr; }
  .professional-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .account-availability-toolbar { grid-template-columns: 1fr; align-items: stretch; }
  .account-availability-toolbar > button { justify-self: end; }
  #accountAvailabilityForm { grid-template-columns: 1fr; }
  .treatment-values-toolbar, .treatment-values-filters, #treatmentValueBulkForm { grid-template-columns: 1fr 1fr; }
  #treatmentValueForm { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .account-heading { grid-template-columns: 1fr; }
  .account-heading > aside { justify-items: start; }
  .account-card-grid { grid-template-columns: 1fr; }
  .subscription-current, .subscription-price-summary { align-items: stretch; flex-direction: column; }
  #professionalList { grid-template-columns: 1fr; }
  #accountAvailabilityWeek > article { grid-template-columns: 112px minmax(0,1fr); }
}

@media (max-width: 520px) {
  .account-view { padding-top: 4px; }
  .account-heading { gap: 13px; }
  .account-hero-card { grid-template-columns: 48px minmax(0,1fr); padding: 18px; }
  .account-plan-mark { width: 48px; height: 48px; border-radius: 14px; }
  .account-plan-mark .app-icon { width: 24px; height: 24px; }
  .account-hero-card h2 { font-size: 23px; }
  .account-hero-card dl { grid-template-columns: 1fr; }
  .account-reminders-dialog { width: 100vw; max-height: 100dvh; border-radius: 0; }
  .account-reminders-dialog > article { max-height: 100dvh; }
  .account-reminders-dialog > article > header, .account-reminders-body, .account-reminders-dialog > article > footer { padding-right: 15px; padding-left: 15px; }
  .account-reminders-balance { grid-template-columns: 1fr; }
  .account-reminders-balance dl { grid-template-columns: 1fr; }
  .account-reminders-balance > button { width: 100%; }
  #accountRemindersForm > footer { align-items: stretch; flex-direction: column; }
  #accountRemindersForm > footer button { width: 100%; }
  .account-reminder-queue > header, .account-reminder-job { align-items: stretch; grid-template-columns: 1fr; flex-direction: column; }
  .account-reminder-queue > header button { width: 100%; }
  .account-reminder-queue > header nav { display: grid; width: 100%; grid-template-columns: 1fr; }
  .account-reminder-dispatcher { grid-template-columns: auto minmax(0,1fr); }
  .account-reminder-dispatcher a { grid-column: 1/-1; text-align: center; }
  .account-reminder-queue-counts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .account-reminder-job > footer { display: grid; grid-template-columns: 1fr 1fr; }
  .account-reminders-dialog > article > footer small { display: none; }
  .account-hero-card dl div + div { border-top: 1px solid #dce1f5; border-left: 0; }
  .account-card { padding: 18px; }
  .patient-export-dialog { width: 100vw; max-width: none; max-height: 100dvh; border-radius: 0; }
  .patient-export-dialog > article { max-height: 100dvh; }
  .patient-export-dialog > article > header, .patient-export-body, .patient-export-dialog > article > footer { padding-right: 16px; padding-left: 16px; }
  .patient-export-dialog > article > footer small { display: none; }
  .patient-export-body { display: flex; flex-direction: column; }
  .patient-export-body > * { flex: 0 0 auto; }
  .patient-export-included > div { grid-template-columns: 1fr; }
  .account-signature-dialog { width: 100vw; max-width: none; max-height: 100dvh; border-radius: 0; }
  .account-signature-dialog > article { max-height: 100dvh; }
  .account-signature-dialog > article > header, .account-signature-body, .account-signature-dialog > article > footer { padding-right: 16px; padding-left: 16px; }
  .account-signature-dialog > article > footer small { display: none; }
  .account-signature-editor > footer { align-items: stretch; flex-direction: column-reverse; }
  .account-signature-editor > footer button { justify-content: center; }
  .message-pack-dialog { width: 100vw; max-height: 100dvh; border-radius: 0; }
  .message-pack-dialog > article { max-height: 100dvh; }
  .message-pack-dialog > article > header, .message-pack-body, .message-pack-dialog > article > footer { padding-right: 16px; padding-left: 16px; }
  .message-pack-dialog > article > footer small { display: none; }
  .message-payment-simulator > footer { display: grid; }
  #messageOrderHistory > article { align-items: flex-start; }
  .subscription-dialog { width: 100vw; max-height: 100dvh; border-radius: 0; }
  .subscription-dialog > article { max-height: 100dvh; }
  .subscription-dialog > article > header, .subscription-body, .subscription-dialog > article > footer { padding-right: 16px; padding-left: 16px; }
  .subscription-dialog > article > footer small { display: none; }
  .subscription-tier-options, .subscription-period-options { grid-template-columns: 1fr; }
  .subscription-current dl { width: 100%; }
  .subscription-price-summary button { justify-content: center; }
  .subscription-payment-simulator > footer { display: grid; }
  #subscriptionOrderHistory > article { align-items: flex-start; }
  .professional-dialog { width: 100vw; max-height: 100dvh; border-radius: 0; }
  .professional-dialog > article { max-height: 100dvh; }
  .professional-dialog > article > header, .professional-body, .professional-dialog > article > footer { padding-right: 16px; padding-left: 16px; }
  .professional-dialog > article > footer small { display: none; }
  .professional-form-grid { grid-template-columns: 1fr; }
  .professional-capacity dl { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #professionalList article > header { grid-template-columns: 38px minmax(0,1fr); }
  #professionalList article > header em { grid-column: 2; justify-self: start; }
  #professionalList dl { grid-template-columns: 1fr; }
  #professionalList dl div + div { border-top: 1px solid #e5e8ee; border-left: 0; }
  .account-availability-dialog { width: 100vw; max-height: 100dvh; border-radius: 0; }
  .account-availability-dialog > article { max-height: 100dvh; }
  .account-availability-dialog > article > header, .account-availability-body, .account-availability-dialog > article > footer { padding-right: 16px; padding-left: 16px; }
  .account-availability-dialog > article > footer small { display: none; }
  #accountAvailabilityDayFields > div { grid-template-columns: repeat(4,minmax(46px,1fr)); }
  .account-availability-time-grid { grid-template-columns: 1fr; }
  .account-availability-time-grid button { width: 100%; }
  #accountAvailabilityWeek > article { grid-template-columns: 1fr; }
  #accountAvailabilityWeek > article > header { border-right: 0; border-bottom: 1px solid #e5e9ef; }
  .account-availability-interval { width: 100%; justify-content: space-between; }
  .treatment-values-dialog { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .treatment-values-dialog > article { height: 100dvh; max-height: 100dvh; }
  .treatment-values-dialog > article > header, .treatment-values-body, .treatment-values-dialog > article > footer { padding-right: 16px; padding-left: 16px; }
  .treatment-values-toolbar, .treatment-values-filters, #treatmentValueBulkForm { grid-template-columns: 1fr; }
  .treatment-values-toolbar dl { grid-template-columns: 1fr; }
  .treatment-values-toolbar dl div + div { border-top: 1px solid #cbd5e1; border-left: 0; }
  .treatment-values-directory > header { align-items: flex-start; flex-direction: column; }
  #treatmentValueList > article, .tv-duplicate-entry { grid-template-columns: 1fr; gap: 14px; }
  .tv-item-center, .tv-item-right { justify-content: flex-start; }
}

@media print {
  body:has(#budgetPreviewDialog[open]) > *:not(#budgetPreviewDialog) { display: none !important; }
  #budgetPreviewDialog[open] { position: static; display: block; width: 100%; max-height: none; margin: 0; box-shadow: none; }
  #budgetPreviewDialog .budget-dialog-header button, #budgetPreviewDialog .budget-preview-footer { display: none !important; }
  #budgetPreviewDialog .budget-preview-body { overflow: visible; }
}
.study-delete-button { border: 0; color: #fff; background: #e63a56; }

.legacy-photo-dialog { width: min(600px, calc(100% - 28px)); border-radius: 12px; }
.legacy-photo-dialog > form > header { background: var(--legacy-gradient); }
.patient-photo-body { display: grid; justify-items: center; gap: 20px; overflow: auto; padding: 26px; }
.patient-photo-preview { display: grid; width: 220px; height: 220px; place-items: center; overflow: hidden; border: 8px solid #fff; border-radius: 18px; color: #fff; background: var(--legacy-gradient); box-shadow: 0 12px 28px rgba(46,54,123,.23); font-size: 56px; font-weight: 900; }
.patient-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.patient-photo-picker { display: flex; width: 100%; min-height: 120px; align-items: center; justify-content: center; flex-direction: column; gap: 8px; padding: 20px; border: 2px dashed #4081ed; border-radius: 10px; color: #3578e8; background: #f5f9ff; cursor: pointer; text-align: center; }
.patient-photo-picker .app-icon { width: 32px; height: 32px; }
.patient-photo-picker strong { font-size: 15px; font-weight: 850; }
.patient-photo-picker small { color: #64748b; font-size: 12px; font-weight: 600; line-height: 1.5; }
#patientPhotoError { min-height: 20px; margin: 0; color: #c52f48; font-size: 12px; font-weight: 700; }
.photo-save-button:disabled { cursor: not-allowed; opacity: .5; }

.legacy-record-grid.is-history-editing { grid-template-columns: 1fr; }
.legacy-record-grid.is-history-editing .legacy-record-left, .legacy-record-grid.is-history-editing .legacy-record-right { display: none !important; }
.legacy-record-grid.is-history-editing .legacy-record-center { grid-column: 1; grid-row: 1; }
.legacy-record-grid.is-history-editing .legacy-record-center > :not(.legacy-timeline-card) { display: none; }
.legacy-timeline-card.is-creating { padding: 0; background: #f7f5fb; }
.legacy-timeline-card.is-creating > .history-card-controls, .legacy-timeline-card.is-creating > .history-status, .legacy-timeline-card.is-creating > .legacy-timeline { display: none; }
.history-create-panel[hidden] { display: none; }
.history-create-panel { color: #596170; background: #f7f5fb; }
.history-create-panel form { display: block; }
.history-create-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 24px; color: #fff; background: linear-gradient(110deg, #7345c7, #a64ac5); box-shadow: 0 4px 15px rgba(83,43,139,.18); }
.history-create-heading > div { display: flex; align-items: center; gap: 12px; }
.history-create-heading > div:first-child > .app-icon { width: 26px; height: 26px; }
.history-create-heading strong { display: block; font-size: 19px; font-weight: 800; }
.history-create-heading span { display: block; margin-top: 3px; font-size: 13px; opacity: .9; }
.history-create-heading button { display: grid; min-height: 40px; place-items: center; padding: 0 16px; border: 1px solid rgba(255,255,255,.62); border-radius: 8px; color: #fff; background: transparent; }
.history-create-heading button[aria-label] { width: 40px; padding: 0; }
.history-create-heading .history-save-button { display: flex; min-width: 160px; min-height: 44px; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; color: #7041ba; background: #fff; font-size: 13px; font-weight: 850; }
.history-save-button .app-icon, .history-create-heading button .app-icon { width: 18px; height: 18px; }
.history-form-status { display: grid; min-height: 390px; place-items: center; margin: 0; color: #8756b6; font-size: 14px; font-weight: 700; }
.history-form-error { min-height: 20px; margin: 0; padding: 10px 24px 0; color: #bd2e49; font-size: 12px; font-weight: 700; }
.history-form-content { padding: 14px 18px 24px; }
.history-form-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 16px; }
.history-form-column { display: grid; align-content: start; gap: 14px; }
.history-field-card { display: flex; min-width: 0; flex-direction: column; gap: 10px; margin: 0; padding: 18px; border: 1px solid #e2d9ec; border-radius: 10px; color: #525b6a; background: #fff; box-shadow: 0 3px 10px rgba(58,42,82,.045); }
.history-field-card legend, .history-field-card > span, .history-payment-card > div > span, .history-photo-card > div > span { display: flex; align-items: center; gap: 8px; padding: 0; color: #434b58; font-size: 14px; font-weight: 800; }
fieldset.history-field-card legend { float: left; width: 100%; margin: 0 0 10px; }
fieldset.history-field-card legend + * { clear: both; }
.history-field-card legend .app-icon, .history-field-card > span .app-icon, .history-payment-card > div > span .app-icon, .history-photo-card > div > span .app-icon { width: 18px; height: 18px; color: #9850bb; }
.history-field-card > p, .history-field-card small { margin: 0; color: #828894; font-size: 12px; line-height: 1.5; }
.history-required-field b { color: #d73c58; }
.history-field-card input, .history-field-card select, .history-field-card textarea, .history-template-dialog input, .history-template-dialog select { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid #d8dce5; border-radius: 8px; outline: 0; color: #374151; background: #fff; font: inherit; font-size: 14px; font-weight: 600; }
.history-field-card textarea { min-height: 100px; resize: vertical; line-height: 1.6; }
.history-datetime-card { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.history-datetime-card label { display: grid; gap: 8px; }
.history-datetime-card label > span { display: flex; align-items: center; gap: 8px; color: #434b58; font-size: 13px; font-weight: 800; }
.history-datetime-card .app-icon { width: 18px; height: 18px; color: #9850bb; }
.history-field-card input:focus, .history-field-card select:focus, .history-field-card textarea:focus, .history-template-dialog input:focus, .history-template-dialog select:focus { border-color: #9551ba; box-shadow: 0 0 0 3px rgba(149,81,186,.14); }
.history-selection-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 7px; max-height: 180px; overflow: auto; }
.history-selection-chips button { min-height: 38px; padding: 6px; border: 1px solid #ded4e8; border-radius: 7px; color: #5d6574; background: #faf8fc; font-size: 12px; font-weight: 800; }
.history-selection-chips button.is-selected { border-color: transparent; color: #fff; background: linear-gradient(120deg, #8550d0, #a94fc3); box-shadow: 0 3px 8px rgba(113,62,162,.18); }
.history-code-entry { display: grid; grid-template-columns: 1fr 46px; gap: 8px; }
.history-code-input-shell { display: flex; min-height: 46px; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 12px; border: 1px solid #d8dce5; border-radius: 8px; background: #fff; }
.history-code-input-shell:focus-within { border-color: #9551ba; box-shadow: 0 0 0 3px rgba(149,81,186,.14); }
.history-code-input-shell input { width: auto; min-width: 160px; min-height: 32px; flex: 1 1 160px; padding: 4px 2px; border: 0; border-radius: 0; box-shadow: none; font-size: 14px; font-weight: 600; }
.history-code-input-shell input:focus { border: 0; box-shadow: none; }
.history-code-entry button { display: grid; place-items: center; border: 0; border-radius: 8px; color: #fff; background: #9850bb; }
.history-code-entry button .app-icon { width: 18px; height: 18px; }
.history-selected-tags { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 6px; }
.history-selected-tags span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 16px; color: #fff; background: #9850bb; font-size: 12px; font-weight: 800; line-height: 1; }
.history-selected-tags button { display: grid; width: 18px; height: 18px; place-items: center; padding: 0; border: 0; color: #fff; background: transparent; font-size: 14px; }
.history-field-actions { display: flex; justify-content: flex-end; gap: 8px; }
.history-field-actions button { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid #b896cb; border-radius: 7px; color: #8550a6; background: #fff; font-size: 12px; font-weight: 800; }
.history-field-actions .app-icon { width: 15px; height: 15px; }
.history-payment-card, .history-photo-card { gap: 14px; }
.history-payment-card > div, .history-photo-card > div { display: grid; gap: 6px; }
.history-payment-card > button, .history-photo-picker { display: flex; min-height: 46px; align-items: center; justify-content: center; gap: 8px; border: 1px solid #13a764; border-radius: 8px; color: #0b9a58; background: #f7fffb; font-size: 13px; font-weight: 850; cursor: pointer; }
.history-payment-card > button .app-icon, .history-photo-picker .app-icon { width: 18px; height: 18px; }
.history-photo-picker { border-color: #9a59bc; color: #8b49ac; background: #fdf9ff; }
.history-photo-list { display: grid; gap: 7px; }
.history-existing-photo-group { display: grid; gap: 9px; }
.history-existing-photo-group > strong, .history-new-photo-heading { color: #6f4b85; font-size: 12px; font-weight: 850; }
.history-existing-photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.history-existing-photo { position: relative; min-width: 0; overflow: hidden; padding: 0; border: 1px solid #dac9e4; border-radius: 8px; color: #5f6876; background: #f5f1f8; box-shadow: 0 2px 7px rgba(74,45,96,.08); cursor: zoom-in; }
.history-existing-photo:hover { border-color: #9850bb; box-shadow: 0 4px 12px rgba(109,57,142,.14); }
.history-existing-photo > img { display: block; width: 100%; aspect-ratio: 1.25; object-fit: cover; background: #eef1f5; }
.history-existing-photo-unavailable { display: none; min-height: 115px; place-content: center; justify-items: center; gap: 6px; padding: 12px; color: #9299a5; font-size: 11px; }
.history-existing-photo-unavailable .app-icon { width: 28px; height: 28px; }
.history-existing-photo.is-unavailable > img { display: none; }
.history-existing-photo.is-unavailable .history-existing-photo-unavailable { display: grid; }
.history-existing-photo-caption { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: #f8f3fb; }
.history-existing-photo-caption b { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.history-existing-photo-caption small { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; color: #8d4dad; font-size: 10px; font-weight: 800; }
.history-existing-photo-caption .app-icon { width: 13px; height: 13px; }
.history-existing-photo-empty { margin: 0; padding: 12px; border: 1px dashed #ddd3e5; border-radius: 7px; color: #828894; background: #fcfafd; font-size: 12px; text-align: center; }
.history-new-photo-heading { display: block; margin-top: 7px; }
.history-photo-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 7px; color: #5d6574; background: #f5f1f8; font-size: 12px; font-weight: 700; }
.history-photo-item button { width: 24px; height: 24px; padding: 0; border: 0; color: #c43b53; background: transparent; }
.history-annotations-card { margin-top: 16px; overflow: hidden; border: 1px solid #dfd4e9; border-radius: 10px; background: #fff; box-shadow: 0 3px 10px rgba(58,42,82,.045); }
.history-annotations-card > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-bottom: 1px solid #e8e0ee; background: #fdfbfe; }
.history-annotations-card > header > div:first-child { display: flex; align-items: center; gap: 8px; color: #434b58; font-size: 15px; font-weight: 800; }
.history-annotations-card > header .app-icon { width: 18px; height: 18px; color: #9850bb; }
.history-annotation-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.history-annotation-actions select { min-height: 42px; max-width: 220px; padding: 8px 12px; border: 1px solid #d9dce4; border-radius: 6px; color: #434b58; background: #fff; font-size: 13px; font-weight: 700; }
.history-annotation-actions button { display: flex; min-height: 42px; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid #b99ac8; border-radius: 6px; color: #8550a6; background: #fff; font-size: 12px; font-weight: 850; }
.history-annotation-actions button:disabled { cursor: default; opacity: .45; }
.history-jodit-host { width: 100%; min-height: 320px; border: 0; }
.history-annotations-card .jodit-container { border: 0; border-radius: 0; color: #374151; font-family: inherit; }
.history-annotations-card .jodit-toolbar__box { border: 0; border-bottom: 1px solid #e7e3eb; background: #f6f4f8; }
.history-annotations-card .jodit-toolbar-editor-collection { padding: 8px 12px; }
.history-annotations-card .jodit-toolbar-button__button { border-radius: 6px; color: #434b58; }
.history-annotations-card .jodit-toolbar-button__button:hover { color: #7c45a2; background: #eee5f3; }
.history-annotations-card .jodit-wysiwyg { min-height: 320px !important; padding: 18px; color: #374151; background: #fff; font-family: inherit; font-size: 15px; line-height: 1.65; }
.history-annotations-card .jodit-wysiwyg table { width: 100%; border-collapse: collapse; }
.history-annotations-card .jodit-wysiwyg th, .history-annotations-card .jodit-wysiwyg td { min-width: 45px; padding: 9px; border: 1px solid #cfd4dd; }
.history-annotations-card .jodit-status-bar { border-top: 1px solid #ebe7ee; color: #6b7280; background: #faf9fb; font-size: 12px; font-weight: 700; padding: 8px 14px; }
.history-annotations-card .jodit-status-bar__item-right a { display: none; }
.jodit-popup, .jodit-dialog { z-index: 10050; }
.history-create-footer { display: flex; justify-content: flex-end; gap: 14px; padding-top: 18px; }
.history-create-footer button { min-width: 140px; min-height: 48px; border-radius: 8px; font-size: 13px; font-weight: 850; padding: 12px 24px; }
.history-create-footer > button:first-child { border: 1px solid #9c6ab5; color: #8650a3; background: #fff; }
.history-create-footer .history-save-button { display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; color: #fff; background: linear-gradient(110deg, #7345c7, #a64ac5); }
.history-save-button:disabled { cursor: wait; opacity: .65; }

.history-picker-dialog, .history-template-dialog { width: min(920px, calc(100% - 26px)); max-width: none; max-height: 90vh; padding: 0; overflow: hidden; border: 0; border-radius: 12px; color: #596170; background: #fff; box-shadow: 0 28px 80px rgba(21,24,47,.34); }
.history-picker-dialog::backdrop, .history-template-dialog::backdrop { background: rgba(21,29,57,.64); backdrop-filter: blur(3px); }
.history-picker-dialog > article, .history-template-dialog > form { display: flex; max-height: 90vh; flex-direction: column; }
.history-picker-dialog header, .history-template-dialog header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 16px 24px; color: #fff; background: linear-gradient(110deg, #7345c7, #a64ac5); }
.history-picker-dialog header > div, .history-template-dialog header > div { display: flex; align-items: center; gap: 12px; }
.history-picker-dialog header .app-icon, .history-template-dialog header .app-icon { width: 24px; height: 24px; }
.history-picker-dialog h2, .history-template-dialog h2 { margin: 0; font-size: 19px; font-weight: 800; }
.history-picker-dialog header p, .history-template-dialog header p { margin: 4px 0 0; font-size: 13px; opacity: .9; }
.history-picker-dialog header > button, .history-template-dialog header > button { display: grid; width: 40px; height: 40px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.18); }
.history-picker-dialog header > button .app-icon, .history-template-dialog header > button .app-icon { width: 20px; height: 20px; }
.history-picker-filters { display: grid; flex: 0 0 auto; grid-template-columns: 1fr 1.4fr .7fr; gap: 12px; padding: 18px 22px; border-bottom: 1px solid #e5e2e9; background: #faf9fc; }
.history-picker-filters label { display: grid; gap: 7px; }
.history-picker-filters label span { font-size: 13px; font-weight: 800; color: #434b58; }
.history-picker-filters input, .history-picker-filters select { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid #d7dbe3; border-radius: 8px; outline: 0; color: #374151; background: #fff; font: inherit; font-size: 14px; font-weight: 600; }
.history-picker-count { flex: 0 0 auto; margin: 0; padding: 12px 22px; color: #8252a0; background: #f5eef8; font-size: 13px; font-weight: 800; }
.history-picker-results { flex: 1 1 auto; min-height: 280px; overflow: auto; padding: 14px 22px; }
.history-treatment-result, .history-medication-result { display: grid; grid-template-columns: 100px 1fr auto; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid #eee6f4; border-radius: 10px; margin-bottom: 8px; background: #fff; }
.history-treatment-result strong { color: #8f4db1; font-size: 14px; font-weight: 800; }
.history-treatment-result p, .history-medication-result p { margin: 0; color: #374151; font-size: 14px; font-weight: 700; line-height: 1.45; }
.history-treatment-result small, .history-medication-result small { display: block; margin-top: 4px; color: #8550a6; font-size: 12px; font-weight: 650; }
.history-treatment-result button, .history-medication-result button, .history-picker-dialog footer button, .history-template-dialog footer button { min-height: 44px; min-width: 44px; padding: 10px 18px; border: 1px solid #9a58ba; border-radius: 8px; color: #8c4daa; background: #fff; font-size: 13px; font-weight: 850; }
.history-picker-dialog footer, .history-template-dialog footer { display: flex; flex: 0 0 auto; justify-content: flex-end; gap: 12px; padding: 16px 24px; border-top: 1px solid #e5e2e9; background: #faf9fc; }
.history-picker-dialog footer button, .history-template-dialog footer button { min-width: 140px; min-height: 46px; border-radius: 8px; font-size: 13px; font-weight: 850; }
.medication-filters { grid-template-columns: repeat(4, 1fr) auto; gap: 12px; }
.medication-filters > button { align-self: end; min-height: 46px; padding: 10px 20px; border: 0; border-radius: 8px; color: #fff; background: #9350b5; font-size: 13px; font-weight: 850; }
.history-medication-result { grid-template-columns: 1fr auto auto; }
.history-medication-actions { display: flex; gap: 8px; }
.history-medication-result .is-favorite { color: #d19a00; border-color: #e5bd4a; background: #fffaf0; }
.history-template-dialog { width: min(640px, calc(100% - 26px)); }
.history-template-dialog form > div { display: grid; gap: 16px; padding: 22px; }
.history-template-dialog label { display: grid; gap: 8px; }
.history-template-dialog label span { font-size: 13px; font-weight: 800; }
.history-template-dialog form > div > p { min-height: 18px; margin: 0; color: #bd2e49; font-size: 12px; font-weight: 700; }
.history-template-dialog footer button:last-child { display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; background: #9350b5; }

.legacy-gallery-card { min-width: 0; padding: 14px; overflow: hidden; }
.gallery-card-heading { display: grid; gap: 10px; }
.gallery-card-heading > div { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; color: #7b8492; font-size: 12px; letter-spacing: .08em; }
.gallery-card-heading > div > span { color: var(--legacy-blue); font-size: 13px; font-weight: 850; }
.gallery-card-heading > div b { font-weight: 750; font-size: 12px; letter-spacing: 0; }
.gallery-card-heading > button { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; border: 0; border-radius: 8px; color: #fff; background: linear-gradient(120deg,#ffc84c 0%,#ffad21 55%,#f38b16 100%); box-shadow: 0 7px 16px rgba(224,145,18,.22); font-size: 13px; font-weight: 850; letter-spacing: .02em; transition: box-shadow .18s ease, transform .18s ease; }
.gallery-card-heading > button:hover, .gallery-card-heading > button:focus-visible { box-shadow: 0 10px 22px rgba(224,145,18,.3); outline: 0; transform: translateY(-2px); }
.gallery-card-heading > button:active { box-shadow: 0 4px 10px rgba(224,145,18,.2); transform: translateY(0); }
.gallery-card-heading > button:disabled { cursor:not-allowed; opacity:.72; box-shadow:none; transform:none; }
.gallery-card-heading > button .app-icon { width: 16px; height: 16px; }
.gallery-uploader { margin-top: 10px; padding: 14px; border: 1px solid #f4c25e; border-radius: 7px; background: #fffaf0; }
.gallery-uploader form { display: grid; gap: 12px; }
.gallery-uploader label { display: grid; gap: 6px; color: #666e7b; font-size: 11px; font-weight: 750; }
.gallery-uploader label > span { display: flex; align-items: center; gap: 6px; }
.gallery-uploader label > span .app-icon { width: 14px; height: 14px; color: #d68d00; }
.gallery-uploader select { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid #d8dde6; border-radius: 6px; outline: 0; color: #596170; background: #fff; font: inherit; font-size: 11px; }
.gallery-uploader select:focus { border-color: var(--legacy-blue); box-shadow: 0 0 0 2px rgba(25,126,255,.12); }
.gallery-dropzone { min-height: 125px; place-content: center; justify-items: center; padding: 14px; border: 1.5px dashed #e5a62f; border-radius: 6px; color: #7a6540 !important; background: #fff; text-align: center; cursor: pointer; }
.gallery-dropzone input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.gallery-dropzone > .app-icon { width: 30px; height: 30px; color: #e5a11a; }
.gallery-dropzone strong { font-size: 12px; }
.gallery-dropzone small { max-width: 220px; color: #9399a3; font-size: 10px; font-weight: 500; line-height: 1.45; }
.gallery-upload-selection { display: grid; gap: 5px; }
.gallery-upload-selection span { overflow: hidden; padding: 6px 8px; border-radius: 4px; color: #66707d; background: #fff; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.gallery-upload-status { min-height: 15px; margin: 0; color: #bd334b; font-size: 10px; line-height: 1.4; }
.gallery-uploader footer { display: flex; justify-content: space-between; gap: 8px; }
.gallery-uploader footer button { display: flex; min-height: 36px; flex: 1; align-items: center; justify-content: center; gap: 6px; border: 1px solid #8e98a6; border-radius: 5px; color: #596170; background: #fff; font-size: 11px; font-weight: 800; }
.gallery-uploader footer button:last-child { border-color: #e6a222; color: #352b19; background: #ffc14b; }
.gallery-uploader footer button:disabled { cursor: wait; opacity: .55; }
.gallery-uploader footer .app-icon { width: 13px; height: 13px; }
.gallery-status { display: grid; min-height: 330px; place-content: center; margin: 0; padding: 20px; color: #87909e; text-align: center; font-size: 11px; line-height: 1.5; }
.gallery-empty-copy { display: grid; justify-items: center; gap: 8px; }
.gallery-empty-copy > .app-icon { width: 48px; height: 48px; color: #8f98a5; }
.gallery-empty-copy strong { color: var(--legacy-blue); font-size: 13px; }
.gallery-empty-copy small { max-width: 220px; font-size: 11px; line-height: 1.5; }
.patient-gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; max-height: 760px; padding-right: 2px; overflow-y: auto; scrollbar-width: thin; }
.gallery-tile { position: relative; display:flex; min-width: 0; overflow: hidden; border: 1px solid #e0e5ec; border-radius: 6px; background: #f8fafc; box-shadow: 0 2px 6px rgba(40,58,91,.08); }
.gallery-tile-open { display: flex; width: 100%; min-height:100%; flex:1; flex-direction:column; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.gallery-tile img { display: block; width: 100%; aspect-ratio: 1.22; object-fit: cover; background: #eef2f6; }
.gallery-tile-image-error { display: none; min-height: 120px; flex:1; place-content: center; justify-items: center; gap: 7px; padding: 12px 8px; color: #768090; font-size: 11px; font-weight: 700; text-align: center; }
.gallery-tile-image-error .app-icon { width: 34px; height: 34px; }
.gallery-tile.is-unavailable .gallery-tile-image-error { display: grid; }
.gallery-tile.is-unavailable img { display: none; }
.gallery-tile time { display: block; overflow: hidden; padding: 7px 26px 7px 8px; color: #3b2a0c; background: #ffc14b; font-size: 11px; font-weight: 850; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.gallery-tile-delete { position: absolute; right: 3px; bottom: 3px; display: grid; width: 26px; height: 26px; place-items: center; padding: 0; border: 0; border-radius: 4px; color: #a04751; background: rgba(255,255,255,.9); }
.gallery-tile-delete .app-icon { width: 14px; height: 14px; }
.gallery-tile-delete:hover { color: #fff; background: #bd3b4b; }

.gallery-viewer-dialog, .gallery-delete-dialog { width: min(920px, calc(100% - 28px)); max-width: none; padding: 0; overflow: hidden; border: 0; border-radius: 9px; color: #596170; background: #fff; box-shadow: 0 28px 90px rgba(21,24,47,.38); }
.gallery-viewer-dialog::backdrop, .gallery-delete-dialog::backdrop { background: rgba(21,29,57,.72); backdrop-filter: blur(3px); }
.gallery-viewer-dialog > article { display: grid; grid-template-rows: auto minmax(280px, 72vh) auto; }
.gallery-viewer-dialog header { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; color: #fff; background: linear-gradient(110deg, #178df0, #7038df); }
.gallery-viewer-dialog header > div { display: flex; align-items: center; gap: 10px; }
.gallery-viewer-dialog header > div > .app-icon { width: 22px; height: 22px; }
.gallery-viewer-dialog h2 { margin: 0; font-size: 14px; }
.gallery-viewer-dialog header p { margin: 2px 0 0; font-size: 8px; opacity: .82; }
.gallery-viewer-dialog header > button { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 0; color: #fff; background: transparent; }
.gallery-viewer-stage { display: grid; min-height: 0; place-items: center; overflow: hidden; background: #10131a; }
.gallery-viewer-stage img { display: block; max-width: 100%; max-height: 72vh; object-fit: contain; }
.gallery-viewer-stage p { color: #d5d9df; font-size: 9px; }
.gallery-viewer-dialog footer { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-top: 1px solid #e1e5eb; }
.gallery-viewer-dialog footer > div { min-width: 0; margin-right: auto; }
.gallery-viewer-dialog footer span, .gallery-viewer-dialog footer small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-viewer-dialog footer span { color: #4d5664; font-size: 9px; font-weight: 750; }
.gallery-viewer-dialog footer small { margin-top: 2px; color: #9299a4; font-size: 7px; }
.gallery-viewer-dialog footer button { display: flex; min-height: 35px; align-items: center; gap: 5px; padding: 7px 11px; border: 1px solid #d7dce4; border-radius: 5px; color: #596170; background: #fff; font-size: 8px; font-weight: 800; }
.gallery-viewer-dialog footer button .app-icon { width: 12px; height: 12px; }
.gallery-viewer-dialog footer button:first-of-type { color: #b8374a; border-color: #e4a8b0; }
.gallery-delete-dialog { width: min(440px, calc(100% - 28px)); }
.gallery-delete-dialog article { padding: 18px; }
.gallery-delete-dialog header { display: flex; align-items: center; gap: 12px; }
.gallery-delete-dialog header > .app-icon { width: 30px; height: 30px; color: #bd3b4b; }
.gallery-delete-dialog h2 { margin: 0; color: #4f5866; font-size: 14px; }
.gallery-delete-dialog p { margin: 4px 0 0; color: #858d98; font-size: 8px; line-height: 1.5; }
.gallery-delete-dialog footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.gallery-delete-dialog footer button { min-height: 35px; padding: 7px 12px; border: 1px solid #d5dae2; border-radius: 5px; color: #5d6674; background: #fff; font-size: 8px; font-weight: 800; }
.gallery-delete-dialog footer button:last-child { color: #fff; border-color: #bd3b4b; background: #bd3b4b; }
.registration-link-dialog { width:min(610px,calc(100% - 28px)); max-width:none; padding:0; overflow:hidden; border:0; border-radius:20px; color:#596676; background:#fff; box-shadow:0 28px 80px rgba(20,31,59,.38); }
.registration-link-dialog::backdrop { background:rgba(21,29,57,.66); backdrop-filter:blur(3px); }
.registration-link-dialog article { overflow:hidden; border-radius:20px; background:#fff; }
.registration-link-dialog header { display:flex; align-items:center; justify-content:space-between; padding:20px 25px; color:#252b35; background:#fff; }
.registration-link-dialog header > div { display:flex; align-items:center; gap:11px; }
.registration-link-dialog header > div > .app-icon { width:22px; height:22px; }
.registration-link-dialog h2 { margin:0; font-size:18px; font-weight:650; }
.registration-link-dialog header button { display:grid; width:30px; height:30px; place-items:center; padding:0; border:0; color:#b4bac2; background:transparent; }
.registration-link-options { display:flex; align-items:stretch; border-block:1px solid #e1e5eb; background:#fff; }
.registration-link-options button { display:flex; min-width:160px; min-height:54px; align-items:center; justify-content:center; gap:10px; padding:10px 22px; border:0; border-radius:0; color:#76808d; background:#fff; font-size:14px; font-weight:500; }
.registration-link-options button .app-icon { width:21px; height:21px; color:#2d88df; }
.registration-link-options button[data-registration-channel="whatsapp"] .app-icon { color:#25d366; }
.registration-link-options button.is-active { color:#fff; background:#2687e8; box-shadow:inset 0 -3px 0 rgba(22,95,178,.28); }
.registration-link-options button.is-active .app-icon { color:#fff; }
.registration-link-body { padding:28px 30px 30px; }
.registration-link-body section { display:grid; gap:21px; }
.registration-link-body label { display:grid; gap:10px; color:#2c333e; font-size:12px; }
.registration-link-body label > span { display:flex; align-items:center; gap:9px; font-weight:650; }
.registration-link-body label > span .app-icon { width:18px; height:18px; color:#2989e7; }
.registration-link-body input { width:100%; min-height:52px; padding:12px 15px; border:1px solid #cfd5dc; border-radius:7px; outline:0; color:#596675; background:#fff; font-size:13px; }
.registration-link-body input:focus { border-color:#2b88e5; box-shadow:0 0 0 3px rgba(43,136,229,.12); }
.registration-phone-input { display:grid; grid-template-columns:68px 1fr; }
.registration-phone-input b { display:grid; place-items:center; border:1px solid #cfd5dc; border-right:0; border-radius:7px 0 0 7px; color:#596675; background:#eef1f5; font-size:13px; }
.registration-phone-input input { border-radius:0 7px 7px 0; }
.registration-link-body label > small { margin-top:-7px; color:#788391; font-size:9px; }
.registration-link-preview { display:flex; gap:12px; padding:18px 20px; border-left:5px solid #2c8de8; border-radius:7px; color:#687687; background:#f0f2f5; }
.registration-link-preview.is-whatsapp { border-left-color:#39d782; }
.registration-link-preview .app-icon { flex:0 0 18px; width:18px; height:18px; margin-top:2px; color:#75808d; }
.registration-link-preview.is-whatsapp .app-icon, .whatsapp-color { color:#31cf79 !important; }
.registration-link-preview p { margin:0; font-size:10px; line-height:1.65; }
.registration-link-dialog footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:20px 28px; border-top:1px solid #e1e5eb; background:#fafbfc; }
.registration-link-dialog footer button { display:flex; min-height:44px; align-items:center; justify-content:center; gap:8px; padding:9px 20px; border:2px solid #438de2; border-radius:7px; color:#4386d4; background:#fff; box-shadow:0 5px 12px rgba(57,88,126,.13); font-size:9px; font-weight:800; }
.registration-link-dialog footer .registration-send { min-width:205px; color:#fff; border-color:transparent; background:#4b8bea; }
.registration-link-dialog footer .registration-send.is-whatsapp { background:#68d99b; }
.registration-link-dialog footer button .app-icon { width:15px; height:15px; }
.legacy-record-view > .record-loading, .legacy-record-view > .record-empty { min-height: 650px; }

@media (max-width: 1280px) {
  .legacy-nav button:nth-child(1), .legacy-nav button:nth-child(5) { display: none; }
  .legacy-record-grid { grid-template-columns: 420px minmax(0, 1fr); gap: 20px; }
  .legacy-record-left { grid-column: 1; grid-row: 1; }
  .legacy-record-center { grid-column: 2; grid-row: 1; }
  .legacy-record-right { grid-column: 1 / -1; grid-row: 2; }
  .legacy-gallery-card { display: block; }
  .patient-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-height: 420px; }
  .gallery-status { min-height: 150px; }
}

@media (max-width: 960px) {
  .legacy-patient-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .directory-heading-row { grid-template-columns: 1fr 1fr; }
  .directory-heading-row h1 { grid-column: 1 / -1; grid-row: 1; }
  .legacy-record-grid { grid-template-columns: 1fr; }
  .legacy-record-left { grid-column: 1; grid-row: 1; }
  .legacy-record-center { grid-column: 1; grid-row: 2; }
  .legacy-record-right { grid-column: 1; grid-row: 3; }
}

@media (max-width: 620px) {
  .legacy-topbar { padding: 0 12px; }
  .legacy-brand small, .legacy-brand b, .legacy-nav .is-active, .legacy-nav button:disabled { display: none; }
  .legacy-brand strong { font-size: 16px; }
  .legacy-main { padding-inline: 10px; }
  .directory-heading-row { grid-template-columns: 1fr; }
  .directory-heading-row h1, .directory-heading-row button { grid-column: 1; }
  .legacy-patient-grid { grid-template-columns: 1fr; padding: 12px; }
  .legacy-advanced-search > header { align-items: stretch; flex-direction: column; }
  .advanced-search-fields { grid-template-columns: 1fr; padding-inline: 10px; }
  .advanced-search-fields label:nth-child(even) { border-left: 0; }
  .advanced-search-fields label + label { border-top: 1px solid #dce7f2; }
  .record-navigation { grid-template-columns: 1fr 1fr; }
  .legacy-api-status { display: none; }
  .record-navigation > button:last-child { grid-column: 2; }
  .odontogram-heading { align-items: flex-start; }
  .odontogram-heading-actions > span { display: none; }
  .odontogram-dentition { min-width: 520px; }
  .odontogram-tools { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 10px; }
  .legacy-module-tabs button { font-size: 9px; }
  .legacy-gallery-card { display: block; }
}

/* En teléfono la secuencia acompaña la consulta: ficha, odontograma, historia, fotos y administración. */
@media (max-width: 620px) {
  .legacy-record-grid:not(.is-history-editing):not(.is-odontogram-expanded) { display: flex; flex-direction: column; gap: 14px; }
  .legacy-record-grid:not(.is-history-editing):not(.is-odontogram-expanded) > .legacy-record-left,
  .legacy-record-grid:not(.is-history-editing):not(.is-odontogram-expanded) > .legacy-record-center,
  .legacy-record-grid:not(.is-history-editing):not(.is-odontogram-expanded) > .legacy-record-right { display: contents; }
  .legacy-record-grid:not(.is-history-editing):not(.is-odontogram-expanded) .legacy-profile-card { order: 1; width: 100%; }
  .legacy-record-grid:not(.is-history-editing):not(.is-odontogram-expanded) .legacy-odontogram-card { order: 2; width: 100%; }
  .legacy-record-grid:not(.is-history-editing):not(.is-odontogram-expanded) .legacy-module-tabs { order: 3; width: 100%; }
  .legacy-record-grid:not(.is-history-editing):not(.is-odontogram-expanded) .legacy-timeline-card,
  .legacy-record-grid:not(.is-history-editing):not(.is-odontogram-expanded) .legacy-studies-card,
  .legacy-record-grid:not(.is-history-editing):not(.is-odontogram-expanded) .legacy-budgets-card { order: 4; width: 100%; }
  .legacy-record-grid:not(.is-history-editing):not(.is-odontogram-expanded) .legacy-gallery-card { order: 5; width: 100%; }
  .legacy-record-grid:not(.is-history-editing):not(.is-odontogram-expanded) .legacy-appointments-card { order: 6; width: 100%; }
  .legacy-record-grid:not(.is-history-editing):not(.is-odontogram-expanded) .patient-account-card { order: 7; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .legacy-patient-card, .appointment-item { opacity: 1; animation: none; transform: none; }
}

/* Inicio operativo: agenda, sala de espera y directorio */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.dashboard-active {
  background: #f6f8fc;
}

body.dashboard-active .legacy-main {
  max-width: none;
  min-height: 100vh;
  padding: 0;
}

.dashboard-view {
  min-height: 100vh;
  color: #18233a;
  background:
    radial-gradient(circle at 73% 12%, rgba(92, 62, 235, .05), transparent 25rem),
    #f6f8fc;
}

.dashboard-header {
  position: sticky;
  top: 64px;
  z-index: 25;
  display: flex;
  min-height: 74px;
  align-items: center;
  flex-wrap: wrap;
  gap: 11px 14px;
  padding: 11px clamp(12px, 1.5vw, 26px);
  border-bottom: 1px solid #e3e8f1;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 4px 16px rgba(36, 48, 79, .055);
  backdrop-filter: blur(16px);
}

.dashboard-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #152039;
  text-decoration: none;
}

.dashboard-brand-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #1e84f1 0%, #4143e6 54%, #7532d4 100%);
  box-shadow: 0 8px 17px rgba(66, 66, 219, .23);
  font-size: 28px;
  font-weight: 700;
}

.dashboard-brand strong {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.45px;
  white-space: nowrap;
}

.dashboard-brand small {
  padding: 4px 10px;
  border: 1px solid #d8d0ff;
  border-radius: 999px;
  color: #6346df;
  background: #f2efff;
  font-size: 14px;
  font-weight: 700;
}

.dashboard-professional-picker {
  display: flex;
  width: min(100%, 390px);
  min-width: 245px;
  min-height: 48px;
  align-items: center;
  gap: 9px;
  padding: 4px 13px;
  border: 1px solid #d5d3f5;
  border-radius: 15px;
  color: #4f46dc;
  background: linear-gradient(145deg, #fff, #f7f5ff);
  box-shadow: 0 5px 14px rgba(75, 65, 185, .09), inset 0 1px 0 #fff;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.dashboard-professional-picker:hover,
.dashboard-professional-picker:has(.smart-select.is-open) {
  border-color: #958ee9;
  box-shadow: 0 8px 20px rgba(75, 65, 185, .14), 0 0 0 3px rgba(92, 77, 224, .08);
  transform: translateY(-1px);
}

.dashboard-professional-picker > .app-icon {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
}

.dashboard-professional-picker .smart-select {
  width: 100%;
}

.dashboard-professional-picker .smart-select-trigger {
  min-height: 40px;
  padding: 4px 34px 4px 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 16px;
  font-weight: 650;
}

.dashboard-professional-picker .smart-select-trigger:hover,
.dashboard-professional-picker .smart-select-trigger:focus-visible,
.dashboard-professional-picker .smart-select.is-open .smart-select-trigger {
  background: transparent;
  box-shadow: none;
}

.dashboard-professional-picker .smart-select-menu {
  min-width: 300px;
  border-color: #dedbf8;
  box-shadow: 0 18px 38px rgba(55, 47, 139, .2);
}

.dashboard-professional-picker .smart-select-option:hover,
.dashboard-professional-picker .smart-select-option:focus-visible,
.dashboard-professional-picker .smart-select-option[aria-selected="true"] {
  color: #4f46dc;
  background: #f0eeff;
}

.dashboard-primary-actions,
.dashboard-header-tail {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.dashboard-primary-actions button,
.dashboard-agenda-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 19px;
  border: 0;
  border-radius: 13px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-primary-actions .app-icon,
.dashboard-agenda-link .app-icon {
  width: 20px;
  height: 20px;
}

.dashboard-new-patient {
  color: #fff;
  background: linear-gradient(135deg, #f07e00, #f69a09 56%, #efa817);
  box-shadow: 0 7px 15px rgba(242, 137, 0, .23);
}

.dashboard-new-patient:hover {
  background: linear-gradient(135deg, #de7000, #e98b05 56%, #df980c);
}

.dashboard-agenda-link {
  color: #fff;
  background: linear-gradient(135deg, #287ff0, #4a40e6 55%, #7135d6);
  box-shadow: 0 7px 15px rgba(74, 64, 230, .18);
}

.dashboard-registration-link {
  position: relative;
  color: #4d55ca;
  background: #f2f4f9;
}

.dashboard-registration-link.is-locked {
  color: #6b7485;
}

.dashboard-premium-crown {
  position: absolute;
  top: -8px;
  right: -5px;
  width: 18px !important;
  height: 18px !important;
  padding: 3px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #ffbf28, #f59a18);
  box-shadow: 0 3px 8px rgba(224, 145, 11, .28);
}

.dashboard-premium-crown.premium-crown {
  color: #fff !important;
}

.dashboard-header-tail {
  margin-left: auto;
  justify-content: flex-end;
}

.dashboard-today {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  gap: 9px;
  padding: 0 17px;
  border: 1px solid #e4e8f0;
  border-radius: 13px;
  color: #364159;
  background: #f5f6fa;
  white-space: nowrap;
}

.dashboard-today .app-icon {
  width: 19px;
  height: 19px;
  color: #5146e7;
}

.dashboard-today b {
  font-size: 15px;
  font-weight: 650;
}

.dashboard-plan-preview {
  display: grid;
  gap: 2px;
  color: #8b6a16;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.dashboard-plan-preview .smart-select-trigger {
  min-height: 34px;
  padding: 4px 30px 4px 10px;
  font-size: 13px;
}

.dashboard-tutorial,
.dashboard-logout {
  display: grid;
  width: 47px;
  height: 47px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 2px solid #4d5ceb;
  color: #4b51df;
  background: #fff;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}

.dashboard-tutorial {
  border-radius: 12px;
}

.dashboard-logout {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border-color: #e3e7ef;
  color: #7c8799;
}

.dashboard-tutorial:hover,
.dashboard-tutorial:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, #287ff0, #7135d6);
  transform: translateY(-1px);
}

.dashboard-tutorial .app-icon,
.dashboard-logout .app-icon {
  width: 21px;
  height: 21px;
}

.dashboard-body {
  width: min(100% - 44px, 1600px);
  margin: 0 auto;
  padding: 34px 0 70px;
}

.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(210px, 1fr));
  gap: 20px;
}

.dashboard-metric-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 150px;
  align-items: center;
  gap: 17px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid #e0e5ee;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 5px 13px rgba(31, 43, 70, .06);
}

.dashboard-metric-card > span {
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 16px;
  color: #286feb;
  background: #eef5ff;
}

.dashboard-metric-card > span .app-icon {
  width: 28px;
  height: 28px;
}

.dashboard-metric-card small {
  display: block;
  margin-bottom: 3px;
  color: #98a2b5;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: .065em;
  text-transform: uppercase;
  white-space: nowrap;
  word-break: keep-all;
}

.dashboard-metric-card strong {
  display: block;
  color: #14203a;
  font-size: 28px;
  font-style: normal;
  line-height: 1.05;
}

.dashboard-metric-card strong b {
  font-size: 34px;
}

.dashboard-metric-card strong em {
  color: #747f92;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
}

.dashboard-metric-card p {
  margin: 6px 0 0;
  color: #7a8496;
  font-size: 15px;
}

.dashboard-metric-card.is-attended {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 7px 13px;
}

.dashboard-metric-card.is-attended > span {
  grid-row: 1 / 3;
  width: 54px;
  height: 54px;
  color: #614ce0;
  background: #eeebff;
}

.dashboard-attended-copy strong {
  font-size: 24px;
}

.dashboard-attended-copy strong b {
  font-size: 31px;
}

.dashboard-progress-percent {
  padding: 4px 10px;
  border-radius: 999px;
  color: #6151df;
  background: #eeeaff;
  font-size: 15px;
}

.dashboard-progress-track {
  grid-column: 1 / -1;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e3e8f0;
}

.dashboard-progress-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3b79ef, #15b889);
  transition: width .25s ease;
}

.dashboard-metric-card.is-attended > p {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0;
  text-align: left;
  font-size: 13px;
  line-height: 1.3;
}

.dashboard-metric-card.is-attended > p .app-icon {
  width: 16px;
  height: 16px;
  color: #e1a62a;
}

.dashboard-metric-card.is-waiting {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px 15px;
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, #0fb785, #18bd83);
  box-shadow: 0 8px 17px rgba(16, 183, 133, .2);
}

.dashboard-metric-card.is-waiting > span {
  color: #fff;
  background: rgba(255,255,255,.18);
}

.dashboard-metric-card.is-waiting small,
.dashboard-metric-card.is-waiting strong {
  color: #fff;
}

.dashboard-metric-card.is-waiting .dashboard-waiting-decoration {
  position: absolute;
  right: -20px;
  bottom: -28px;
  width: 148px;
  height: 148px;
  color: rgba(255,255,255,.14);
  pointer-events: none;
}

.dashboard-metric-card.is-waiting > button {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 11px;
  color: #fff;
  background: rgba(255,255,255,.16);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.dashboard-metric-card.is-waiting > button:hover,
.dashboard-metric-card.is-waiting > button.is-active {
  border-color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.28);
}

.dashboard-metric-card.is-waiting > button .app-icon {
  width: 16px;
  height: 16px;
}

.dashboard-metric-card.is-waiting > button b {
  font: inherit;
}

.dashboard-metric-card.is-next > span {
  color: #d98600;
  background: #fff8dc;
}

.dashboard-metric-card.is-absent > span {
  color: #ef4166;
  background: #fff0f3;
}

.dashboard-metric-card.is-absent {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px 15px;
}

.dashboard-metric-card.is-absent > button {
  grid-column: 1 / -1;
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid #f2c1cb;
  border-radius: 11px;
  color: #bd3450;
  background: #fff2f5;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
}

.dashboard-metric-card.is-absent > button.is-active,
.dashboard-metric-card.is-absent > button:hover {
  color: #fff;
  border-color: #d9435f;
  background: #d9435f;
}

.dashboard-metric-card.is-absent > button .app-icon {
  width: 16px;
  height: 16px;
}

.dashboard-control-bar {
  display: grid;
  grid-template-columns: minmax(470px, 680px) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-top: 34px;
  padding-bottom: 18px;
  border-bottom: 1px solid #dfe5ee;
}

.dashboard-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  padding: 6px;
  border: 1px solid #dfe5f0;
  border-radius: 19px;
  background: linear-gradient(145deg, #f8faff, #edf2f8);
  box-shadow: inset 0 2px 6px rgba(44, 58, 92, .11), 0 5px 12px rgba(47, 62, 96, .08);
  isolation: isolate;
}

.dashboard-tabs::before {
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc(50% - 6px);
  height: calc(100% - 12px);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 14px;
  background: linear-gradient(145deg, #fff, #f8faff);
  box-shadow: 0 5px 12px rgba(39, 53, 85, .13), inset 0 1px 0 #fff;
  content: '';
  pointer-events: none;
  transform: translateX(0);
  transition: transform .24s cubic-bezier(.22, .8, .25, 1);
  z-index: 0;
}

.dashboard-tabs.is-directory::before {
  transform: translateX(100%);
}

.dashboard-tabs button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  gap: 9px;
  padding: 0 23px;
  border: 0;
  border-radius: 14px;
  color: #5e687b;
  background: transparent;
  font: inherit;
  font-size: 17px;
  font-weight: 650;
}

.dashboard-tabs button.is-active {
  color: #1d2940;
}

.dashboard-tabs .app-icon {
  width: 20px;
  height: 20px;
  color: #5148e7;
}

.dashboard-tabs b {
  display: grid;
  min-width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 999px;
  color: #5849df;
  background: #efebff;
  font-size: 14px;
}

.dashboard-search-tools {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.dashboard-mobile-active-consultation { display: none; }
.dashboard-mobile-active-consultation[hidden] { display: none; }

.dashboard-attended-filter {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 0 17px;
  border: 1px solid #9fe6cf;
  border-radius: 15px;
  color: #087c59;
  background: #e9fbf4;
  font: inherit;
  font-size: 15px;
  font-weight: 750;
  white-space: nowrap;
}

.dashboard-attended-filter .app-icon {
  width: 19px;
  height: 19px;
}

.dashboard-attended-filter__label { white-space: nowrap; }
.dashboard-attended-filter__label b { margin: 0 2px; }

.dashboard-attended-filter.is-active,
.dashboard-attended-filter:hover {
  color: #fff;
  border-color: #0f9e73;
  background: #0f9e73;
}

.dashboard-search {
  display: flex;
  flex: 0 1 520px;
  width: min(520px, 100%);
  min-width: 0;
  min-height: 48px;
  margin-left: auto;
  align-items: center;
  gap: 9px;
  padding: 0 16px;
  border: 1px solid #dfe4ec;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 9px rgba(34, 45, 72, .05);
}

.dashboard-search:focus-within {
  border-color: #5578ec;
  box-shadow: 0 0 0 4px rgba(56, 105, 233, .1);
}

.dashboard-search .app-icon {
  width: 20px;
  height: 20px;
  color: #8995a8;
}

.dashboard-search input {
  width: 100%;
  border: 0;
  outline: 0;
  color: #243047;
  background: transparent;
  font: inherit;
  font-size: 16px;
}

.dashboard-filter-button {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 0 17px;
  border: 1px solid #dfe4ec;
  border-radius: 999px;
  color: #3f4b60;
  background: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
}

.dashboard-filter-button.is-active {
  color: #4c43da;
  border-color: #7169e7;
  background: #f4f2ff;
}

.dashboard-filter-button .app-icon {
  width: 18px;
  height: 18px;
}

.dashboard-filter-button b {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #5b4be2;
  font-size: 12px;
}

.dashboard-directory-layout {
  display: flex;
  flex: 0 0 auto;
  padding: 4px;
  border: 1px solid #dfe4ec;
  border-radius: 13px;
  background: #fff;
}

.dashboard-directory-layout button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: #7a8699;
  background: transparent;
}

.dashboard-directory-layout button.is-active {
  color: #fff;
  background: linear-gradient(135deg, #337cee, #673bdc);
}

.dashboard-directory-layout .app-icon {
  width: 18px;
  height: 18px;
}

.dashboard-filter-panel {
  margin-top: 14px;
  padding: 20px;
  border: 1px solid #dedff2;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff, #f8f7ff);
  box-shadow: 0 7px 18px rgba(46, 43, 102, .07);
}

.dashboard-filter-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.dashboard-filter-panel header strong,
.dashboard-filter-panel header span {
  display: block;
}

.dashboard-filter-panel header strong {
  font-size: 18px;
}

.dashboard-filter-panel header span {
  margin-top: 2px;
  color: #7c8799;
  font-size: 14px;
}

.dashboard-filter-panel header button {
  padding: 8px 15px;
  border: 0;
  border-radius: 10px;
  color: #5f50dc;
  background: #efecff;
  font: inherit;
  font-weight: 650;
}

.dashboard-filter-panel > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.dashboard-filter-panel label span {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  color: #566176;
  font-size: 14px;
  font-weight: 700;
}

.dashboard-filter-panel label span .app-icon {
  width: 15px;
  height: 15px;
  color: #efaa18;
}

.dashboard-filter-panel input {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid #dce1e9;
  border-radius: 11px;
  outline: 0;
  color: #273349;
  background: #fff;
  font: inherit;
  font-size: 15px;
}

.dashboard-filter-panel label.is-locked input {
  cursor: pointer;
  color: #8992a1;
  background: #f4f5f8;
}

.dashboard-operational-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 480px);
  align-items: start;
  gap: 30px;
  margin-top: 32px;
}

.dashboard-list-status {
  margin: 24px 0;
  color: #778398;
  font-size: 16px;
  text-align: center;
}

.dashboard-appointments {
  display: grid;
  gap: 16px;
}

.dashboard-appointments-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 13px 4px 2px;
  color: #7b8596;
  font-size: 14px;
  font-weight: 700;
}

.dashboard-appointments-divider::before,
.dashboard-appointments-divider::after {
  height: 1px;
  flex: 1 1 auto;
  background: #dfe4ec;
  content: '';
}

.dashboard-appointments-divider span,
.dashboard-appointments-divider b {
  white-space: nowrap;
}

.dashboard-appointments-divider b {
  padding: 4px 9px;
  border-radius: 999px;
  color: #687487;
  background: #eef1f5;
  font-size: 12px;
}

.dashboard-appointment-card {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(230px, 1fr) auto auto;
  min-height: 124px;
  align-items: center;
  gap: 20px;
  padding: 15px 18px;
  border: 1px solid #dde3eb;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 11px rgba(34, 45, 70, .055);
}

.dashboard-appointment-card.is-waiting {
  border: 2px solid #64dbba;
  box-shadow: 0 0 0 3px rgba(100, 219, 186, .11), 0 4px 11px rgba(34, 45, 70, .05);
}

.dashboard-appointment-card.is-active {
  border-color: #6a5cea;
  box-shadow: 0 0 0 3px rgba(93, 75, 224, .1);
}

.dashboard-appointment-card.is-done {
  opacity: .73;
}

.dashboard-appointment-time {
  display: grid;
  min-height: 82px;
  place-content: center;
  border: 1px solid #dfe4ec;
  border-radius: 15px;
  color: #19253c;
  background: #f4f6fa;
  text-align: center;
}

.dashboard-appointment-time strong {
  font-size: 24px;
  line-height: 1;
}

.dashboard-appointment-time small {
  margin-top: 8px;
  color: #728096;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.dashboard-appointment-info {
  min-width: 0;
}

.dashboard-appointment-name-line {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.dashboard-appointment-name {
  border: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  color: #16223a;
  font: inherit;
  font-size: 20px;
  font-weight: 750;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-appointment-age {
  color: #68758a;
  font-size: 15px;
}

.dashboard-status-pill {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  gap: 5px;
  padding: 3px 11px;
  border: 1px solid #acd0f5;
  border-radius: 999px;
  color: #2473c9;
  background: #eef7ff;
  font-size: 13px;
  font-weight: 700;
}

.dashboard-status-pill.is-waiting {
  color: #21835f;
  border-color: #c6efdf;
  background: #eafaf3;
}

.dashboard-status-pill.is-absent,
.dashboard-status-pill.is-cancelled {
  color: #c53d57;
  border-color: #f2bec8;
  background: #fff1f4;
}

.dashboard-status-pill.is-attended {
  color: #536174;
  border-color: #d9dfe7;
  background: #f0f3f6;
}

.dashboard-undo-waiting {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid #bfe8d9;
  border-radius: 50%;
  color: #28866a;
  background: #fff;
}

.dashboard-undo-waiting:hover {
  color: #fff;
  border-color: #2ca67f;
  background: #2ca67f;
}

.dashboard-undo-waiting .app-icon {
  width: 13px;
  height: 13px;
}

.dashboard-appointment-meta {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 8px;
  color: #69768b;
  font-size: 15px;
  flex-wrap: wrap;
}

.dashboard-appointment-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.dashboard-appointment-meta em {
  font-style: normal;
}

.dashboard-appointment-meta .is-coverage {
  min-height: 27px;
  padding: 3px 10px;
  border: 1px solid #ddd9f7;
  border-radius: 999px;
  color: #5d5794;
  background: #f4f2ff;
  line-height: 1.2;
}

.dashboard-appointment-meta .is-coverage .app-icon {
  color: #7569d8;
}

.dashboard-appointment-meta .app-icon {
  width: 17px;
  height: 17px;
  color: #7161ea;
}

.dashboard-clinical-alerts {
  display: flex;
  gap: 7px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.dashboard-clinical-alerts span {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid #f2cf79;
  border-radius: 7px;
  color: #a95c00;
  background: #fff9e3;
  font-size: 13px;
  font-weight: 650;
}

.dashboard-clinical-alerts span.is-first {
  color: #66510b;
}

.dashboard-clinical-alerts .app-icon {
  width: 14px;
  height: 14px;
}

.dashboard-appointment-primary {
  min-width: 156px;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 13px;
  color: #fff;
  background: #0e9f73;
  box-shadow: 0 6px 13px rgba(14, 159, 115, .19);
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  text-transform: uppercase;
}

.dashboard-appointment-primary.is-secondary {
  color: #2f6fd3;
  border: 1px solid #b9d0f3;
  background: #f1f7ff;
  box-shadow: none;
}

.dashboard-closed-actions {
  display: flex;
  min-width: 244px;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.dashboard-closed-actions button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid #dce2ea;
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.dashboard-closed-actions button .app-icon {
  width: 18px;
  height: 18px;
}

.dashboard-closed-actions .is-whatsapp {
  color: #0a9f5b;
  border-color: #bfe8d3;
  background: #f1fbf6;
}

.dashboard-closed-actions .is-reschedule {
  color: #4f54d8;
  border-color: #d6d5f4;
  background: #f6f5ff;
}

.dashboard-closed-actions .is-restore-scheduled {
  color: #2d6dca;
  border-color: #c9ddf6;
  background: #f3f8ff;
}

.dashboard-closed-actions button:disabled {
  color: #9ba4b2;
  border-color: #e3e6eb;
  background: #f4f5f7;
  cursor: not-allowed;
}

.dashboard-appointment-controls {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
}

.dashboard-appointment-controls > button {
  display: grid;
  width: 47px;
  height: 47px;
  place-items: center;
  padding: 0;
  border: 1px solid #dfe4ec;
  border-radius: 13px;
  color: #748197;
  background: #fff;
}

.dashboard-appointment-controls > button:hover {
  color: #4f47da;
  border-color: #aaa4eb;
  background: #f5f3ff;
}

.dashboard-appointment-controls .app-icon {
  width: 20px;
  height: 20px;
}

.dashboard-appointment-controls > .dashboard-mark-absent {
  display: inline-flex;
  width: auto;
  min-width: 94px;
  gap: 7px;
  padding: 0 12px;
  color: #c13f5b;
  border-color: #efc8d0;
  background: #fff6f8;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.dashboard-appointment-controls > .dashboard-mark-absent:hover {
  color: #fff;
  border-color: #d84963;
  background: #d84963;
}

.dashboard-sidebar {
  display: grid;
  gap: 24px;
}

.dashboard-active-consultation {
  padding: 24px;
  border-radius: 23px;
  color: #fff;
  background:
    radial-gradient(circle at 94% 90%, rgba(255,255,255,.08), transparent 14rem),
    linear-gradient(145deg, #373095, #4936aa);
  box-shadow: 0 13px 24px rgba(49, 40, 135, .2);
}

.dashboard-active-consultation > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.dashboard-active-consultation > header span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.dashboard-active-consultation > header i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f2a51a;
}

.dashboard-active-consultation.has-active > header i {
  background: #19c28a;
  box-shadow: 0 0 0 5px rgba(25, 194, 138, .18), 0 0 0 11px rgba(25, 194, 138, .08);
  animation: dashboard-consultation-pulse 1.8s ease-in-out infinite;
}

@keyframes dashboard-consultation-pulse {
  0%, 100% { opacity: .72; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-tabs::before,
  .dashboard-active-consultation.has-active > header i {
    animation: none;
    transition: none;
  }
}

.dashboard-active-consultation time {
  padding: 7px 13px;
  border-radius: 999px;
  color: #d9d4ff;
  background: rgba(99, 76, 234, .58);
  font-size: 15px;
  font-weight: 700;
}

.dashboard-active-empty {
  display: grid;
  min-height: 210px;
  place-items: center;
  align-content: center;
  text-align: center;
}

.dashboard-active-empty .app-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  color: #bdb4ff;
}

.dashboard-active-empty strong {
  font-size: 19px;
}

.dashboard-active-empty p {
  max-width: 290px;
  margin: 7px 0 0;
  color: #c7c2eb;
  font-size: 15px;
}

.dashboard-active-body {
  padding-top: 22px;
}

.dashboard-active-patient {
  display: flex;
  align-items: center;
  gap: 15px;
}

.dashboard-active-patient > span {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(145deg, #4b64ed, #7046e2);
  font-size: 20px;
  font-weight: 700;
}

.dashboard-active-patient strong,
.dashboard-active-patient small {
  display: block;
}

.dashboard-active-patient strong {
  font-size: 22px;
}

.dashboard-active-patient small {
  margin-top: 3px;
  color: #c5c0e9;
  font-size: 14px;
}

.dashboard-active-body dl {
  display: grid;
  gap: 10px;
  margin: 20px 0;
  padding: 15px 17px;
  border-radius: 15px;
  background: rgba(22, 20, 83, .26);
}

.dashboard-active-body dl div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
}

.dashboard-active-body dt {
  color: #aaa5d3;
}

.dashboard-active-body dd {
  margin: 0;
  color: #fff;
  font-weight: 650;
  text-align: right;
}

.dashboard-active-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dashboard-active-actions button {
  display: inline-flex;
  min-height: 49px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 0;
  border-radius: 13px;
  color: #fff;
  background: #0eb982;
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  text-transform: uppercase;
}

.dashboard-active-actions button:first-child {
  color: #fff;
  background: #10b982;
}

.dashboard-active-actions button:nth-child(2) {
  background: #5d4ce8;
}

.dashboard-active-actions button:last-child {
  grid-column: 1 / -1;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.1);
}

.dashboard-active-actions .app-icon {
  width: 17px;
  height: 17px;
}

.dashboard-quick-actions {
  padding: 23px;
  border: 1px solid #dfe4ec;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 5px 13px rgba(31, 43, 70, .05);
}

.dashboard-quick-actions h2 {
  margin: 0 0 15px;
  color: #91a0b5;
  font-size: 15px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.dashboard-quick-actions button {
  display: grid;
  width: 100%;
  min-height: 60px;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 11px;
  margin-top: 10px;
  padding: 7px 13px;
  border: 1px solid #e0e5ed;
  border-radius: 14px;
  color: #465267;
  background: #fafbfd;
  font: inherit;
  text-align: left;
}

.dashboard-quick-actions button:first-of-type {
  color: #7a4b14;
  border-color: #ecd77f;
  background: #fffcf0;
}

.dashboard-quick-actions button#dashboardUrgentAppointment {
  color: #a65309;
  border-color: #f1c17d;
  background: #fff8ef;
}

.dashboard-quick-actions button#dashboardUrgentAppointment > span {
  color: #fff;
  background: linear-gradient(135deg, #f07e00, #f69a09 56%, #efa817);
  box-shadow: 0 5px 11px rgba(242, 137, 0, .18);
}

.dashboard-quick-actions button#dashboardUrgentAppointment > .app-icon {
  color: #d8790a;
}

.dashboard-quick-actions button#dashboardUrgentAppointment:hover,
.dashboard-quick-actions button#dashboardUrgentAppointment:focus-visible {
  border-color: #e7a54d;
  background: #fff2df;
}

.dashboard-quick-actions button > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 11px;
  color: #554be0;
  background: #efedff;
}

.dashboard-quick-actions button > span.is-yellow {
  color: #d48400;
  background: #fff2c8;
}

.dashboard-quick-actions button > .app-icon {
  width: 17px;
  height: 17px;
  color: #9ba5b4;
}

.dashboard-quick-actions button b {
  font-size: 15px;
}

.dashboard-quick-actions button small {
  padding: 5px 9px;
  border-radius: 8px;
  background: #ffec9f;
  font-size: 12px;
  font-weight: 700;
}

.dashboard-directory-panel {
  margin-top: 28px;
}

.dashboard-patient-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 420px));
  justify-content: center;
  gap: 24px;
}

.dashboard-patient-card {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 18px 16px;
  padding: 26px;
  border: 1px solid #dfe3ea;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(37, 47, 73, .09);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.dashboard-patient-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(79, 70, 229, .08), 0 4px 12px rgba(0, 0, 0, .03);
  border-color: #cbd5e1;
}

.dashboard-patient-card::before {
  display: none;
}

.dashboard-patient-avatar {
  display: grid;
  width: 70px;
  height: 70px;
  place-items: center;
  overflow: hidden;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  box-shadow: 0 8px 20px rgba(79, 70, 229, .28);
  font-size: 24px;
  font-weight: 800;
  flex-shrink: 0;
}

.dashboard-patient-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dashboard-patient-main {
  min-width: 0;
  align-self: center;
}

.dashboard-patient-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dashboard-patient-heading strong {
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 21px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-patient-coverage {
  flex: 0 0 auto;
  max-width: 46%;
  overflow: hidden;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-patient-coverage.is-particular {
  color: #4338ca;
  background: #eef2ff;
  border: 1px solid #e0e7ff;
}

.dashboard-patient-coverage.is-prepaid {
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.dashboard-patient-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  min-width: 0;
}

.dashboard-patient-keydata {
  display: flex;
  min-width: 0;
  align-items: center;
  color: #64748b;
  font-size: 14.5px;
  font-weight: 500;
}

.dashboard-patient-keydata span + span::before {
  margin-inline: 8px;
  content: "•";
  color: #cbd5e1;
}

.dashboard-patient-alta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
}

.dashboard-patient-alta b {
  color: #475569;
  font-weight: 700;
}

.dashboard-patient-secondary {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #f8fafc;
  box-sizing: border-box;
}

.dashboard-patient-channel-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid #edf2f7;
  border-radius: 11px;
  background: #fff;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.dashboard-patient-channel-row:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .03);
}

.dashboard-patient-channel-info {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.dashboard-patient-channel-info .app-icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

.dashboard-patient-channel-info .app-icon[href*="whatsapp"] {
  color: #25d366;
}

.dashboard-patient-channel-info .app-icon[href*="mail"] {
  color: #3b82f6;
}

.dashboard-patient-channel-text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: #1e293b;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-patient-channel-text:hover {
  color: #4f46e5;
}

.dashboard-patient-channel-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all .15s ease;
}

.dashboard-patient-channel-btn .app-icon {
  width: 13px;
  height: 13px;
}

.dashboard-patient-channel-btn.is-email {
  color: #2563eb;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
}

.dashboard-patient-channel-btn.is-email:hover {
  color: #fff;
  border-color: #2563eb;
  background: #2563eb;
  box-shadow: 0 3px 10px rgba(37, 99, 235, .25);
}

.dashboard-patient-channel-btn.is-wa {
  color: #047857;
  border: 1px solid #a7f3d0;
  background: #ecfdf5;
}

.dashboard-patient-channel-btn.is-wa:hover {
  color: #fff;
  border-color: #10b981;
  background: #10b981;
  box-shadow: 0 3px 10px rgba(16, 185, 129, .25);
}

.dashboard-patient-actions {
  grid-column: 1 / -1;
  display: grid;
  min-width: 0;
  grid-template-columns: 1.2fr 1fr auto;
  gap: 12px;
  padding-top: 4px;
}

.dashboard-patient-actions button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 13px;
  font: inherit;
  font-size: 15px;
  font-weight: 750;
  cursor: pointer;
  transition: all .15s ease;
}

.dashboard-patient-actions .dashboard-patient-btn-primary {
  color: #fff;
  border: 1px solid #4f46e5;
  background: linear-gradient(135deg, #4f46e5, #3b82f6);
  box-shadow: 0 4px 14px rgba(79, 70, 229, .22);
}

.dashboard-patient-actions .dashboard-patient-btn-primary:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #4338ca, #2563eb);
  box-shadow: 0 6px 18px rgba(79, 70, 229, .32);
}

.dashboard-patient-actions .dashboard-patient-btn-secondary {
  color: #334155;
  border: 1px solid #cbd5e1;
  background: #fff;
}

.dashboard-patient-actions .dashboard-patient-btn-secondary:hover {
  color: #0f172a;
  border-color: #94a3b8;
  background: #f8fafc;
}

.dashboard-patient-actions .app-icon {
  width: 17px;
  height: 17px;
}

.dashboard-patient-notes-toggle {
  width: 48px;
  min-width: 48px;
  padding: 0 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 13px !important;
  background: #fff !important;
}

.dashboard-patient-notes-toggle:hover {
  color: #4f46e5 !important;
  border-color: #4f46e5 !important;
  background: #f8fafc !important;
}

.dashboard-patient-notes-toggle .app-icon:last-child {
  width: 13px;
  height: 13px;
  margin-left: -3px;
  transition: transform .18s ease;
}

.dashboard-patient-notes-toggle[aria-expanded="true"] .app-icon:last-child { transform: rotate(180deg); }

.dashboard-patient-notes-toggle.has-notes {
  color: #166534 !important;
  border-color: #86efac !important;
  background: #f0fdf4 !important;
}

.dashboard-patient-notes-toggle.has-notes:hover {
  border-color: #4ade80 !important;
  background: #dcfce7 !important;
}

.dashboard-patient-notes {
  position: absolute;
  z-index: 5;
  top: calc(100% - 14px);
  right: 18px;
  left: 18px;
  padding: 16px;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(37, 47, 73, .16);
  min-width: 0;
  animation: dashboard-patient-notes-in .18s ease both;
}

.dashboard-patient-notes-title {
  font-size: 13.5px;
  font-weight: 750;
  color: #334155;
  letter-spacing: .01em;
  margin-bottom: 8px;
}

.dashboard-patient-notes[hidden] { display: none; }
.dashboard-patient-card.is-notes-open { z-index: 2; }
.dashboard-patient-notes textarea { display: block; width: 100%; min-height: 94px; padding: 11px 12px; resize: vertical; border: 1px solid #d5dce7; border-radius: 11px; outline: 0; color: #354155; background: #fbfcff; font: inherit; font-size: 14px; line-height: 1.5; box-sizing: border-box; }
.dashboard-patient-notes textarea:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, .12); }
.dashboard-patient-notes-status { min-height: 18px; margin: 5px 0 0; color: #c43a51; font-size: 12px; }
.dashboard-patient-notes-actions { display: flex; justify-content: flex-end; gap: 8px; }
.dashboard-patient-notes-actions button { display: grid; width: 38px; height: 34px; place-items: center; padding: 0; border-radius: 9px; }
.dashboard-patient-notes-actions button:first-child { border: 1px solid #d8dfe9; color: #7c8797; background: #fff; }
.dashboard-patient-notes-actions button:last-child { border: 1px solid transparent; color: #fff; background: linear-gradient(135deg, #4f46e5, #3b82f6); }
.dashboard-patient-notes-actions .app-icon { width: 17px; height: 17px; }
.dashboard-patient-notes-actions button:disabled { cursor: wait; opacity: .55; }

@keyframes dashboard-patient-notes-in { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }

.dashboard-patient-results.is-compact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.dashboard-patient-results.is-compact .dashboard-patient-card {
  min-height: 86px;
  grid-template-columns: 56px minmax(210px, 1.2fr) minmax(220px, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-left: 4px solid #867fe6;
  border-radius: 15px;
}

.dashboard-patient-results.is-compact .dashboard-patient-card::before {
  display: none;
}

.dashboard-patient-results.is-compact .dashboard-patient-avatar {
  width: 54px;
  height: 54px;
  grid-row: auto;
  font-size: 17px;
}

.dashboard-patient-results.is-compact .dashboard-patient-secondary {
  grid-column: auto;
  grid-row: auto;
  grid-template-columns: 1fr;
  gap: 3px;
  padding: 0;
  border: 0;
  background: transparent;
}

.dashboard-patient-results.is-compact .dashboard-patient-secondary > div {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
}

.dashboard-patient-results.is-compact .dashboard-patient-secondary span,
.dashboard-patient-results.is-compact .dashboard-patient-secondary strong,
.dashboard-patient-results.is-compact .dashboard-patient-secondary a {
  font-size: 13px;
  text-align: left;
}

.dashboard-patient-results.is-compact .dashboard-patient-actions {
  grid-column: auto;
  width: 230px;
  padding-top: 0;
  border-top: 0;
}

.dashboard-directory-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 24px;
}

.dashboard-directory-pagination button {
  min-height: 44px;
  padding: 0 17px;
  border: 1px solid #5c55dc;
  border-radius: 11px;
  color: #5149d2;
  background: #fff;
  font: inherit;
  font-weight: 650;
}

.dashboard-directory-pagination button:disabled {
  opacity: .4;
}

.record-consultation-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: -5px 0 15px;
  padding: 10px 13px;
  border: 1px solid #b6e9d9;
  border-radius: 14px;
  background: #effbf7;
}

.record-consultation-actions > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: auto;
  color: #177c5e;
  font-weight: 700;
}

.record-consultation-actions > span i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #12b981;
}

.record-consultation-actions button {
  display: inline-flex;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 15px;
  border: 1px solid #11a975;
  border-radius: 11px;
  color: #fff;
  background: #10a976;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.record-consultation-actions button:last-child {
  color: #167b5c;
  background: #fff;
}

.record-consultation-actions .app-icon {
  width: 17px;
  height: 17px;
}

@media (max-width: 1420px) {
  .dashboard-header {
    grid-template-columns: auto minmax(210px, 1fr) auto;
  }

  .dashboard-header-tail {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .dashboard-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-operational-grid {
    grid-template-columns: minmax(0, 1fr) 390px;
  }

  .dashboard-patient-results {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 420px));
  }
}

/* Antes de comprimir el buscador, la barra divide navegación y herramientas. */
@media (max-width: 1600px) {
  .dashboard-control-bar:has(.dashboard-tabs.is-directory) {
    display: flex;
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-control-bar:has(.dashboard-tabs.is-directory) .dashboard-search-tools {
    width: 100%;
  }

  .dashboard-control-bar:has(.dashboard-tabs.is-directory) .dashboard-search {
    flex: 1 1 420px;
    min-width: 280px;
    margin-left: 0;
  }
}

@media (max-width: 1080px) {
  .dashboard-header {
    position: relative;
    grid-template-columns: auto 1fr;
  }

  .dashboard-primary-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .dashboard-header-tail {
    grid-column: 1 / -1;
    justify-content: space-between;
  }

  .dashboard-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-operational-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-sidebar {
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-control-bar {
    display: flex;
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-search-tools {
    display: flex;
  }

  .dashboard-search-tools,
  .dashboard-search {
    width: 100%;
  }

  .dashboard-search { margin-left: 0; }

  .dashboard-filter-panel > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .dashboard-header {
    gap: 12px;
    padding: 13px 15px;
  }

  .dashboard-brand strong {
    font-size: 22px;
  }

  .dashboard-brand small,
  .dashboard-plan-preview,
  .dashboard-today,
  .dashboard-registration-link {
    display: none;
  }

  .dashboard-professional-picker {
    grid-column: 1 / -1;
  }

  .dashboard-primary-actions {
    grid-column: auto;
  }

  .dashboard-primary-actions .dashboard-new-patient {
    min-height: 43px;
    padding: 0 13px;
  }

  .dashboard-header-tail {
    grid-column: auto;
    gap: 7px;
  }

  .dashboard-agenda-link {
    min-height: 43px;
    padding: 0 13px;
  }

  .dashboard-agenda-link {
    font-size: 0;
  }

  .dashboard-agenda-link .app-icon {
    margin: 0;
  }

  .dashboard-tutorial,
  .dashboard-logout {
    width: 43px;
    height: 43px;
  }

  .dashboard-body {
    width: min(100% - 24px, 1600px);
    padding-top: 20px;
  }

  .dashboard-metrics {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding: 2px 2px 10px;
    scroll-snap-type: x proximity;
  }

  .dashboard-metric-card {
    min-width: 250px;
    min-height: 132px;
    padding: 19px;
    scroll-snap-align: start;
  }

  .dashboard-control-bar {
    margin-top: 22px;
  }

  .dashboard-tabs {
    width: 100%;
  }

  .dashboard-tabs button {
    min-width: 0;
    flex: 1;
    justify-content: center;
    padding: 0 10px;
    font-size: 15px;
  }

  .dashboard-search-tools {
    flex-wrap: wrap;
  }

  .dashboard-mobile-active-consultation {
    display: grid;
    width: 100%;
    gap: 4px;
    padding: 13px 14px;
    border: 1px solid #cfc7fb;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, #3f36a4, #5642bc);
    box-shadow: 0 7px 16px rgba(56, 45, 152, .15);
  }

  .dashboard-mobile-active-consultation > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #dedaff;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .055em;
    text-transform: uppercase;
  }

  .dashboard-mobile-active-consultation > header span { display: inline-flex; align-items: center; gap: 6px; }
  .dashboard-mobile-active-consultation > header .app-icon { width: 15px; height: 15px; color: #51d6a5; }
  .dashboard-mobile-active-consultation time { padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: 11px; letter-spacing: 0; text-transform: none; }
  .dashboard-mobile-active-consultation > strong { overflow: hidden; font-size: 17px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
  .dashboard-mobile-active-consultation > small { overflow: hidden; color: #d3cef3; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  .dashboard-mobile-active-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 42px; gap: 7px; margin-top: 6px; }
  .dashboard-mobile-active-actions button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; color: #fff; background: rgba(255,255,255,.09); font: inherit; font-size: 12px; font-weight: 700; }
  .dashboard-mobile-active-actions button:nth-child(2) { border-color: transparent; background: #0eaf7b; }
  .dashboard-mobile-active-actions .app-icon { width: 15px; height: 15px; }

  .dashboard-search {
    flex-basis: 100%;
    width: 100%;
    margin-left: 0;
  }

  .dashboard-filter-panel > div,
  .dashboard-sidebar,
  .dashboard-patient-results {
    grid-template-columns: 1fr;
  }

  .dashboard-operational-grid {
    margin-top: 20px;
  }

  .dashboard-appointment-card {
    grid-template-columns: 76px minmax(0, 1fr) auto;
    gap: 13px;
    padding: 13px;
  }

  .dashboard-appointment-time {
    min-height: 72px;
  }

  .dashboard-appointment-time strong {
    font-size: 21px;
  }

  .dashboard-appointment-primary {
    grid-column: 2 / -1;
    width: 100%;
  }

  .dashboard-closed-actions {
    grid-column: 2 / -1;
    width: 100%;
    min-width: 0;
    justify-content: stretch;
  }

  .dashboard-closed-actions button {
    flex: 1 1 0;
  }

  .dashboard-appointment-controls {
    grid-column: 3;
    grid-row: 1;
  }

  .dashboard-appointment-controls > button:first-child { display: grid; }

  .dashboard-appointment-controls > .dashboard-mark-absent {
    width: 47px;
    min-width: 47px;
    padding: 0;
  }

  .dashboard-appointment-controls > .dashboard-mark-absent span {
    display: none;
  }

  .dashboard-patient-results.is-compact .dashboard-patient-card {
    grid-template-columns: 54px 1fr;
  }

  .dashboard-patient-results.is-compact .dashboard-patient-secondary,
  .dashboard-patient-results.is-compact .dashboard-patient-actions {
    grid-column: 1 / -1;
    width: auto;
  }

  .record-consultation-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .record-consultation-actions > span {
    margin: 0 0 3px;
  }
}

/* Barra de jornada y directorio: tamaños que no se rompen al compactarse. */
@media (max-width: 1420px) {
  .dashboard-header { top: 64px; }
  .dashboard-metrics { grid-template-columns: repeat(3, minmax(210px, 1fr)); }
}

@media (max-width: 1080px) {
  .dashboard-header { justify-content: space-between; }
  .dashboard-professional-picker { flex: 1 1 310px; }
  .dashboard-primary-actions { flex: 0 1 auto; }
  .dashboard-header-tail { width: 100%; margin-left: 0; justify-content: space-between; }
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(210px, 1fr)); }
}

@media (max-width: 760px) {
  .dashboard-header { position: relative; top: auto; align-items: stretch; }
  .dashboard-professional-picker { width: 100%; min-width: 0; }
  .dashboard-primary-actions { width: 100%; }
  .dashboard-primary-actions button { flex: 1 1 0; min-width: 0; padding: 0 12px; }
  .dashboard-registration-link { display: inline-flex; }
  .dashboard-header-tail { width: 100%; gap: 8px; }
  .dashboard-today { display: inline-flex; min-width: 0; flex: 1 1 175px; }
  .dashboard-today b { overflow: hidden; text-overflow: ellipsis; }
  .dashboard-agenda-link { font-size: 14px; }
  .dashboard-patient-card { grid-template-columns: 64px 1fr; padding: 18px; }
  .dashboard-patient-avatar { width: 64px; height: 64px; }
  .dashboard-patient-secondary { grid-template-columns: 1fr; }
  .dashboard-patient-actions button { font-size: 13px; }
}

/* Tablets: estabilizamos las tres familias de controles antes del corte móvil. */
@media (min-width: 761px) and (max-width: 1280px) {
  .dashboard-header {
    position: relative;
    top: auto;
    display: grid;
    grid-template-columns: minmax(250px, 1fr) auto;
    align-items: center;
  }

  .dashboard-professional-picker { width: 100%; min-width: 0; }
  .dashboard-primary-actions { grid-column: 2; justify-content: flex-end; }
  .dashboard-header-tail {
    grid-column: 1 / -1;
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }
}

@media (min-width: 761px) and (max-width: 1080px) {
  .dashboard-search-tools {
    display: flex;
    width: 100%;
  }

  .dashboard-search { width: 100%; min-width: 0; }
  .dashboard-tabs { width: 100%; }
}

/* Centro de ayuda interactivo para Fichas y Agenda. */
.tutorial-hub-dialog { width: min(780px, calc(100% - 28px)); max-width: none; max-height: min(820px, calc(100vh - 28px)); padding: 0; overflow: hidden; border: 0; border-radius: 22px; color: #334155; background: #fff; box-shadow: 0 30px 90px rgba(17,25,54,.38); }
.tutorial-hub-dialog[open] { animation: legacy-modal-arrival 220ms cubic-bezier(.2,.72,.2,1) both; }
.tutorial-hub-dialog::backdrop { background: rgba(17,25,54,.68); backdrop-filter: blur(4px); }
.tutorial-hub-dialog > article { display: flex; max-height: min(820px, calc(100vh - 28px)); flex-direction: column; margin: 0; overflow: hidden; }
.tutorial-hub-header { display: flex; flex: 0 0 auto; min-height: 94px; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 24px; color: #fff; background: linear-gradient(128deg, #247ee6, #5449d5 76%); }
.tutorial-hub-heading { display: flex; min-width: 0; align-items: center; gap: 14px; }
.tutorial-hub-symbol { display: grid; width: 50px; height: 50px; flex: 0 0 50px; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 15px; background: rgba(255,255,255,.14); }
.tutorial-hub-symbol .app-icon { width: 25px; height: 25px; }
.tutorial-hub-heading p { margin: 0 0 4px; color: #cfe3ff; font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.tutorial-hub-heading h2 { margin: 0; color: #fff; font-size: 23px; font-weight: 850; letter-spacing: -.02em; }
.tutorial-hub-header > button { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: #fff; background: rgba(255,255,255,.11); }
.tutorial-hub-header > button:hover, .tutorial-hub-header > button:focus-visible { background: rgba(255,255,255,.22); outline: 2px solid rgba(255,255,255,.72); outline-offset: 2px; }
.tutorial-hub-header > button .app-icon { width: 17px; height: 17px; }
.tutorial-hub-body { flex: 1 1 auto; min-height: 0; padding: 24px; overflow-y: auto; background: #f7f9fd; }
.tutorial-hub-description { margin: 0 0 18px; color: #64748b; font-size: 14px; font-weight: 650; line-height: 1.55; }
.tutorial-hub-list { display: grid; gap: 12px; }
.tutorial-hub-card { display: grid; width: 100%; min-height: 96px; grid-template-columns: 50px minmax(0,1fr) auto; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid #dce6f2; border-radius: 16px; color: #334155; background: #fff; box-shadow: 0 5px 18px rgba(46,72,112,.06); font: inherit; text-align: left; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.tutorial-hub-card:not(:disabled) { cursor: pointer; }
.tutorial-hub-card:not(:disabled):hover, .tutorial-hub-card:not(:disabled):focus-visible { border-color: #79aef0; box-shadow: 0 10px 24px rgba(45,118,210,.13); outline: 0; transform: translateY(-2px); }
.tutorial-hub-card-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; color: #287fdf; background: #eaf4ff; }
.tutorial-hub-card-icon .app-icon { width: 22px; height: 22px; }
.tutorial-hub-card.is-hints .tutorial-hub-card-icon { color: #8350c1; background: #f3ebfc; }
.tutorial-hub-card.is-planned { border-style: dashed; background: #fafbfe; box-shadow: none; opacity: .72; }
.tutorial-hub-card.is-planned .tutorial-hub-card-icon { color: #7b8797; background: #edf1f5; }
.tutorial-hub-card-copy { display: grid; min-width: 0; gap: 5px; }
.tutorial-hub-card-copy strong { color: #26374d; font-size: 15px; font-weight: 850; }
.tutorial-hub-card-copy small { color: #708095; font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.tutorial-hub-card-meta { display: flex; min-width: 92px; align-items: center; justify-content: flex-end; gap: 9px; color: #8090a4; }
.tutorial-hub-card-meta > b { font-size: 11px; font-weight: 850; white-space: nowrap; }
.tutorial-hub-card-meta > b.is-complete { display: inline-flex; min-height: 30px; align-items: center; gap: 6px; padding: 0 9px 0 5px; border: 1px solid #bfe9d3; border-radius: 999px; color: #137654; background: linear-gradient(135deg,#effcf5,#e4f8ed); box-shadow: 0 5px 13px rgba(23,132,89,.1); }
.tutorial-hub-card-meta > .app-icon { width: 15px; height: 15px; }
.tutorial-hub-card-meta .is-complete .app-icon { display: grid; width: 21px; height: 21px; place-items: center; padding: 3px; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#21b879,#168f63); box-shadow: 0 3px 7px rgba(14,132,83,.28); }
.tutorial-hub-footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; border-top: 1px solid #e2e8f0; color: #64748b; background: #fff; font-size: 11.5px; font-weight: 700; text-align: center; }
.tutorial-hub-footer .app-icon { width: 15px; height: 15px; color: #1c9365; }

/* Ayuda libre: marcadores discretos y pulsables, sin interrumpir la pantalla. */
.tutorial-hints-toolbar { position: fixed; z-index: 1000002; right: 50%; bottom: 24px; display: flex; min-height: 52px; align-items: center; gap: 16px; padding: 9px 10px 9px 17px; border: 1px solid rgba(255,255,255,.25); border-radius: 16px; color: #fff; background: #26364d; box-shadow: 0 16px 42px rgba(18,29,46,.32); font-size: 13px; font-weight: 750; transform: translateX(50%); }
.tutorial-hints-toolbar > span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tutorial-hints-toolbar .app-icon { width: 17px; height: 17px; color: #99d4ff; }
.tutorial-hints-toolbar button { min-height: 34px; padding: 0 13px; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; color: #fff; background: rgba(255,255,255,.12); font: 800 11px/1 var(--font-family); }
.tutorial-hints-toolbar button:hover, .tutorial-hints-toolbar button:focus-visible { background: rgba(255,255,255,.22); outline: 2px solid rgba(174,211,255,.9); outline-offset: 2px; }

.tutorial-completion-dialog { width: min(438px, calc(100% - 28px)); padding: 0; overflow: hidden; border: 0; border-radius: 26px; color: #314258; background: #fff; box-shadow: 0 30px 90px rgba(13,25,69,.38); }
.tutorial-completion-dialog[open] { animation: tutorial-reward-arrival 430ms cubic-bezier(.16,.9,.27,1) both; }
.tutorial-completion-dialog::backdrop { background: rgba(18,25,74,.64); backdrop-filter: blur(5px); }
.tutorial-completion-dialog > article { overflow: hidden; }
.tutorial-completion-hero { position: relative; display: grid; min-height: 228px; place-items: center; padding: 27px 28px 24px; overflow: hidden; color: #fff; background: radial-gradient(circle at 50% 23%, rgba(135,211,255,.42), transparent 28%), linear-gradient(135deg,#1674eb 0%,#3557df 49%,#7048da 100%); text-align: center; isolation: isolate; }
.tutorial-completion-hero > p, .tutorial-completion-hero > h2 { position: relative; z-index: 2; margin: 0; }
.tutorial-completion-hero > p { margin-top: 8px; color: #d5eaff; font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.tutorial-completion-hero > h2 { margin-top: 4px; color: #fff; font-size: 28px; font-weight: 900; letter-spacing: -.035em; }
.tutorial-completion-hero > button { position: absolute; z-index: 4; top: 15px; right: 15px; display: grid; width: 36px; height: 36px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; color: #fff; background: rgba(13,30,110,.18); }
.tutorial-completion-hero > button:hover, .tutorial-completion-hero > button:focus-visible { background: rgba(255,255,255,.2); outline: 2px solid rgba(255,255,255,.8); outline-offset: 2px; }
.tutorial-completion-hero > button .app-icon { width: 16px; height: 16px; }
.tutorial-completion-medal { position: relative; z-index: 2; display: grid; width: 84px; height: 84px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.17); box-shadow: 0 0 0 11px rgba(255,255,255,.08), 0 0 40px rgba(157,221,255,.72); }
.tutorial-completion-medal span { display: grid; width: 64px; height: 64px; place-items: center; border: 3px solid rgba(255,255,255,.88); border-radius: 50%; background: linear-gradient(145deg,#1df0c6,#1b9fe8); box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 8px 20px rgba(12,55,173,.36); }
.tutorial-completion-medal .app-icon { width: 34px; height: 34px; color: #fff; stroke-width: 3; }
.tutorial-completion-confetti { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.tutorial-completion-confetti i { position: absolute; width: 8px; height: 15px; border-radius: 3px; background: #fbe66a; animation: tutorial-reward-confetti 1.9s ease-in-out infinite; }
.tutorial-completion-confetti i:nth-child(1) { top: 21px; left: 18%; background: #fbe66a; animation-delay: -.2s; }.tutorial-completion-confetti i:nth-child(2) { top: 47px; left: 31%; background: #bc86ff; animation-delay: -.8s; }.tutorial-completion-confetti i:nth-child(3) { top: 29px; right: 23%; background: #a2e7ff; animation-delay: -.45s; }.tutorial-completion-confetti i:nth-child(4) { top: 74px; right: 11%; background: #ff9ccf; animation-delay: -1.1s; }.tutorial-completion-confetti i:nth-child(5) { bottom: 29px; left: 12%; background: #a2e7ff; animation-delay: -.65s; }.tutorial-completion-confetti i:nth-child(6) { bottom: 17px; left: 29%; background: #ff9ccf; animation-delay: -1.25s; }.tutorial-completion-confetti i:nth-child(7) { bottom: 38px; right: 21%; background: #fbe66a; animation-delay: -.95s; }.tutorial-completion-confetti i:nth-child(8) { bottom: 16px; right: 8%; background: #bc86ff; animation-delay: -.35s; }
.tutorial-completion-body { display: grid; gap: 16px; padding: 25px 28px 28px; text-align: center; }
.tutorial-completion-body > p { margin: 0; color: #61728a; font-size: 14px; font-weight: 650; line-height: 1.55; }
.tutorial-completion-progress { display: inline-flex; justify-self: center; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #d6eee5; border-radius: 999px; color: #238363; background: #f0fbf6; font-size: 11.5px; font-weight: 800; }
.tutorial-completion-progress .app-icon { width: 16px; height: 16px; }
.tutorial-completion-actions { display: grid; gap: 9px; }
.tutorial-completion-actions > button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 9px; padding: 0 22px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(135deg,#267ee5,#5a4bd6); box-shadow: 0 9px 20px rgba(54,82,197,.27); font: 850 13px/1 var(--font-family); }
.tutorial-completion-actions > button:hover, .tutorial-completion-actions > button:focus-visible { box-shadow: 0 12px 25px rgba(54,82,197,.38); outline: 3px solid #b7d7ff; outline-offset: 3px; transform: translateY(-1px); }
.tutorial-completion-actions > button .app-icon { width: 16px; height: 16px; }
.tutorial-completion-actions > #tutorialCompletionDirectory { border: 1px solid #b9d6f8; color: #2878c9; background: #eef7ff; box-shadow: none; }
.tutorial-completion-actions > #tutorialCompletionDirectory:hover, .tutorial-completion-actions > #tutorialCompletionDirectory:focus-visible { border-color: #82b8ef; color: #1d67b2; background: #e3f2ff; box-shadow: 0 7px 17px rgba(43,118,208,.14); }
.tutorial-completion-actions > .tutorial-completion-dismiss { border: 1px solid #dbe4ef; color: #52647a; background: #fff; box-shadow: none; }
.tutorial-completion-actions > .tutorial-completion-dismiss:hover, .tutorial-completion-actions > .tutorial-completion-dismiss:focus-visible { border-color: #b8c9dc; color: #344a63; background: #f6f9fc; box-shadow: 0 7px 17px rgba(43,74,110,.12); }
@keyframes tutorial-reward-arrival { from { opacity: 0; transform: translateY(22px) scale(.93); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes tutorial-reward-confetti { 0%, 100% { opacity: .45; transform: translateY(0) rotate(0deg); } 50% { opacity: 1; transform: translateY(8px) rotate(140deg); } }

.tutorial-exit-dialog { width: min(420px, calc(100% - 28px)); padding: 0; overflow: hidden; border: 0; border-radius: 20px; color: #314258; background: #fff; box-shadow: 0 28px 80px rgba(13,25,69,.38); }
.tutorial-exit-dialog[open] { animation: legacy-modal-arrival 180ms cubic-bezier(.2,.72,.2,1) both; }
.tutorial-exit-dialog::backdrop { background: rgba(18,25,74,.38); backdrop-filter: blur(2px); }
.tutorial-exit-dialog > article { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 14px; padding: 24px; }
.tutorial-exit-symbol { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; color: #347fe0; background: linear-gradient(145deg, #e9f5ff, #eeebff); }
.tutorial-exit-symbol .app-icon { width: 24px; height: 24px; }
.tutorial-exit-copy { min-width: 0; padding-top: 2px; }
.tutorial-exit-copy h2 { margin: 0; color: #263c57; font-size: 20px; font-weight: 850; letter-spacing: -.02em; }
.tutorial-exit-copy p { margin: 8px 0 0; color: #687a91; font-size: 14px; font-weight: 600; line-height: 1.5; }
.tutorial-exit-actions { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: 9px; margin-top: 6px; }
.tutorial-exit-actions > button { min-height: 43px; padding: 0 16px; border-radius: 11px; font: 800 13px/1 var(--font-family); }
.tutorial-exit-actions > #tutorialExitCancel { border: 0; color: #fff; background: linear-gradient(135deg, #287fe3, #514bd3); box-shadow: 0 8px 17px rgba(54,82,197,.24); }
.tutorial-exit-actions > #tutorialExitConfirm { border: 1px solid #d7e0eb; color: #596b81; background: #fff; }
.tutorial-exit-actions > button:hover, .tutorial-exit-actions > button:focus-visible { outline: 3px solid #b7d7ff; outline-offset: 3px; transform: translateY(-1px); }
.tutorial-exit-actions > #tutorialExitConfirm:hover, .tutorial-exit-actions > #tutorialExitConfirm:focus-visible { border-color: #b8c9dc; color: #344a63; background: #f6f9fc; }

.driver-hint.burotec-hint-beacon { width: 40px; height: 40px; overflow: visible; border-radius: 50%; background: transparent; filter: none; }
.driver-hint.burotec-hint-beacon .driver-hint-dot { inset: 4px; z-index: 2; border: 2px solid rgba(255,255,255,.94); border-radius: 50%; background: linear-gradient(135deg, #3388ff 0%, #245de8 55%, #7652e7 100%); box-shadow: 0 0 0 3px rgba(70,112,255,.26), 0 0 18px rgba(55,97,255,.88), 0 7px 18px rgba(46,47,169,.44); }
.driver-hint.burotec-hint-beacon .driver-hint-pulse { inset: 0; z-index: 1; border: 2px solid #7159f2; border-radius: 50%; background: rgba(83,101,255,.12); box-shadow: 0 0 0 5px rgba(76,105,255,.18), 0 0 24px rgba(93,72,238,.76); opacity: .9; animation: burotec-help-beacon 1.45s cubic-bezier(.2,.7,.35,1) infinite; }
.driver-hint.burotec-hint-beacon .burotec-hint-symbol { position: absolute; z-index: 3; inset: 11px; width: 18px; height: 18px; color: #fff; filter: drop-shadow(0 1px 2px rgba(13,58,151,.45)); pointer-events: none; }
@keyframes burotec-help-beacon { 0% { opacity: .95; transform: scale(.8); } 52% { opacity: .78; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.45); } }

.driver-popover.burotec-driver-popover { width: min(380px, calc(100vw - 28px)); max-width: none; overflow: visible; padding: 20px; border: 1px solid #d9e5f2; border-radius: 17px; color: #334155; background: #fff; box-shadow: 0 20px 55px rgba(17,35,65,.27); }
.driver-popover.burotec-driver-popover .tutorial-popover-scroll { max-height: min(540px, calc(100vh - 150px)); overflow-x: hidden; overflow-y: auto; padding-right: 2px; }
.driver-popover.burotec-driver-popover .driver-popover-title { padding-right: 25px; color: #24364d; font: 850 20px/1.25 var(--font-family); letter-spacing: -.018em; }
.driver-popover.burotec-driver-popover .driver-popover-title:has(.tutorial-popover-icon) { display: flex; align-items: center; gap: 10px; }
.driver-popover.burotec-driver-popover .tutorial-popover-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 11px; color: #397fe1; background: linear-gradient(145deg, #edf7ff, #ebeaff); }
.driver-popover.burotec-driver-popover .tutorial-popover-icon .app-icon { width: 19px; height: 19px; }
.driver-popover.burotec-driver-popover .driver-popover-description { margin-top: 10px; color: #63748a; font: 600 15px/1.55 var(--font-family); }
.driver-popover.burotec-driver-popover .tutorial-popover-points { display: grid; gap: 0; margin: 14px 0 0; padding: 0; border-top: 1px solid #e2eaf4; list-style: none; }
.driver-popover.burotec-driver-popover .tutorial-popover-points li { display: grid; min-width: 0; grid-template-columns: 28px minmax(0,1fr); align-items: start; gap: 9px; padding: 10px 1px; border-bottom: 1px solid #e2eaf4; }
.driver-popover.burotec-driver-popover .tutorial-popover-point-icon { display: grid; width: 24px; height: 24px; place-items: center; padding: 4px; border-radius: 8px; color: #397fe1; background: #edf5ff; }
.driver-popover.burotec-driver-popover .tutorial-popover-point-copy { display: grid; min-width: 0; gap: 2px; }
.driver-popover.burotec-driver-popover .tutorial-popover-points strong { min-width: 0; color: #294f80; font: 850 12px/1.25 var(--font-family); }
.driver-popover.burotec-driver-popover .tutorial-popover-point-copy > span { color: #61748c; font: 650 12px/1.38 var(--font-family); }
.driver-popover.burotec-driver-popover .tutorial-popover-tip { display: flex; align-items: flex-start; gap: 7px; margin: 13px 0 0; padding: 10px 11px; border: 1px solid #d8e6f5; border-radius: 10px; color: #49657f; background: #f5f9fe; font: 700 13px/1.42 var(--font-family); }
.driver-popover.burotec-driver-popover .tutorial-popover-tip .app-icon { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; color: #7557d8; }
.driver-popover.burotec-driver-popover .driver-popover-close-btn { top: 12px; right: 13px; width: 30px; height: 30px; padding: 0; border-radius: 50%; color: #708095; font-size: 24px; }
.driver-popover.burotec-driver-popover .driver-popover-close-btn:hover { color: #1f73cf; background: #eaf4ff; }
.driver-popover.burotec-driver-popover .driver-popover-footer { margin-top: 18px; }
.driver-popover.burotec-driver-popover .driver-popover-progress-text { color: #8290a2; font: 750 12px/1 var(--font-family); }
.driver-popover.burotec-driver-popover .driver-popover-footer button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; font: 850 13px/1 var(--font-family); text-shadow: none; }
.driver-popover.burotec-driver-popover .driver-popover-prev-btn { color: #52647a; background: #eef2f7; }
.driver-popover.burotec-driver-popover .driver-popover-next-btn { color: #fff; background: linear-gradient(135deg, #287fe3, #514bd3); }
.driver-popover.burotec-driver-popover .driver-popover-footer button:hover, .driver-popover.burotec-driver-popover .driver-popover-footer button:focus-visible { box-shadow: 0 5px 13px rgba(40,94,176,.2); outline: 2px solid #aed3ff; outline-offset: 2px; }
.driver-popover.burotec-driver-popover.is-tutorial-compact { width: min(320px, calc(100vw - 28px)); padding: 16px; }
.driver-popover.burotec-driver-popover.is-tutorial-compact .driver-popover-title { font-size: 18px; }
.driver-popover.burotec-driver-popover.is-tutorial-compact .tutorial-popover-icon { width: 30px; height: 30px; flex-basis: 30px; border-radius: 9px; }
.driver-popover.burotec-driver-popover.is-tutorial-compact .tutorial-popover-icon .app-icon { width: 17px; height: 17px; }
.driver-popover.burotec-driver-popover.is-tutorial-compact .driver-popover-description { margin-top: 8px; font-size: 14px; line-height: 1.45; }
.driver-popover.burotec-driver-popover.is-tutorial-compact .tutorial-popover-tip { margin-top: 10px; padding: 8px 9px; font-size: 12px; }
.driver-popover.burotec-driver-popover.is-tutorial-compact .driver-popover-footer { margin-top: 14px; }

/* Recorrido principal: la mira y la ventana se miden en vivo, sin depender del
   recorte SVG de Driver. Esto evita que el scroll o un cambio de vista las separe. */
.tutorial-live-backdrop { position: fixed; z-index: 1000000; inset: 0; background: rgba(17,25,54,.64); cursor: default; }
.tutorial-live-backdrop.has-focus { background: transparent; }
.tutorial-live-target.is-tutorial-live-visible { position: relative !important; z-index: 1000001 !important; outline: 2px solid #71a9ff !important; outline-offset: 5px !important; box-shadow: 0 0 0 8px rgba(73,126,255,.22), 0 0 0 9999px rgba(17,25,54,.64) !important; pointer-events: none !important; }
.tutorial-live-target.is-tutorial-live-visible * { pointer-events: none !important; }
.driver-popover.burotec-driver-popover.tutorial-live-popover { position: fixed; z-index: 1000002; box-sizing: border-box; margin: 0; transform: none; pointer-events: auto; }
.driver-popover.burotec-driver-popover.tutorial-live-popover::before { position: absolute; z-index: -1; display: block; width: 14px; height: 14px; border: 1px solid #d9e5f2; background: #fff; content: ''; transform: rotate(45deg); }
.driver-popover.burotec-driver-popover.tutorial-live-popover.is-side-right::before { top: calc(var(--tutorial-arrow-position) - 7px); left: -8px; border-top: 0; border-right: 0; }
.driver-popover.burotec-driver-popover.tutorial-live-popover.is-side-left::before { top: calc(var(--tutorial-arrow-position) - 7px); right: -8px; border-bottom: 0; border-left: 0; }
.driver-popover.burotec-driver-popover.tutorial-live-popover.is-side-bottom::before { top: -8px; left: calc(var(--tutorial-arrow-position) - 7px); border-right: 0; border-bottom: 0; }
.driver-popover.burotec-driver-popover.tutorial-live-popover.is-side-top::before { bottom: -8px; left: calc(var(--tutorial-arrow-position) - 7px); border-top: 0; border-left: 0; }
.driver-popover.burotec-driver-popover.tutorial-live-popover.is-side-center::before,
.driver-popover.burotec-driver-popover.tutorial-live-popover.is-mobile-sheet::before { display: none; }
.driver-popover.burotec-driver-popover.tutorial-live-popover .tutorial-live-extras:empty { display: none; }
.driver-popover.burotec-driver-popover.tutorial-live-popover .driver-popover-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.driver-popover.burotec-driver-popover.tutorial-live-popover .driver-popover-navigation-btns { display: flex; align-items: center; gap: 8px; }
.driver-popover.burotec-driver-popover.tutorial-live-popover .driver-popover-prev-btn:disabled { opacity: .48; cursor: default; box-shadow: none; outline: 0; }

/* Cobros y deuda: flujos del legacy, modernizados dentro de la misma ficha. */
.legacy-finance-dialog { width: min(940px, calc(100% - 28px)); max-width: none; max-height: 90vh; padding: 0; overflow: hidden; border: 0; border-radius: 12px; color: #505968; background: #fff; box-shadow: 0 28px 80px rgba(20,31,59,.36); }
.legacy-finance-dialog[open] { animation: legacy-modal-arrival 240ms cubic-bezier(.2,.72,.2,1) both; }
.legacy-finance-dialog::backdrop { background: rgba(21,29,57,.62); backdrop-filter: blur(3px); }
.legacy-finance-dialog > article, .legacy-finance-dialog > form { display: flex; max-height: 90vh; min-height: 0; flex-direction: column; overflow: hidden; }
.finance-dialog-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 18px; min-height: 80px; padding: 16px 24px; color: #fff; }
.finance-dialog-header.is-success { background: linear-gradient(120deg, #08b966, #15a85f); }
.finance-dialog-header.is-danger { background: linear-gradient(120deg, #ff4660, #e83655); }
.finance-dialog-header > div { display: flex; align-items: center; gap: 14px; }
.finance-dialog-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.17); }
.finance-dialog-icon .app-icon { width: 24px; height: 24px; }
.finance-dialog-header h2 { margin: 0; font-size: 19px; font-weight: 800; }
.finance-dialog-header p { margin: 4px 0 0; color: rgba(255,255,255,.9); font-size: 13px; font-weight: 600; }
.finance-dialog-header > button { display: grid; width: 40px; height: 40px; padding: 0; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.18); }
.finance-dialog-header > button .app-icon { width: 20px; height: 20px; }
.finance-dialog-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 22px 26px; }
.finance-dialog-status { margin: 0; padding: 48px 20px; color: #768294; font-size: 13px; font-weight: 600; text-align: center; }
.payment-history-dialog .finance-dialog-body { background: #f5faf7; }
.payment-history-dialog .payment-history-list { display: grid; max-height: 480px; min-width: 0; gap: 12px; overflow-x: hidden; overflow-y: auto; }
.payment-history-dialog .payment-history-list__intro { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; padding: 0 2px; color: #637268; }
.payment-history-dialog .payment-history-list__intro strong { color: #244b38; font-size: 14px; font-weight: 850; }
.payment-history-dialog .payment-history-list__intro span { font-size: 12px; font-weight: 650; }
.payment-history-dialog .payment-history-list__items { display: grid; min-width: 0; gap: 10px; }
.payment-history-dialog .payment-movement-card { display: grid; min-width: 0; gap: 14px; padding: 16px 18px; border: 1px solid #dce9e2; border-radius: 12px; background: #fff; box-shadow: 0 4px 14px rgba(28,75,52,.055); transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.payment-history-dialog .payment-movement-card:hover { border-color: #afd8c2; box-shadow: 0 8px 22px rgba(25,90,58,.1); transform: translateY(-1px); }
.payment-history-dialog .payment-movement-card > header { display: grid; min-width: 0; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 16px; }
.payment-history-dialog .payment-movement-card__identity { display: grid; min-width: 0; gap: 6px; }
.payment-history-dialog .payment-movement-card__identity > span { width: max-content; max-width: 100%; overflow: hidden; padding: 4px 8px; border-radius: 6px; color: #327154; background: #eaf7f0; font-size: 12px; font-weight: 850; letter-spacing: .035em; text-overflow: ellipsis; white-space: nowrap; }
.payment-history-dialog .payment-movement-card__identity strong { min-width: 0; overflow-wrap: anywhere; color: #263848; font-size: 15px; font-weight: 850; line-height: 1.35; }
.payment-history-dialog .payment-movement-card__state { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.payment-history-dialog .payment-movement-card__state > span { display: inline-flex; min-height: 30px; align-items: center; padding: 0 10px; border-radius: 999px; color: #19754b; background: #e5f7ed; font-size: 12px; font-weight: 850; }
.payment-history-dialog .payment-movement-card__state > span[data-state="PENDING"] { color: #9b6514; background: #fff3d5; }
.payment-history-dialog .payment-movement-card__state > span[data-state="VOIDED"],
.payment-history-dialog .payment-movement-card__state > span[data-state="REFUNDED"] { color: #6b7280; background: #eef1f4; }
.payment-history-dialog .payment-movement-card__state > span[data-state="NOT_RECEIVED"] { color: #b52f48; background: #ffe7ec; }
.payment-history-dialog .payment-movement-card__details { display: grid; min-width: 0; grid-template-columns: minmax(135px,.75fr) minmax(160px,1fr) minmax(320px,1.8fr); gap: 12px; }
.payment-history-dialog .payment-movement-card__detail { display: grid; min-width: 0; align-content: center; gap: 4px; padding: 11px 12px; border-radius: 9px; background: #f5f8f6; }
.payment-history-dialog .payment-movement-card__detail > span { color: #78857d; font-size: 12px; font-weight: 750; }
.payment-history-dialog .payment-movement-card__detail > strong { min-width: 0; overflow-wrap: anywhere; color: #34463c; font-size: 13px; font-weight: 800; line-height: 1.35; }
.payment-history-dialog .payment-movement-card__detail > small { color: #68776e; font-size: 12px; font-weight: 650; }
.payment-history-dialog .payment-movement-card__amounts { display: grid; min-width: 0; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 0; }
.payment-history-dialog .payment-movement-card__amounts > div { display: grid; min-width: 0; align-content: center; gap: 4px; padding: 9px 10px; border: 1px solid #e3ebe6; border-radius: 8px; background: #fff; }
.payment-history-dialog .payment-movement-card__amounts dt { color: #78857d; font-size: 12px; font-weight: 750; }
.payment-history-dialog .payment-movement-card__amounts dd { min-width: 0; margin: 0; color: #263d31; font-size: 13px; font-weight: 850; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.payment-history-dialog .payment-movement-card__amounts .is-debt dd { color: #d3324e; }
.payment-history-dialog .payment-confirm-button { min-height: 34px; padding: 0 12px; border: 1px solid #8fd8b3; border-radius: 8px; color: #09633a; background: #eaf9f1; font: inherit; font-size: 12px; font-weight: 850; letter-spacing: .035em; cursor: pointer; }
.payment-history-dialog .payment-confirm-button:hover { border-color: #2ca46b; background: #d9f4e6; }
.payment-history-dialog .payment-confirm-button:focus-visible { outline: 3px solid rgba(44,164,107,.24); outline-offset: 2px; }
.payment-history-dialog .payment-confirm-button:disabled { cursor: wait; opacity: .55; }
@media (max-width: 860px) {
  .payment-history-dialog .payment-movement-card__details { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .payment-history-dialog .payment-movement-card__amounts { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .payment-history-dialog .payment-history-list__intro { align-items: flex-start; flex-direction: column; gap: 3px; }
  .payment-history-dialog .payment-movement-card { gap: 12px; padding: 14px; }
  .payment-history-dialog .payment-movement-card > header { grid-template-columns: 1fr; gap: 10px; }
  .payment-history-dialog .payment-movement-card__state { justify-content: flex-start; flex-wrap: wrap; }
  .payment-history-dialog .payment-movement-card__details { grid-template-columns: 1fr; }
  .payment-history-dialog .payment-movement-card__amounts { grid-column: auto; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .payment-history-dialog .payment-movement-card__amounts > div:last-child { grid-column: 1 / -1; }
}
.finance-dialog-footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 16px; min-height: 72px; padding: 14px 24px; border-top: 1px solid #e2e8e5; background: #fbfdfc; }
.finance-dialog-footer p { margin: 0 auto 0 0; color: #4b5563; font-size: 14px; font-weight: 700; }
.finance-dialog-footer p strong { margin-left: 8px; color: #08a85d; font-size: 18px; font-weight: 900; }
.finance-dialog-footer > button { min-width: 140px; min-height: 48px; padding: 12px 24px; border: 1px solid #13aa63; border-radius: 8px; color: #fff; background: #13aa63; font-size: 13px; font-weight: 850; }
.finance-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; min-height: auto; }
.finance-form-grid > label { display: flex; min-width: 0; flex-direction: column; gap: 8px; color: #374151; font-size: 14px; font-weight: 800; }
.finance-form-grid label > span b { color: #e83e58; }
.payment-value-hint { color: #65758a; font-size: 11px; font-weight: 650; line-height: 1.4; }
.finance-form-grid input:not([type="checkbox"]), .finance-form-grid select, .finance-form-grid textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #d6dee6; border-radius: 8px; outline: 0; color: #374151; background: #fff; font: inherit; font-size: 14px; font-weight: 600; }
.finance-form-grid textarea { resize: vertical; min-height: 100px; padding: 12px 14px; }
.finance-form-grid input:focus, .finance-form-grid select:focus, .finance-form-grid textarea:focus { border-color: var(--legacy-blue); box-shadow: 0 0 0 3px rgba(45,127,240,.12); }
.finance-form-wide { grid-column: 1 / -1; }
.money-input { display: flex; align-items: center; overflow: hidden; border: 1px solid #d6dee6; border-radius: 8px; background: #f4f7f9; min-height: 48px; }
.money-input > span { padding: 0 16px; color: #4b5563; font-size: 15px; font-weight: 850; }
.money-input input { min-width: 0; border: 0 !important; border-left: 1px solid #d6dee6 !important; border-radius: 0 !important; box-shadow: none !important; min-height: 48px; font-size: 15px !important; font-weight: 800; padding: 10px 14px; }
.payment-balance { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-radius: 8px; color: #147345; background: #e7f8ef; font-size: 14px; font-weight: 750; }
.payment-balance strong { font-size: 18px; font-weight: 900; }
.payment-balance.has-debt { color: #c82f49; background: #ffe9ed; }
.payment-method-note { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border:1px solid #cee2f2; border-radius:10px; color:#315d7b; background:#f2f9ff; }
.payment-method-note .app-icon { width:20px; height:20px; flex:0 0 auto; }
.payment-method-note p { display:grid; gap:4px; margin:0; }
.payment-method-note strong,.payment-method-note span { display:block; }
.payment-method-note strong { font-size:12px; }
.payment-method-note span { color:#5d7486; font-size:11px; line-height:1.45; }
.apply-debt-checkbox { display: flex !important; min-height: 48px; align-items: center; flex-direction: row !important; gap: 12px; padding: 12px 16px; border: 1px solid #dbe8e2; border-radius: 8px; background: #f4fbf7; font-size: 14px; font-weight: 750; color: #2d3748; }
.apply-debt-checkbox[hidden] { display: none !important; }
.apply-debt-checkbox input { width: 20px; height: 20px; accent-color: #0bad60; }
.payment-debt-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; border: 1px solid #dce5ef; border-left: 4px solid var(--legacy-blue); border-radius: 8px; background: #f8fbff; }
.payment-debt-preview[hidden] { display: none; }
.payment-debt-preview > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 6px; background: #fff; font-size: 13px; font-weight: 750; }
.payment-debt-preview > div[hidden] { display: none; }
.payment-debt-preview > div strong { font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; }
.payment-debt-preview .is-debt { color: #e53752; }
.payment-debt-preview .is-credit { color: #0aa35d; }
.payment-debt-preview > label { display: flex; grid-column: 1 / -1; flex-direction: column; gap: 8px; color: #374151; font-size: 14px; font-weight: 800; }
.payment-debt-preview textarea { width: 100%; min-height: 90px; padding: 12px 14px; border: 1px solid #d6dee6; border-radius: 8px; color: #374151; background: #fff; font: inherit; font-size: 14px; font-weight: 600; resize: vertical; }
.finance-form-error { min-height: 20px; margin: 0; color: #bd2d45; font-size: 12px; font-weight: 700; }
.finance-form-actions { justify-content: flex-end; }
.finance-form-actions > button { min-width: 160px; min-height: 48px; font-size: 13px; font-weight: 850; border-radius: 8px; padding: 12px 24px; }
.finance-form-actions .finance-cancel-button { border-color: #aeb7c4; color: #4b5563; background: #fff; }
.finance-form-actions .finance-save-button.is-danger { border-color: #eb3f5a; background: #eb3f5a; }
.finance-save-button:disabled { cursor: wait; opacity: .65; }

/* Alta de paciente: composición y naranja eléctrico preservados del formulario legacy. */
.legacy-patient-dialog { width: min(1200px, calc(100% - 28px)); max-width: none; max-height: min(94vh, 960px); padding: 0; overflow: hidden; border: 0; border-radius: 8px; color: #4f5664; background: #fff; box-shadow: 0 28px 80px rgba(24,31,65,.34); }
.legacy-patient-dialog[open] { animation: legacy-modal-arrival 260ms cubic-bezier(.2,.72,.2,1) both; }
.legacy-patient-dialog::backdrop { background: rgba(21,29,57,.62); backdrop-filter: blur(3px); }
.legacy-patient-dialog form { display: flex; max-height: min(94vh, 960px); flex-direction: column; }
.new-patient-header { display: flex; flex: 0 0 auto; min-height: 72px; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 24px; color: #fff; background: #ff9100; }
.new-patient-header h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 20px; font-weight: 600; }
.new-patient-header h2 .app-icon { width: 30px; height: 30px; }
.new-patient-header > button { width: 40px; height: 40px; padding: 0; border: 0; color: #fff; background: transparent; font-size: 30px; line-height: 1; }
.new-patient-body { overflow-y: auto; padding: 20px 26px 10px; color: #d97000; scrollbar-width: thin; }
.new-patient-intro { margin: 0 0 16px; padding: 11px 14px; border-left: 4px solid #ff9100; color: #777067; background: #fff9f2; font-size: 12px; line-height: 1.5; }
.new-patient-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.new-patient-grid > label { display: flex; min-width: 0; min-height: 96px; flex-direction: column; gap: 7px; padding: 13px 18px; border-bottom: 1px solid #f1c68f; }
.new-patient-grid > label:nth-child(even) { border-left: 1px solid #f1c68f; }
.new-patient-grid label > span, .coverage-fields label > span { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.new-patient-grid label b, .coverage-fields label b { color: #e64629; }
.new-patient-grid small, .coverage-fields small { min-height: 15px; color: #666; font-size: 10px; line-height: 1.4; }
.new-patient-grid input, .new-patient-grid select, .new-patient-grid textarea, .coverage-fields input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #d9dde5; border-radius: 5px; outline: 0; color: #4c5360; background: #fff; font: inherit; font-size: 13px; transition: border-color .15s ease, box-shadow .15s ease; }
.new-patient-grid textarea { min-height: 90px; resize: vertical; }
.new-patient-grid input:focus, .new-patient-grid select:focus, .new-patient-grid textarea:focus, .coverage-fields input:focus { border-color: #ff9c1d; box-shadow: 0 0 0 3px rgba(255,145,0,.12); }
.coverage-editor { margin: 20px 0 10px; padding: 16px; border: 1px solid #f1c68f; border-radius: 6px; background: #fff9f2; }
.coverage-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 2px 12px; }
.coverage-heading h3 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 15px; }
.coverage-heading p { margin: 4px 0 0; color: #857c72; font-size: 11px; }
.coverage-heading > button { padding: 9px 14px; border: 0; border-radius: 5px; color: #fff; background: #d97000; font-size: 11px; font-weight: 700; }
.coverage-heading > button:disabled { cursor: default; opacity: .45; }
#coverageList { display: grid; gap: 12px; }
.coverage-entry { overflow: hidden; border: 1px solid #efc58f; border-radius: 6px; background: #fff; }
.coverage-entry-title { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid #f5d9b5; color: #a15300; background: #fffdf9; font-size: 12px; }
.coverage-entry-title button { padding: 6px 10px; border: 1px solid #d97000; border-radius: 4px; color: #d97000; background: transparent; font-size: 11px; }
.coverage-entry-title button:disabled { cursor: default; opacity: .35; }
.coverage-fields { display: grid; grid-template-columns: 2fr 1fr 1fr; }
.coverage-fields label { display: flex; min-width: 0; flex-direction: column; gap: 6px; padding: 12px; }
.coverage-fields label + label { border-left: 1px solid #f1c68f; }
.new-patient-clinical { margin-top: 12px; }
.new-patient-wide { grid-column: 1 / -1; border-left: 0 !important; }
.new-patient-error { min-height: 20px; margin: 8px 18px; color: #bc293d; font-size: 12px; font-weight: 600; }
.new-patient-footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 14px; padding: 15px 24px; border-top: 1px solid #e5e7ec; background: #fff; }
.new-patient-footer button { min-width: 130px; min-height: 44px; padding: 10px 18px; border-radius: 5px; font-size: 12px; font-weight: 800; }
.new-patient-cancel { border: 1px solid #d97000; color: #d97000; background: transparent; }
.new-patient-save { border: 1px solid #ff9100; color: #fff; background: #ff9100; }
.new-patient-save:disabled { cursor: wait; opacity: .65; }
.patient-edit-dialog .new-patient-header { background: var(--legacy-gradient); }
.patient-edit-dialog .new-patient-body { color: var(--legacy-blue); }
.patient-edit-dialog .new-patient-intro { border-left-color: var(--legacy-blue); color: #687487; background: #f5f9ff; }
.patient-edit-dialog .new-patient-grid > label { border-bottom-color: #d5e2f1; }
.patient-edit-dialog .new-patient-grid > label:nth-child(even) { border-left-color: #d5e2f1; }
.patient-edit-dialog .new-patient-grid input:focus, .patient-edit-dialog .new-patient-grid select:focus, .patient-edit-dialog .new-patient-grid textarea:focus, .patient-edit-dialog .coverage-fields input:focus { border-color: var(--legacy-blue); box-shadow: 0 0 0 3px rgba(45,127,240,.12); }
.patient-edit-dialog .edit-primary-coverage { border-color: #cadcf0; background: #f7fbff; }
.patient-edit-dialog .coverage-fields label + label { border-left-color: #d5e2f1; }
.patient-edit-dialog .new-patient-cancel { border-color: var(--legacy-blue); color: var(--legacy-blue); }
.patient-edit-dialog .new-patient-save { border-color: transparent; background: var(--legacy-gradient); }

/* Selectores propios: evita que el menú desplegable dependa del aspecto nativo del sistema. */
.smart-select { position: relative; width: 100%; min-width: 0; color: #344156; }
.smart-select-native,
.agenda-professional-select .smart-select-native,
.new-patient-grid .smart-select-native { position: absolute !important; width: 1px !important; min-width: 1px !important; height: 1px !important; min-height: 1px !important; inset: 50% auto auto 12px; padding: 0 !important; overflow: hidden; border: 0 !important; opacity: 0; pointer-events: none; }
.smart-select-trigger { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid #d3ddea; border-radius: 10px; outline: 0; color: #344156; background: linear-gradient(180deg, #fff, #fbfdff); box-shadow: 0 2px 5px rgba(31,53,82,.04); font: inherit; font-size: 14px; font-weight: 800; text-align: left; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.smart-select-trigger:hover { background: #fff; }
.smart-select-trigger:focus-visible,
.smart-select.is-open .smart-select-trigger { border-color: #3988df; box-shadow: 0 0 0 3px rgba(57,136,223,.13), 0 6px 16px rgba(39,87,143,.08); }
.smart-select-value { min-width: 0; font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smart-select-value.is-placeholder { color: #8d98a8; font-weight: 600; }
.smart-select-arrow { width: 10px; height: 10px; flex: 0 0 auto; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; color: #5681ae; transform: rotate(45deg) translateY(-2px); transition: transform .16s ease; }
.smart-select.is-open .smart-select-arrow { transform: rotate(225deg) translate(-2px, -1px); }
.smart-select-menu { position: absolute; z-index: 80; top: calc(100% + 7px); left: 0; width: 100%; min-width: max(100%, 240px); max-height: 300px; padding: 8px; overflow-y: auto; border: 1px solid #d9e3ee; border-radius: 13px; background: rgba(255,255,255,.99); box-shadow: 0 18px 46px rgba(30,48,75,.2); scrollbar-width: thin; }
.smart-select-menu[hidden] { display: none; }
.smart-select-option { display: flex; width: 100%; min-height: 46px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 0; border-radius: 9px; color: #344156; background: transparent; font: inherit; font-size: 14px; font-weight: 750; text-align: left; cursor: pointer; }
.smart-select-option:hover,
.smart-select-option:focus-visible { outline: 0; color: #277ccc; background: #edf6ff; }
.smart-select-option[aria-selected="true"] { color: #236fba; background: #e8f3ff; font-weight: 850; }
.smart-select-check { color: #2f86dd; font-size: 15px; font-weight: 850; opacity: 0; }
.smart-select-option[aria-selected="true"] .smart-select-check { opacity: 1; }
.smart-select.is-orange .smart-select-trigger:focus-visible,
.smart-select.is-orange.is-open .smart-select-trigger { border-color: #f29a2c; box-shadow: 0 0 0 3px rgba(242,154,44,.14), 0 6px 16px rgba(154,93,22,.08); }
.smart-select.is-orange .smart-select-option:hover,
.smart-select.is-orange .smart-select-option:focus-visible,
.smart-select.is-orange .smart-select-option[aria-selected="true"] { color: #b65c00; background: #fff2df; }
.smart-select.is-orange .smart-select-check { color: #e98213; }
.smart-select.is-purple .smart-select-trigger:focus-visible,
.smart-select.is-purple.is-open .smart-select-trigger { border-color: #9b58c1; box-shadow: 0 0 0 3px rgba(155,88,193,.13), 0 6px 16px rgba(99,49,129,.08); }
.smart-select.is-purple .smart-select-option:hover,
.smart-select.is-purple .smart-select-option:focus-visible,
.smart-select.is-purple .smart-select-option[aria-selected="true"] { color: #7d3ea3; background: #f7edfc; }
.smart-select.is-purple .smart-select-check { color: #9450bb; }
.smart-select.is-compact { width: auto; min-width: 66px; }
.smart-select.is-compact .smart-select-trigger { min-height: 28px; padding: 4px 8px; border-radius: 8px; font-size: 8px; }
.smart-select.is-compact .smart-select-menu { right: 0; left: auto; min-width: 120px; }
.smart-select.is-gold .smart-select-trigger { border: 0; color: #6f4b00; background: #ffd05a; box-shadow: none; }
.smart-select.is-gold .smart-select-option:hover,
.smart-select.is-gold .smart-select-option:focus-visible,
.smart-select.is-gold .smart-select-option[aria-selected="true"] { color: #754500; background: #fff2c8; }
.smart-select.is-gold .smart-select-check { color: #d47a00; }
.plan-preview-control .smart-select { min-width: 50px; }
.plan-preview-control .smart-select-trigger { min-height: 22px; padding: 3px 7px; border-radius: 999px; }
.history-annotation-actions .smart-select { flex: 0 1 190px; }
.new-patient-grid .smart-select-trigger { min-height: 44px; border-radius: 5px; font-size: 13px; }

/* Accesos a tutoriales: mismo tamaño, color y gesto en Fichas y Agenda. */
.tutorial-access-button,
.dashboard-tutorial {
  display: grid;
  width: 47px;
  height: 47px;
  flex: 0 0 47px;
  place-items: center;
  padding: 0;
  border: 2px solid #4d5ceb;
  border-radius: 12px;
  color: #4b51df;
  background: #fff;
  box-shadow: none;
  transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tutorial-access-button .app-icon,
.dashboard-tutorial .app-icon { width: 21px; height: 21px; }
.tutorial-access-button:hover,
.tutorial-access-button:focus-visible,
.tutorial-access-button:active,
.dashboard-tutorial:hover,
.dashboard-tutorial:focus-visible,
.dashboard-tutorial:active {
  border-color: #4d5ceb;
  color: #fff;
  background: linear-gradient(135deg, #287ff0, #7135d6);
  box-shadow: 0 8px 18px rgba(73,71,210,.25);
  outline: 0;
  transform: translateY(-2px);
}
.tutorial-access-button:active,
.dashboard-tutorial:active { transform: translateY(0) scale(.96); }

/* La ficha clínica conserva el mismo acceso, sin heredar el botón de edición. */
.legacy-profile-card > header .tutorial-access-button {
  display: grid;
  width: 47px;
  height: 47px;
  place-items: center;
  padding: 0;
  border: 2px solid #4d5ceb;
  border-radius: 12px;
  color: #4b51df;
  background: #fff;
  box-shadow: none;
}
.legacy-profile-card > header .tutorial-access-button:hover,
.legacy-profile-card > header .tutorial-access-button:focus-visible {
  border-color: #4d5ceb;
  color: #fff;
  background: linear-gradient(135deg, #287ff0, #7135d6);
  box-shadow: 0 8px 18px rgba(73,71,210,.22);
}

@media (max-width: 760px) {
  .tutorial-access-button,
  .dashboard-tutorial { width: 43px; height: 43px; flex-basis: 43px; }
  .legacy-profile-card > header .tutorial-access-button { width: 43px; height: 43px; }
}
/* Agenda propia de Burotec 2: sin FullCalendar ni dependencias pagas. */
.agenda-view { width: 100%; max-width: 1540px; margin: 0 auto; min-width: 0; padding: 12px 24px 48px; color: #283449; background: #f4f8fc; }
.agenda-utility-row { display: grid; width: 100%; grid-template-columns: auto minmax(0,1fr) 47px; align-items: stretch; gap: 10px; margin: 0 auto 10px; }
.agenda-page-heading { display: grid; grid-template-columns: 150px 1fr 150px; align-items: center; gap: 18px; margin-bottom: 16px; }
.agenda-page-heading > div { min-width: 0; text-align: center; }
.agenda-page-heading p { margin: 0 0 1px; color: #8a96a8; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.agenda-page-heading h1 { margin: 0; color: #2f7fd8; font-size: clamp(28px, 3.2vw, 42px); line-height: 1; letter-spacing: -.04em; }
.agenda-page-heading > div > span { display: block; margin-top: 6px; color: #7d899b; font-size: 12px; }
/* La navegación global ya identifica la sección: conservamos solo el regreso compacto al inicio. */
.agenda-page-heading { display: flex; justify-content: flex-start; margin: 0; }
.agenda-page-heading > div { display: none; }
.agenda-page-heading .agenda-back-button { min-height: 52px; padding: 7px 14px; border-radius: 16px; font-size: 13px; }
.agenda-page-heading .agenda-back-button span { width: 26px; height: 26px; }
.agenda-page-heading .agenda-back-button .app-icon { width: 15px; height: 15px; }
.agenda-utility-row .agenda-tutorial-button { align-self: center; justify-self: end; }
.agenda-primary-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 10px; padding: 12px 22px; border-radius: 12px; font-size: 14px; font-weight: 850; border: 0; color: #fff; background: var(--legacy-gradient); box-shadow: 0 8px 18px rgba(66,76,211,.2); }
.agenda-primary-button .app-icon { width: 18px; height: 18px; stroke-width: 2.4; }

.agenda-reminder-strip { display: flex; width: 100%; max-width: 1540px; margin: 0; min-height: 52px; align-items: center; padding: 8px 16px; overflow: visible; border: 1px solid #d9e7f5; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.98)); box-shadow: 0 8px 22px rgba(40,79,126,.06); }
.agenda-reminder-title { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; padding-right: 14px; border-right: 1px solid #dce5ef; white-space: nowrap; }
.agenda-reminder-title .app-icon { width: 18px; height: 18px; color: #f2b52c; fill: #f2b52c; stroke: #f2b52c; }
.agenda-reminder-title em { color: #2784dd; font-size: 12px; font-style: normal; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; }
.agenda-reminder-item { position: relative; display: inline-flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 8px; padding: 0 14px; border-right: 1px solid #dce5ef; color: #56657a; cursor: help; white-space: nowrap; }
.agenda-reminder-item:last-child { border-right: 0; }
.agenda-reminder-icon { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 50%; background: #eff6ff; }
.agenda-reminder-strip .app-icon { width: 16px; height: 16px; color: #2f91e5; }
.agenda-reminder-strip .agenda-whatsapp-icon { color: #12af63; }
.agenda-reminder-item small { overflow: hidden; color: #536175; font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.agenda-reminder-item b { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; color: #344156; background: #eff3f8; font-size: 11px; font-weight: 850; white-space: nowrap; }
.agenda-reminder-item b .app-icon { width: 13px; height: 13px; color: currentColor; }
.agenda-reminder-item.is-whatsapp .agenda-reminder-icon { background: #ebfbf2; }.agenda-reminder-item.is-whatsapp b.is-on { color: #fff; background: #0dcc62; }.agenda-reminder-item.is-whatsapp b.is-off { color: #b63c51; background: #fff0f2; }
.agenda-reminder-item.is-messages .agenda-reminder-icon { background: #edf8ef; }.agenda-reminder-item.is-messages .agenda-reminder-icon .app-icon { color: #2fb05d; }.agenda-reminder-item.is-messages.is-low .agenda-reminder-icon { background: #fcedf0; }.agenda-reminder-item.is-messages.is-low .agenda-reminder-icon .app-icon { color: #c94c60; }.agenda-reminder-item.is-messages b.is-ok { color: #fff; background: #0dcc62; }.agenda-reminder-item.is-messages b.is-low { color: #b63c51; background: #fff0f2; }
.agenda-reminder-item.is-expiration .agenda-reminder-icon { background: #fff7e8; }.agenda-reminder-item.is-expiration .app-icon { color: #f0a62c; }.agenda-reminder-item.is-expiration b.is-warn { color: #cc7d12; background: #fff0d8; }.agenda-reminder-item.is-expiration b.is-low { color: #b63c51; background: #fff0f2; }
.agenda-reminder-item.is-email .agenda-reminder-icon { background: #eef5ff; }.agenda-reminder-item.is-email b.is-on { color: #fff; background: #4588e9; }.agenda-reminder-item.is-email b.is-off { color: #b63c51; background: #fff0f2; }
.agenda-reminder-title[data-tooltip], .agenda-reminder-item[data-tooltip] { position: relative; cursor: help; }
.agenda-reminder-title[data-tooltip]::after, .agenda-reminder-item[data-tooltip]::after { position: absolute; z-index: 30; top: calc(100% + 11px); bottom: auto; left: 50%; width: max-content; max-width: 280px; padding: 10px 13px; border-radius: 11px; color: #fff; background: #354155; box-shadow: 0 10px 22px rgba(34,47,66,.18); content: attr(data-tooltip); font-size: 11px; font-weight: 650; line-height: 1.4; opacity: 0; pointer-events: none; text-align: center; transform: translate(-50%, -5px); transition: opacity .15s ease, transform .15s ease; white-space: normal; }
.agenda-reminder-title[data-tooltip]::before, .agenda-reminder-item[data-tooltip]::before { position: absolute; z-index: 31; top: calc(100% + 5px); bottom: auto; left: 50%; width: 10px; height: 10px; background: #354155; content: ''; opacity: 0; pointer-events: none; transform: translate(-50%, -5px) rotate(45deg); transition: opacity .15s ease, transform .15s ease; }
.agenda-reminder-title[data-tooltip]:hover::after, .agenda-reminder-title[data-tooltip]:focus-visible::after, .agenda-reminder-item[data-tooltip]:hover::after, .agenda-reminder-item[data-tooltip]:focus-visible::after, .agenda-reminder-title[data-tooltip]:hover::before, .agenda-reminder-title[data-tooltip]:focus-visible::before, .agenda-reminder-item[data-tooltip]:hover::before, .agenda-reminder-item[data-tooltip]:focus-visible::before { opacity: 1; transform: translate(-50%, 0); }
.agenda-reminder-popover { position: absolute; z-index: 30; top: calc(100% + 11px); bottom: auto; left: 50%; display: grid; width: max-content; min-width: 210px; max-width: 280px; gap: 7px; padding: 10px 13px; border: 1px solid #d7dee8; border-radius: 10px; color: #2f394a; background: #fff; box-shadow: 0 10px 22px rgba(34,47,66,.18); font-size: 11px; line-height: 1.35; opacity: 0; pointer-events: none; transform: translate(-50%, -5px); transition: opacity .15s ease, transform .15s ease; white-space: normal; }
.agenda-reminder-popover::after { position: absolute; bottom: calc(100% - 5px); top: auto; left: 50%; width: 10px; height: 10px; border-left: 1px solid #d7dee8; border-top: 1px solid #d7dee8; background: #fff; content: ''; transform: translateX(-50%) rotate(45deg); }
.agenda-reminder-popover strong { padding-bottom: 7px; border-bottom: 1px solid #e5eaf0; color: #394457; font-size: 12px; }.agenda-reminder-popover b { display: inline; padding: 0; color: #0ca754; background: transparent; }
.agenda-reminder-item.is-messages:hover .agenda-reminder-popover, .agenda-reminder-item.is-messages:focus-visible .agenda-reminder-popover { opacity: 1; transform: translate(-50%, 0); }

.agenda-toolbar-card { display: grid; width: 100%; max-width: 1540px; margin: 0 auto 10px; grid-template-columns: minmax(280px, 1fr) auto auto auto; align-items: center; gap: 14px; padding: 14px; border: 1px solid #dce5ef; border-radius: 16px; background: #fff; box-shadow: 0 8px 26px rgba(39,77,121,.07); }
.agenda-professional-select { display: flex; min-height: 46px; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid #cbdcf0; border-radius: 12px; color: #68778b; background: #fbfdff; }
.agenda-professional-select span { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; font-size: 14px; }
.agenda-professional-select .app-icon { width: 18px; height: 18px; color: #2f86dd; }
.agenda-professional-select select { width: 100%; min-width: 100px; border: 0; outline: 0; color: #23334b; background: transparent; font-size: 14px; font-weight: 800; }
.agenda-professional-select .smart-select { flex: 1 1 auto; min-width: 0; }
.agenda-professional-select .smart-select-trigger { min-height: 46px; padding-block: 7px; border: 0; background: transparent; box-shadow: none; font-size: 14px; font-weight: 850; }
.agenda-professional-select .smart-select-trigger:focus-visible,
.agenda-professional-select .smart-select.is-open .smart-select-trigger { box-shadow: none; }
.agenda-professional-select .smart-select-menu { left: -8px; width: calc(100% + 16px); }
.agenda-availability-button { display: inline-flex; height: 46px; align-items: center; gap: 8px; padding: 0 15px; border: 1px solid #cbdcf0; border-radius: 11px; color: #357fc8; background: #f8fbff; font-size: 13px; font-weight: 800; }
.agenda-availability-button .app-icon { width: 15px; height: 15px; }
.agenda-view-switch { display: flex; overflow: hidden; border: 1px solid #cbd9e8; border-radius: 11px; }
.agenda-view-switch button { height: 46px; padding: 0 18px; border: 0; border-right: 1px solid #d9e3ee; color: #657287; background: #fff; font-size: 14px; font-weight: 750; }
.agenda-view-switch button:last-child { border-right: 0; }
.agenda-view-switch button.is-active { color: #fff; background: linear-gradient(135deg, #208ff0, #5e34df); }
.agenda-date-navigation { display: flex; gap: 6px; }
.agenda-date-navigation button { display: grid; height: 46px; min-width: 46px; place-items: center; border: 0; border-radius: 10px; color: #fff; background: #317dc9; font-size: 14px; font-weight: 800; }
.agenda-date-navigation button:first-child { padding: 0 15px; background: #66a6df; }
.agenda-date-navigation .app-icon { width: 15px; height: 15px; }

.agenda-calendar-card { width: 100%; max-width: 1540px; margin: 0 auto; min-width: 0; overflow: hidden; border: 1px solid #d9e4ef; border-radius: 18px; background: #fff; box-shadow: 0 12px 34px rgba(38,74,119,.08); }
.agenda-calendar-card > header { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 20px; border-bottom: 1px solid #e2e9f1; background: linear-gradient(180deg, #fff, #fbfdff); }
.agenda-calendar-card > header p { margin: 0 0 3px; color: #939eae; font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.agenda-calendar-card > header h2 { margin: 0; color: #277ed2; font-size: 26px; text-transform: capitalize; }
.agenda-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 14px; color: #748095; font-size: 12px; font-weight: 700; }
.agenda-legend span { display: flex; align-items: center; gap: 6px; }
.agenda-legend i { width: 11px; height: 11px; border-radius: 50%; }
.agenda-legend i.is-scheduled { background: #43aee3; }.agenda-legend i.is-waiting { background: #e7ad2c; }.agenda-legend i.is-consultation { background: #7259df; }.agenda-legend i.is-attended { background: #28a875; }.agenda-legend i.is-absent { background: #df8e35; }.agenda-legend i.is-cancelled { background: #e46c7b; }
.agenda-status { min-height: 300px; margin: 0; padding: 80px 20px; color: #8793a5; text-align: center; }
.agenda-calendar { min-width: 0; }
.agenda-month-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid #e2e8f0; color: #8290a3; background: #f7faff; font-size: 12px; font-weight: 900; letter-spacing: .09em; text-align: center; }
.agenda-month-weekdays span { padding: 12px 4px; border-right: 1px solid #e5ebf2; }
.agenda-month-weekdays span:last-child { border-right: 0; }
.agenda-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.agenda-month-day { position: relative; min-width: 0; min-height: 130px; padding: 9px; border-right: 1px solid #e5ebf2; border-bottom: 1px solid #e5ebf2; outline: 0; background: #fff; cursor: pointer; transition: background-color .14s ease, box-shadow .14s ease; }
.agenda-month-day:hover { background-color: #f7fbff; box-shadow: inset 0 0 0 2px rgba(47,134,221,.14); }
.agenda-month-day:focus-visible { z-index: 1; box-shadow: inset 0 0 0 3px rgba(47,134,221,.28); }
.agenda-month-day.is-drop-target { z-index: 2; background: #ecf7ff; box-shadow: inset 0 0 0 3px #3f91e3; }
.agenda-month-day:nth-child(7n) { border-right: 0; }
.agenda-month-day:nth-last-child(-n+7) { border-bottom: 0; }
.agenda-month-day.is-other-month { background: #fafbfd; }
.agenda-month-day.is-unavailable { background: repeating-linear-gradient(135deg, #f4f6f9, #f4f6f9 8px, #f7f9fb 8px, #f7f9fb 16px); }
.agenda-month-day.is-today { box-shadow: inset 0 3px 0 #4a42e7; }
.agenda-day-number { display: grid; width: 30px; height: 30px; place-items: center; margin: 0 0 4px auto; border-radius: 9px; color: #445269; background: transparent; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.agenda-month-day.is-other-month .agenda-day-number { color: #afb7c4; }
.agenda-month-day.is-today .agenda-day-number { color: #fff; background: linear-gradient(135deg, #238df0, #593add); }
.agenda-day-events { display: grid; gap: 4px; }
.agenda-event { display: grid; grid-template-columns: auto minmax(0,1fr); min-width: 0; align-items: center; gap: 0 6px; padding: 6px 8px; overflow: hidden; border: 0; border-left: 4px solid transparent; border-radius: 7px; color: #29415b; background: #daf5ff; text-align: left; }
.agenda-event time { grid-row: 1 / 3; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.agenda-event strong { overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.agenda-event small { overflow: hidden; color: #61748a; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.agenda-event.is-scheduled { border-left-color: #249ed8; background: #e3f5fc; }
.agenda-event.is-waiting { border-left-color: #dea625; background: #fff5d8; }
.agenda-event.is-consultation { border-left-color: #7057db; background: #eeeaff; }
.agenda-event.is-attended { border-left-color: #249d70; color: #356d5b; background: #e5f7ef; }
.agenda-event.is-absent { border-left-color: #db8b31; color: #795127; background: #fff0dc; }
.agenda-event.is-cancelled { border-left-color: #dc5b6d; color: #7c3540; background: #ffe8eb; }
.agenda-event[draggable="true"] { cursor: grab; touch-action: manipulation; }.agenda-event.is-dragging, .agenda-event.is-touch-dragging { opacity: .35; cursor: grabbing; }
.agenda-more-events { padding: 4px; border: 0; color: #6653c8; background: transparent; font-size: 12px; font-weight: 800; text-align: left; }

.agenda-timeline-shell { display: grid; grid-template: 62px auto / 70px minmax(0,1fr); min-width: 760px; max-height: 760px; overflow: auto; }
.agenda-time-corner { position: sticky; z-index: 4; top: 0; left: 0; border-right: 1px solid #e1e8f0; border-bottom: 1px solid #e1e8f0; background: #f8faff; }
.agenda-timeline-head { position: sticky; z-index: 3; top: 0; display: grid; grid-template-columns: repeat(var(--agenda-days), minmax(100px,1fr)); border-bottom: 1px solid #e1e8f0; background: #f8faff; }
.agenda-timeline-head button { display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-right: 1px solid #e1e8f0; color: #758196; background: transparent; }
.agenda-timeline-head button.is-today { color: #3f3bd3; background: #f0f0ff; }
.agenda-timeline-head small { font-size: 13px; font-weight: 800; letter-spacing: .02em; text-transform: capitalize; }
.agenda-timeline-head small::after { content: attr(data-short); display: none; }
.agenda-timeline-head strong { font-size: 17px; font-weight: 850; line-height: 1; }
.agenda-time-labels { position: sticky; z-index: 2; left: 0; display: grid; grid-template-rows: repeat(24, 64px); color: #65758b; background: #fff; }
.agenda-time-labels span { padding: 5px 8px; border-right: 1px solid #e1e8f0; border-bottom: 1px solid #e3e9f0; font-size: clamp(12px, .9vw, 14px); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.agenda-timeline-days { display: grid; grid-template-columns: repeat(var(--agenda-days), minmax(100px,1fr)); min-width: 0; }
.agenda-timeline-day { position: relative; height: 1536px; border-right: 1px solid #e1e8f0; background: #fff; }
.agenda-timeline-day.is-unavailable { background: repeating-linear-gradient(135deg, #f3f5f8, #f3f5f8 9px, #f7f8fa 9px, #f7f8fa 18px); }
.agenda-time-slot { display: block; width: 100%; height: 16px; border: 0; border-bottom: 1px dashed #eef2f6; background: transparent; }
.agenda-time-slot:nth-child(4n) { border-bottom-style: solid; border-bottom-color: #dfe6ee; }
.agenda-time-slot:hover { background: rgba(65,61,213,.07); }
.agenda-time-slot.is-drop-target { background: rgba(47,134,221,.18); box-shadow: inset 0 0 0 2px #3d8cde; }
.agenda-event.is-timeline-event { position: absolute; z-index: 1; left: 4px; right: 4px; display: grid; align-content: center; padding: 6px 6px 10px; overflow: visible; box-shadow: 0 3px 8px rgba(42,73,110,.12); }
.agenda-event.is-timeline-event time { font-size: clamp(11px, .82vw, 13px); line-height: 1.2; }
.agenda-event.is-timeline-event strong { font-size: clamp(11px, .82vw, 13px); line-height: 1.2; }
.agenda-event.is-timeline-event small { font-size: clamp(10px, .76vw, 12px); line-height: 1.15; }
.agenda-event-state { grid-column: 2; justify-self: start; padding: 2px 7px; border-radius: 999px; color: currentColor; background: rgba(255,255,255,.62); font-size: 10px; font-weight: 750; line-height: 1.2; }
.agenda-event.is-timeline-event.is-short small { display: none; }
.agenda-event.is-timeline-event.is-short .agenda-event-state { display: none; }
.agenda-event.is-timeline-event.is-short { display: flex; align-items: center; gap: 8px; padding: 5px 8px; }
.agenda-event.is-timeline-event.is-short time { grid-row: auto; flex: 0 0 auto; line-height: 1; }
.agenda-event.is-timeline-event.is-short strong { min-width: 0; flex: 1 1 auto; line-height: 1.1; }
.agenda-event.is-timeline-event.is-resizing { z-index: 6; cursor: ns-resize; box-shadow: 0 8px 20px rgba(42,73,110,.22); }
.agenda-event-resizer { position: absolute; right: 4px; bottom: 1px; left: 4px; height: 8px; border-radius: 5px; cursor: ns-resize; touch-action: none; }
.agenda-event-resizer::after { position: absolute; bottom: 2px; left: 50%; width: 24px; height: 2px; border-radius: 3px; background: currentColor; content: ''; opacity: .42; transform: translateX(-50%); }
.agenda-resize-feedback { position: absolute; z-index: 3; right: 4px; bottom: -28px; padding: 5px 8px; border-radius: 7px; color: #fff; background: #27384f; box-shadow: 0 5px 12px rgba(24,39,61,.22); font-size: 12px; font-weight: 900; white-space: nowrap; }
.agenda-drag-ghost { position: fixed; z-index: 120; display: grid; min-width: 150px; max-width: 240px; gap: 2px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.7); border-left: 4px solid #179edb; border-radius: 9px; color: #223650; background: rgba(223,246,255,.96); box-shadow: 0 14px 36px rgba(25,46,76,.28); pointer-events: none; }
.agenda-drag-ghost.is-scheduled { border-left-color: #249ed8; background: rgba(227,245,252,.96); }.agenda-drag-ghost.is-waiting { border-left-color: #dea625; background: rgba(255,245,216,.96); }.agenda-drag-ghost.is-consultation { border-left-color: #7057db; background: rgba(238,234,255,.96); }.agenda-drag-ghost.is-attended { border-left-color: #249d70; background: rgba(229,247,239,.96); }.agenda-drag-ghost.is-absent { border-left-color: #db8b31; background: rgba(255,240,220,.96); }.agenda-drag-ghost.is-cancelled { border-left-color: #dc5b6d; background: rgba(255,232,235,.96); }.agenda-drag-ghost .agenda-event-resizer { display: none; }

.agenda-availability-dialog { width: min(760px, calc(100% - 24px)); }
.agenda-appointment-dialog { width: min(1140px, calc(100% - 24px)); }
.agenda-availability-dialog, .agenda-appointment-dialog { max-height: 92vh; padding: 0; overflow: hidden; border: 0; border-radius: 20px; color: #2a3548; background: #fff; box-shadow: 0 26px 80px rgba(20,31,52,.28); }
.agenda-availability-dialog::backdrop, .agenda-appointment-dialog::backdrop { background: rgba(24,32,49,.6); backdrop-filter: blur(3px); }
.agenda-availability-dialog > article, .agenda-appointment-dialog > form { display: flex; max-height: 92vh; flex-direction: column; }
.agenda-availability-dialog header, .agenda-appointment-dialog header { display: flex; flex: 0 0 auto; min-height: 80px; align-items: center; justify-content: space-between; padding: 16px 24px; color: #fff; background: var(--legacy-gradient); }
.agenda-availability-dialog header p, .agenda-appointment-dialog header p { margin: 0 0 2px; color: rgba(255,255,255,.85); font-size: 11px; font-weight: 850; letter-spacing: .15em; }
.agenda-availability-dialog header h2, .agenda-appointment-dialog header h2 { margin: 0; font-size: 20px; font-weight: 850; }
.agenda-availability-dialog header > button, .agenda-appointment-dialog header > button { display: grid; width: 40px; height: 40px; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.18); }
.agenda-appointment-dialog header > div { display: flex; align-items: center; gap: 12px; }
.agenda-appointment-dialog header > div > .app-icon { width: 26px; height: 26px; }
.agenda-availability-list { display: grid; padding: 10px 20px; overflow-y: auto; }
.agenda-availability-list > div { display: grid; grid-template-columns: 130px 1fr; align-items: center; min-height: 58px; border-bottom: 1px solid #e6ebf1; }
.agenda-availability-list > div:last-child { border-bottom: 0; }
.agenda-availability-list strong { font-size: 13px; font-weight: 800; }.agenda-availability-list span { display: flex; flex-wrap: wrap; gap: 8px; }
.agenda-availability-list b { padding: 8px 12px; border: 1px solid #b9d6f6; border-radius: 9px; color: #2e82d7; font-size: 12px; font-weight: 800; }
.agenda-availability-list .is-closed { color: #9ca6b4; font-size: 12px; }
.agenda-availability-dialog footer, .agenda-appointment-dialog footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 24px; border-top: 1px solid #e3e8ef; background: #f9fbfd; }
.agenda-availability-dialog footer small { display: flex; align-items: center; gap: 8px; color: #7c8797; font-size: 12px; }
.agenda-availability-dialog footer button, .agenda-appointment-dialog footer button { min-height: 48px; padding: 12px 24px; border: 1px solid #cbd6e3; border-radius: 8px; color: #4b5563; background: #fff; font-size: 13px; font-weight: 850; }

.agenda-appointment-body { padding: 22px 24px; overflow-y: auto; }
.agenda-appointment-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(410px, .95fr); gap: 22px; align-items: start; }
.agenda-appointment-editor { min-width: 0; }
.agenda-appointment-context { min-width: 0; min-height: 460px; overflow: hidden; border: 1px solid #dce5ef; border-radius: 15px; background: #fff; box-shadow: 0 7px 22px rgba(39,76,121,.07); }
.agenda-context-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 8px; gap: 8px; background: var(--legacy-gradient); }
.agenda-context-tabs button { display: flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; color: rgba(255,255,255,.82); background: transparent; font-size: 13px; font-weight: 850; cursor: pointer; }
.agenda-context-tabs button.is-active { color: #fff; background: rgba(34,67,150,.48); box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); }
.agenda-context-tabs .app-icon { width: 18px; height: 18px; }
.agenda-context-content { max-height: 450px; overflow: auto; }
.agenda-context-status { margin: 0; padding: 70px 25px; color: #8290a3; font-size: 13px; line-height: 1.6; text-align: center; }
.agenda-context-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.agenda-context-table th { padding: 12px 10px; color: #2f7fd2; background: #f6f9fd; font-size: 11px; font-weight: 900; text-align: left; }
.agenda-context-table th:nth-child(1), .agenda-context-table th:nth-child(2) { width: 16%; }
.agenda-context-table th:nth-child(3) { width: 30%; }
.agenda-context-table td { padding: 12px 10px; overflow: hidden; border-top: 1px solid #e7edf3; color: #4b5563; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.agenda-context-table tr.is-cancelled td { color: #a45261; background: #fff5f6; text-decoration: line-through; }
.agenda-context-table tr.is-absent td { color: #8a6811; background: #fffbec; }
.agenda-context-table tr.is-waiting td { color: #7b5b15; background: #fff9e8; }
.agenda-context-table tr.is-consultation td { color: #5946ae; background: #f5f2ff; }
.agenda-context-table tr.is-attended td { color: #30745b; background: #eefaf5; }
.agenda-context-history { display: grid; gap: 10px; padding: 12px; }
.agenda-context-history article { display: grid; grid-template-columns: 96px 74px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid #e1e8f0; border-left: 4px solid #31a4dc; border-radius: 10px; background: #fbfdff; }
.agenda-context-history article.is-cancelled { border-left-color: #e45166; background: #fff7f8; }
.agenda-context-history article.is-absent { border-left-color: #e4b526; background: #fffbec; }
.agenda-context-history article.is-waiting { border-left-color: #dea625; background: #fff9e8; }
.agenda-context-history article.is-consultation { border-left-color: #7057db; background: #f5f2ff; }
.agenda-context-history article.is-attended { border-left-color: #249d70; background: #eefaf5; }
.agenda-context-history time { color: #2d7fd2; font-size: 12px; font-weight: 850; }.agenda-context-history strong { font-size: 13px; font-weight: 800; }.agenda-context-history span { overflow: hidden; color: #637187; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.agenda-context-history b { padding: 6px 9px; border-radius: 999px; color: #157c58; background: #e6f8f1; font-size: 11px; font-text-transform: uppercase; font-weight: 850; }
.agenda-context-history article.is-cancelled b { color: #ae3b4e; background: #ffe5e9; }.agenda-context-history article.is-absent b { color: #8a6811; background: #fff0b8; }
.agenda-context-history article.is-waiting b { color: #7b5b15; background: #fff0bd; }.agenda-context-history article.is-consultation b { color: #5946ae; background: #e8e1ff; }.agenda-context-history article.is-attended b { color: #267055; background: #dff5ea; }
.agenda-context-empty { display: grid; min-height: 350px; place-items: center; align-content: center; gap: 10px; padding: 30px; color: #8190a3; text-align: center; }
.agenda-context-empty .app-icon { width: 44px; height: 44px; color: #71a9de; }.agenda-context-empty strong { color: #2b6cb0; font-size: 16px; font-weight: 850; }.agenda-context-empty span { font-size: 13px; font-weight: 500; color: #718096; }
.agenda-step-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.agenda-step-heading > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(135deg,#2795ee,#5737df); font-size: 13px; font-weight: 900; }
.agenda-step-heading > span .app-icon { width: 18px; height: 18px; }
.agenda-step-heading > div { display: grid; gap: 2px; }.agenda-step-heading strong { color: #2c3c53; font-size: 15px; font-weight: 850; }.agenda-step-heading small { color: #768396; font-size: 12px; font-weight: 600; }
.agenda-patient-search { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border: 1px solid #ccd9e7; border-radius: 12px; color: #3b88d5; background: #fbfdff; }
.agenda-patient-search .app-icon { width: 18px; height: 18px; }.agenda-patient-search input { width: 100%; border: 0; outline: 0; color: #2b374a; background: transparent; font-size: 14px; font-weight: 600; }
.agenda-patient-results { display: grid; gap: 8px; margin-top: 10px; color: #818c9d; font-size: 13px; }
.agenda-patient-results > button { display: grid; grid-template-columns: 38px 1fr 18px; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #e0e7ef; border-radius: 11px; color: #334259; background: #fff; text-align: left; }
.agenda-patient-results > button > span:first-child { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #fff; background: var(--legacy-gradient); font-size: 13px; font-weight: 900; }
.agenda-patient-results > button > span:nth-child(2) { display: grid; gap: 2px; }.agenda-patient-results strong { font-size: 14px; font-weight: 800; }.agenda-patient-results small { color: #778393; font-size: 12px; }
.agenda-selected-patient { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; margin-bottom: 18px; padding: 12px 16px; border: 1px solid #cce4db; border-radius: 13px; background: #f1fbf7; }
.agenda-selected-patient > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(135deg,#14aa71,#44c89a); }.agenda-selected-patient > div { display: grid; gap: 2px; }.agenda-selected-patient small { color: #437a6b; font-size: 11px; font-weight: 850; letter-spacing: .12em; }.agenda-selected-patient strong { color: #1c4d3e; font-size: 15px; font-weight: 850; }
.agenda-selected-patient button { border: 0; color: #298067; background: transparent; font-size: 12px; font-weight: 900; }.agenda-selected-patient button:disabled { display: none; }
.agenda-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.agenda-form-grid label { display: grid; gap: 8px; color: #374151; font-size: 14px; font-weight: 800; }.agenda-form-grid > label > span b { color: #e04359; }
.agenda-form-grid input, .agenda-form-grid select, .agenda-form-grid textarea, .agenda-recurrence-fields input { width: 100%; padding: 10px 14px; border: 1px solid #ced9e5; border-radius: 8px; outline: 0; color: #374151; background: #fff; font-size: 14px; font-weight: 600; resize: vertical; min-height: 48px; }
.agenda-form-grid textarea { min-height: 90px; padding: 12px 14px; }
.agenda-form-grid input:focus, .agenda-form-grid select:focus, .agenda-form-grid textarea:focus { border-color: #4c87e5; box-shadow: 0 0 0 3px rgba(65,121,220,.1); }
.agenda-duration-control { display: grid !important; min-height: 48px; grid-template-columns: 48px minmax(0,1fr) 48px; overflow: hidden; border: 1px solid #ced9e5; border-radius: 8px; background: #f8fafc; box-shadow: inset 0 1px 2px rgba(38,62,91,.025); }.agenda-duration-control:focus-within { border-color: #4c87e5; box-shadow: 0 0 0 3px rgba(65,121,220,.1); }.agenda-duration-control > button { display: grid; width: 48px; height: 100%; min-height: 48px; place-items: center; border: 0; color: #4384cf; background: #edf4fb; cursor: pointer; transition: color .15s ease, background .15s ease, transform .15s ease; }.agenda-duration-control > button:first-child { border-right: 1px solid #dbe5ef; }.agenda-duration-control > button:last-child { border-left: 1px solid #dbe5ef; }.agenda-duration-control > button:hover { color: #246cbf; background: #e3eef9; }.agenda-duration-control > button:active { transform: scale(.96); }.agenda-duration-control > button .app-icon { width: 16px; height: 16px; stroke-width: 2.8; }.agenda-duration-control > span { display: grid; min-width: 0; grid-template-columns: 68px auto; align-items: center; justify-content: center; column-gap: 6px; padding: 0 10px; }.agenda-duration-control input { width: 68px !important; min-width: 68px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; outline: 0; color: #2d3c52 !important; background: transparent !important; box-shadow: none !important; font-size: 16px !important; font-weight: 850; text-align: center; appearance: textfield; }.agenda-duration-control input::-webkit-inner-spin-button, .agenda-duration-control input::-webkit-outer-spin-button { margin: 0; appearance: none; }.agenda-duration-control small { color: #6b7684; font-size: 12px; font-weight: 800; }
.agenda-form-wide { grid-column: 1/-1; }
.agenda-status-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.agenda-status-options legend { grid-column: 1/-1; margin-bottom: 8px; padding: 0; color: #374151; font-size: 14px; font-weight: 800; }
.agenda-status-options label { position: relative; display: block; cursor: pointer; }
.agenda-status-options input { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; opacity: 0; pointer-events: none; }
.agenda-status-options label > span { display: grid; min-height: 74px; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; align-content: center; align-items: center; gap: 2px 10px; padding: 12px; border: 1px solid #dce4ec; border-radius: 11px; color: #4b5563; background: #fbfcfe; box-shadow: 0 3px 9px rgba(35,59,90,.04); transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
.agenda-status-options .app-icon { grid-row: 1/3; width: 24px; height: 24px; padding: 4px; border-radius: 50%; }
.agenda-status-options b { font-size: 13px; font-weight: 800; }.agenda-status-options small { color: #768396; font-size: 11px; font-weight: 650; }
.agenda-status-options label.is-active b { color: #087950; }.agenda-status-options label.is-absent b { color: #8a6500; }.agenda-status-options label.is-cancelled b { color: #b83248; }
.agenda-status-options label.is-active .app-icon { color: #0b9f67; background: #dff8ec; }.agenda-status-options label.is-absent .app-icon { color: #b98500; background: #fff0bd; }.agenda-status-options label.is-cancelled .app-icon { color: #d74057; background: #ffe3e7; }
.agenda-status-options label.is-active input:checked + span { border-color: #20ac78; color: #087950; background: #eefbf6; box-shadow: 0 0 0 3px rgba(32,172,120,.11), 0 7px 16px rgba(31,116,87,.09); transform: translateY(-1px); }
.agenda-status-options label.is-absent input:checked + span { border-color: #e0ac1f; color: #866100; background: #fffaf0; box-shadow: 0 0 0 3px rgba(224,172,31,.12), 0 7px 16px rgba(128,94,12,.08); transform: translateY(-1px); }
.agenda-status-options label.is-cancelled input:checked + span { border-color: #e35468; color: #ad3044; background: #fff4f6; box-shadow: 0 0 0 3px rgba(227,84,104,.11), 0 7px 16px rgba(136,39,54,.08); transform: translateY(-1px); }
.agenda-status-options input:focus-visible + span { outline: 3px solid rgba(54,130,218,.18); outline-offset: 2px; }
.agenda-operational-state { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 14px 16px; border: 1px solid #dce5ef; border-left: 4px solid #249ed8; border-radius: 13px; background: #f8fbfe; }
.agenda-operational-state > div:first-child { display: grid; gap: 2px; min-width: 130px; }
.agenda-operational-state small { color: #8793a5; font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.agenda-operational-state strong { color: #344359; font-size: 16px; }
.agenda-operational-state.is-waiting { border-left-color: #dea625; background: #fffbef; }.agenda-operational-state.is-consultation { border-left-color: #7057db; background: #f7f5ff; }.agenda-operational-state.is-attended { border-left-color: #249d70; background: #f0faf6; }.agenda-operational-state.is-absent { border-left-color: #db8b31; background: #fff7ed; }.agenda-operational-state.is-cancelled { border-left-color: #dc5b6d; background: #fff5f6; }
.agenda-operational-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.agenda-operational-actions button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 7px; padding: 9px 13px; border: 1px solid #d5deea; border-radius: 10px; color: #3f5067; background: #fff; font: inherit; font-size: 12px; font-weight: 750; box-shadow: 0 4px 10px rgba(40,58,84,.06); }
.agenda-operational-actions button:hover { border-color: #8da7c5; background: #f7faff; }.agenda-operational-actions button:disabled { cursor: wait; opacity: .55; }.agenda-operational-actions .app-icon { width: 16px; height: 16px; }.agenda-operational-actions > span { color: #768396; font-size: 12px; font-weight: 650; }
.agenda-recurrence-toggle { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px 16px; border: 1px solid #ddd9f5; border-radius: 11px; color: #554a96; background: #f8f6ff; }
.agenda-recurrence-toggle input { width: 20px; height: 20px; accent-color: #5c41d8; }.agenda-recurrence-toggle span { display: grid; gap: 2px; }.agenda-recurrence-toggle b { font-size: 14px; font-weight: 800; color: #433785; }.agenda-recurrence-toggle small { color: #7369a3; font-size: 12px; font-weight: 500; }
.agenda-recurrence-edit-note { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; padding: 14px 16px; border: 1px solid #ddd9f5; border-radius: 11px; color: #554a96; background: #f8f6ff; }.agenda-recurrence-edit-note .app-icon { width: 20px; height: 20px; }.agenda-recurrence-edit-note span { display: grid; gap: 3px; }.agenda-recurrence-edit-note b { font-size: 14px; font-weight: 800; }.agenda-recurrence-edit-note small { color: #7369a3; font-size: 12px; }
.agenda-recurrence-fields { display: grid; gap: 12px; margin-top: 12px; padding: 16px; border: 1px solid #e2ddf6; border-radius: 11px; background: #fbfaff; }.agenda-recurrence-fields > strong, .agenda-recurrence-fields > label > span { color: #544980; font-size: 13px; font-weight: 800; }.agenda-recurrence-fields > div { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); align-items: start; gap: 8px; }.agenda-recurrence-fields > div label { display: flex; min-width: 0; min-height: 42px; align-items: center; justify-content: center; gap: 6px; padding: 7px 8px; border: 1px solid #d8d2ed; border-radius: 9px; font-size: 13px; font-weight: 750; white-space: nowrap; }.agenda-recurrence-fields > div input { width: 18px !important; height: 18px; min-width: 18px; min-height: 18px !important; margin: 0; padding: 0 !important; accent-color: #5d42d7; flex: 0 0 18px; }
.agenda-form-error { min-height: 20px; margin: 14px 0 0; color: #c83349; font-size: 12px; font-weight: 700; }
.agenda-appointment-dialog footer > span { flex: 1; }.agenda-appointment-dialog footer .agenda-save-button { border: 0; color: #fff; background: var(--legacy-gradient); box-shadow: 0 7px 16px rgba(66,62,205,.2); }.agenda-appointment-dialog footer .agenda-save-button:disabled, .agenda-appointment-dialog footer .agenda-whatsapp-save-button:disabled { color: #8d99a8; background: #e8edf2; box-shadow: none; cursor: not-allowed; filter: grayscale(1); }.agenda-appointment-dialog footer .agenda-whatsapp-save-button { border: 0; color: #fff; background: linear-gradient(135deg,#08a95e,#21c879); box-shadow: 0 7px 16px rgba(12,157,89,.2); }.agenda-appointment-dialog footer .agenda-delete-button { border-color: #efb7bf; color: #c33b50; background: #fff7f8; }.agenda-appointment-dialog footer .app-icon { width: 16px; height: 16px; }
.agenda-confirm-dialog { width: min(560px, calc(100% - 24px)); max-height: 90vh; padding: 0; overflow: hidden; border: 0; border-radius: 20px; color: #2a3548; background: #fff; box-shadow: 0 28px 90px rgba(17,27,44,.34); }
.agenda-confirm-dialog::backdrop { background: rgba(24,32,49,.62); backdrop-filter: blur(4px); }
.agenda-confirm-dialog > article { display: flex; flex-direction: column; }
.agenda-confirm-dialog header { display: grid; grid-template-columns: 48px minmax(0,1fr) 38px; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid #e3e9f0; background: linear-gradient(180deg,#fff,#f9fbfe); }
.agenda-confirm-dialog header > span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; color: #d5495d; background: #fff0f2; }
.agenda-confirm-dialog header > span .app-icon { width: 22px; height: 22px; }
.agenda-confirm-dialog header p { margin: 0 0 2px; color: #9aa4b2; font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.agenda-confirm-dialog header h2 { margin: 0; color: #344258; font-size: 20px; }
.agenda-confirm-dialog header > button { display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 50%; color: #7e8a9b; background: #eef3f7; }
.agenda-confirm-dialog header > button .app-icon { width: 14px; height: 14px; }
.agenda-confirm-body { display: grid; gap: 10px; padding: 24px 22px; }
.agenda-confirm-body p { margin: 0; color: #344258; font-size: 15px; font-weight: 800; line-height: 1.5; }
.agenda-confirm-body small { padding: 12px 14px; border-left: 4px solid #6f55db; border-radius: 9px; color: #69778a; background: #f6f4ff; font-size: 13px; line-height: 1.55; white-space: pre-line; }
.agenda-confirm-dialog footer { display: flex; align-items: center; gap: 9px; padding: 14px 20px; border-top: 1px solid #e3e9f0; background: #f9fbfd; }
.agenda-confirm-dialog footer span { flex: 1; }
.agenda-confirm-dialog footer button { min-height: 46px; padding: 0 17px; border: 1px solid #cad6e2; border-radius: 10px; color: #607087; background: #fff; font-size: 13px; font-weight: 900; }
.agenda-confirm-dialog footer .agenda-confirm-secondary { border-color: #e1b8bf; color: #ae4052; background: #fff7f8; }
.agenda-confirm-dialog footer .agenda-confirm-primary { border: 0; color: #fff; background: var(--legacy-gradient); box-shadow: 0 7px 16px rgba(66,62,205,.2); }
.agenda-confirm-dialog footer .agenda-confirm-primary[data-tone="danger"] { background: linear-gradient(135deg,#e54b61,#bd3047); box-shadow: 0 7px 16px rgba(191,48,71,.2); }
.agenda-confirm-dialog footer .agenda-confirm-primary[data-tone="success"] { background: linear-gradient(135deg,#09a960,#21ca79); box-shadow: 0 7px 16px rgba(12,157,89,.2); }
.agenda-confirm-dialog header > span[data-tone="success"] { color: #0b9f67; background: #e3f9ee; }
.agenda-whatsapp-dialog { width: min(650px,calc(100% - 24px)); max-height: 92vh; padding: 0; overflow: hidden; border: 0; border-radius: 22px; color: #2b384b; background: #fff; box-shadow: 0 28px 90px rgba(17,27,44,.34); }
.agenda-whatsapp-dialog::backdrop { background: rgba(24,32,49,.62); backdrop-filter: blur(4px); }
.agenda-whatsapp-dialog > article { display: flex; max-height: 92vh; flex-direction: column; }
.agenda-whatsapp-dialog header { display: grid; flex: 0 0 auto; grid-template-columns: 52px minmax(0,1fr) 38px; align-items: center; gap: 13px; padding: 20px 22px; border-bottom: 1px solid #dcebe4; background: linear-gradient(180deg,#fff,#f5fcf8); }
.agenda-whatsapp-dialog header > span { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 15px; color: #079c58; background: #ddf7e9; }
.agenda-whatsapp-dialog header > span .app-icon { width: 27px; height: 27px; }
.agenda-whatsapp-dialog header p { margin: 0 0 3px; color: #27936a; font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.agenda-whatsapp-dialog h2 { margin: 0; color: #2e3d51; font-size: 20px; }
.agenda-whatsapp-dialog header > button { display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 50%; color: #718093; background: #eaf2ee; }
.agenda-whatsapp-dialog header > button .app-icon { width: 14px; height: 14px; }
.agenda-whatsapp-body { display: grid; gap: 16px; padding: 20px 22px; overflow: auto; }
.agenda-whatsapp-success { margin: 0; padding: 12px 14px; border-left: 4px solid #18b66c; border-radius: 10px; color: #267451; background: #ecfaf3; font-size: 14px; font-weight: 850; }
.agenda-whatsapp-body dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 0; }
.agenda-whatsapp-body dl div { padding: 12px 14px; border: 1px solid #e1e9e5; border-radius: 10px; background: #fafcfb; }
.agenda-whatsapp-body dt { color: #879489; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.agenda-whatsapp-body dd { margin: 4px 0 0; overflow-wrap: anywhere; color: #344657; font-size: 15px; font-weight: 850; }
.agenda-whatsapp-body section { overflow: hidden; border: 1px solid #dce8e1; border-radius: 13px; background: #f8fbf9; }
.agenda-whatsapp-body section > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid #e2ebe6; background: #f1f8f4; }
.agenda-whatsapp-body section span { color: #28825d; font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.agenda-whatsapp-body section small { color: #7d8b83; font-size: 12px; }
.agenda-whatsapp-body pre { margin: 0; padding: 16px; overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; color: #354558; background: transparent; font: 500 14px/1.65 var(--font-family); }
.agenda-whatsapp-dialog footer { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid #dce7e1; background: #f8fbf9; }
.agenda-whatsapp-dialog footer span { flex: 1; }
.agenda-whatsapp-dialog footer button { min-height: 46px; padding: 0 18px; border-radius: 10px; font-size: 13px; font-weight: 900; }
.agenda-whatsapp-dialog footer > button:first-child { border: 1px solid #c9d8d0; color: #62756b; background: #fff; }
.agenda-whatsapp-dialog footer > button:last-child { display: inline-flex; align-items: center; gap: 8px; border: 0; color: #fff; background: linear-gradient(135deg,#08a75e,#20c97a); box-shadow: 0 8px 18px rgba(9,158,89,.2); }
.agenda-whatsapp-dialog footer .app-icon { width: 16px; height: 16px; }
@media (max-width:560px) { .agenda-whatsapp-body dl { grid-template-columns: 1fr; }.agenda-whatsapp-body section > div { align-items: flex-start; flex-direction: column; gap: 3px; }.agenda-whatsapp-dialog footer { display: grid; grid-template-columns: 1fr 1fr; }.agenda-whatsapp-dialog footer span { display: none; }.agenda-whatsapp-dialog footer button { padding: 0 10px; } }
.agenda-undo-bar { position: fixed; z-index: 45; right: 28px; bottom: 28px; display: flex; min-height: 52px; align-items: center; gap: 14px; padding: 12px 14px 12px 20px; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; color: #fff; background: #28364c; box-shadow: 0 16px 40px rgba(20,30,46,.35); font-size: 14px; font-weight: 600; }

.agenda-whatsapp-body pre { font-family: var(--font-family); }
.agenda-undo-bar > .app-icon { width: 22px; height: 22px; flex-shrink: 0; stroke-width: 2.2; }
.agenda-undo-bar button { padding: 9px 16px; border: 0; border-radius: 10px; color: #9fd2ff; background: rgba(255,255,255,.1); font-size: 12.5px; font-weight: 900; letter-spacing: .04em; cursor: pointer; transition: background .15s ease; }
.agenda-undo-bar button:hover { background: rgba(255,255,255,.18); }
.agenda-undo-bar button:last-child { display: grid; width: 36px; height: 36px; flex-shrink: 0; place-items: center; padding: 0; color: #fff; }
.agenda-undo-bar button:last-child .app-icon { width: 16px; height: 16px; stroke-width: 2.5; }

@media (max-width: 1050px) {
  .agenda-reminder-strip { flex-wrap: wrap; }
  .agenda-reminder-title { min-height: 34px; }
  .agenda-reminder-item { flex: 1 1 190px; min-height: 34px; }
  .agenda-toolbar-card { grid-template-columns: minmax(240px,1fr) auto auto; }
  .agenda-date-navigation { grid-column: 1/-1; justify-content: flex-end; }
  .agenda-month-day { min-height: 104px; padding: 5px; }
  .agenda-event small { display: none; }
  .agenda-appointment-layout { grid-template-columns: 1fr; }
  .agenda-appointment-context { min-height: 330px; }
}

@media (max-width: 720px) {
  .agenda-view { padding: 14px 10px 32px; }
  .agenda-utility-row { grid-template-columns: minmax(0,1fr) 43px; gap: 8px; margin-bottom: 8px; }
  .agenda-page-heading { grid-column: 1; grid-row: 1; }
  .agenda-utility-row .agenda-tutorial-button { grid-column: 2; grid-row: 1; }
  .agenda-reminder-strip { grid-column: 1 / -1; grid-row: 2; }
  .agenda-page-heading { grid-template-columns: 46px 1fr 46px; gap: 10px; margin-bottom: 14px; }
  .agenda-page-heading { margin: 0; }
  .agenda-page-heading .agenda-back-button { width: 100%; min-width: 0; justify-content: flex-start; padding-inline: 14px; font-size: 13px; }
  .agenda-page-heading p { font-size: 12px; }
  .agenda-page-heading h1 { font-size: 30px; }
  .agenda-page-heading > div > span { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  .agenda-back-button, .agenda-primary-button { width: 46px; min-width: 46px; min-height: 46px; padding: 0; }
  .agenda-back-button, .agenda-primary-button { font-size: 0; }
  .agenda-back-button .app-icon, .agenda-primary-button .app-icon { width: 19px; height: 19px; }

  .agenda-reminder-strip {
    display: flex;
    margin-bottom: 12px;
    gap: 8px;
    padding: 9px;
    overflow-x: auto;
    border-radius: 15px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .agenda-reminder-title,
  .agenda-reminder-item {
    min-height: 46px;
    flex: 0 0 auto;
    padding: 6px 10px;
    border: 0;
    border-radius: 12px;
    background: #f8fbff;
    scroll-snap-align: start;
  }
  .agenda-reminder-title { padding-inline: 12px; }
  .agenda-reminder-title em { font-size: 12px; }
  .agenda-reminder-item { min-width: max-content; gap: 8px; }
  .agenda-reminder-icon { width: 32px; height: 32px; flex-basis: 32px; }
  .agenda-reminder-item small { overflow: visible; font-size: 12px; }
  .agenda-reminder-item b { padding: 6px 11px; font-size: 12px; }
  .agenda-reminder-title[data-tooltip]::after,
  .agenda-reminder-item[data-tooltip]::after,
  .agenda-reminder-title[data-tooltip]::before,
  .agenda-reminder-item[data-tooltip]::before,
  .agenda-reminder-popover { display: none; }

  .agenda-toolbar-card { grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 10px; border-radius: 14px; }
  .agenda-professional-select { grid-column: 1/-1; min-height: 50px; }
  .agenda-professional-select span,
  .agenda-professional-select .smart-select-trigger { font-size: 14px; }
  .agenda-availability-button { width: 48px; height: 48px; justify-content: center; padding: 0; font-size: 0; }
  .agenda-availability-button .app-icon { width: 19px; height: 19px; }
  .agenda-view-switch { min-width: 0; justify-self: stretch; }
  .agenda-view-switch { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agenda-view-switch button { min-width: 0; height: 48px; padding-inline: 6px; overflow: visible; font-size: clamp(12px, 3.5vw, 14px); white-space: nowrap; }
  .agenda-date-navigation { grid-column: 1/-1; justify-content: flex-end; }
  .agenda-date-navigation button { height: 48px; min-width: 48px; font-size: 14px; }

  .agenda-calendar-card { border-radius: 14px; }
  .agenda-calendar-card > header { min-height: 72px; padding: 12px 14px; }
  .agenda-calendar-card > header p { font-size: 12px; }
  .agenda-calendar-card > header h2 { font-size: 21px; }
  .agenda-legend { display: none; }
  .agenda-month-weekdays span { padding: 10px 1px; font-size: 11px; letter-spacing: .03em; }
  .agenda-month-day { min-height: 92px; padding: 5px 3px; }
  .agenda-day-number { width: 30px; height: 30px; margin-bottom: 5px; font-size: 13px; }
  .agenda-day-events { gap: 3px; }
  .agenda-event {
    display: flex;
    min-height: 20px;
    justify-content: center;
    padding: 3px 2px;
    border-left-width: 3px;
    border-radius: 5px;
  }
  .agenda-event time { font-size: 10px; line-height: 1; }
  .agenda-event strong, .agenda-event small { display: none; }
  .agenda-more-events { padding: 2px 1px; font-size: 10px; text-align: center; }

  .agenda-timeline-shell { min-width: 720px; }
  .agenda-calendar.is-day .agenda-timeline-shell { min-width: 0; grid-template-columns: 62px minmax(0,1fr); }
  .agenda-calendar.is-day .agenda-timeline-head,
  .agenda-calendar.is-day .agenda-timeline-days { grid-template-columns: minmax(0,1fr); }
  .agenda-calendar.is-day .agenda-timeline-head small { font-size: 0; }
  .agenda-calendar.is-day .agenda-timeline-head small::after { display: inline; font-size: 16px; }
  .agenda-calendar.is-day .agenda-timeline-head strong { font-size: 30px; }
  .agenda-calendar.is-day .agenda-time-labels span { padding-inline: 7px; font-size: 13px; }
  .agenda-calendar.is-day .agenda-event.is-timeline-event { left: 5px; right: 5px; padding-inline: 8px; }
  .agenda-calendar.is-day .agenda-event.is-timeline-event time,
  .agenda-calendar.is-day .agenda-event.is-timeline-event strong { font-size: 13px; }

  .agenda-availability-dialog,
  .agenda-appointment-dialog,
  .agenda-confirm-dialog,
  .agenda-whatsapp-dialog { width: calc(100% - 16px); max-height: 96vh; border-radius: 16px; }
  .agenda-availability-dialog > article,
  .agenda-appointment-dialog > form,
  .agenda-whatsapp-dialog > article { max-height: 96vh; }
  .agenda-availability-dialog header,
  .agenda-appointment-dialog header { min-height: 72px; padding: 14px 16px; }
  .agenda-appointment-body { padding: 16px; }
  .agenda-appointment-layout,
  .agenda-form-grid { grid-template-columns: 1fr; }
  .agenda-form-wide { grid-column: 1; }
  .agenda-status-options { grid-template-columns: 1fr; }
  .agenda-status-options label > span { min-height: 66px; }
  .agenda-operational-state { align-items: stretch; flex-direction: column; }
  .agenda-operational-actions { justify-content: stretch; }
  .agenda-operational-actions button { flex: 1 1 150px; }
  .agenda-appointment-context { min-height: 300px; }
  .agenda-context-history article { grid-template-columns: 1fr auto; }
  .agenda-context-history article span { grid-column: 1/-1; }
  .agenda-appointment-dialog footer { display: grid; grid-template-columns: auto 1fr 1fr; padding: 12px; }
  .agenda-appointment-dialog footer > span { display: none; }
  .agenda-appointment-dialog footer button { min-width: 0; padding-inline: 10px; font-size: 12px; }
  .agenda-appointment-dialog footer .agenda-delete-button { width: 48px; padding: 0; font-size: 0; }
  .agenda-availability-list { padding-inline: 14px; }
  .agenda-availability-list > div { grid-template-columns: 96px 1fr; }
  .agenda-undo-bar { right: 10px; bottom: 10px; left: 10px; gap: 9px; padding: 10px 10px 10px 14px; }
  .agenda-undo-bar span { min-width: 0; flex: 1; font-size: 13px; }
}
@keyframes legacy-modal-arrival { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 720px) {
  .legacy-finance-dialog { width: calc(100% - 16px); max-height: 96vh; }
  .legacy-finance-dialog > article, .legacy-finance-dialog > form { max-height: 96vh; }
  .finance-dialog-header { padding-inline: 14px; }
  .finance-dialog-body { padding: 14px; }
  .finance-form-grid { grid-template-columns: 1fr; }
  .finance-form-wide { grid-column: 1; }
  .payment-debt-preview { grid-template-columns: 1fr; }
  .payment-debt-preview > label { grid-column: 1; }
  .finance-dialog-footer { flex-wrap: wrap; }
  .finance-dialog-footer p { flex: 1 0 100%; }
  .finance-form-actions > button { min-width: 0; flex: 1; }
  .legacy-patient-dialog { width: calc(100% - 16px); max-height: 96vh; }
  .legacy-patient-dialog form { max-height: 96vh; }
  .new-patient-body { padding-inline: 10px; }
  .new-patient-grid { grid-template-columns: 1fr; }
  .new-patient-grid > label:nth-child(even) { border-left: 0; }
  .coverage-heading { align-items: stretch; flex-direction: column; }
  .coverage-fields { grid-template-columns: 1fr; }
  .coverage-fields label + label { border-top: 1px solid #f1c68f; border-left: 0; }
  .new-patient-footer button { min-width: 0; flex: 1; }
  .tutorial-hub-dialog { width: calc(100% - 16px); max-height: calc(100vh - 16px); border-radius: 17px; }
  .tutorial-hub-dialog > article { max-height: calc(100vh - 16px); }
  .tutorial-hub-header { min-height: 82px; padding: 14px 16px; }
  .tutorial-hub-symbol { width: 42px; height: 42px; flex-basis: 42px; border-radius: 12px; }
  .tutorial-hub-heading h2 { font-size: 19px; }
  .tutorial-hub-body { padding: 16px; }
  .tutorial-hub-card { grid-template-columns: 42px minmax(0,1fr); gap: 12px; padding: 14px; }
  .tutorial-hub-card-icon { width: 42px; height: 42px; }
  .tutorial-hub-card-meta { grid-column: 2; min-width: 0; justify-content: flex-start; }
  .driver-popover.burotec-driver-popover .tutorial-popover-points { grid-template-columns: 1fr; }
  .tutorial-live-target.is-tutorial-live-visible { outline-width: 2px !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px rgba(73,126,255,.2), 0 0 0 9999px rgba(17,25,54,.62) !important; }
  .driver-popover.burotec-driver-popover.tutorial-live-popover.is-mobile-sheet { top: auto !important; right: 8px !important; bottom: max(8px, env(safe-area-inset-bottom)) !important; left: 8px !important; width: auto; max-width: none; max-height: 56vh; padding: 14px; border-radius: 18px; }
  .driver-popover.burotec-driver-popover.tutorial-live-popover.is-mobile-sheet .tutorial-popover-scroll { max-height: calc(56vh - 92px); padding-right: 4px; overscroll-behavior: contain; }
  .driver-popover.burotec-driver-popover.tutorial-live-popover.is-mobile-sheet .driver-popover-title { padding-right: 34px; font-size: 17px; line-height: 1.22; }
  .driver-popover.burotec-driver-popover.tutorial-live-popover.is-mobile-sheet .tutorial-popover-icon { width: 30px; height: 30px; flex-basis: 30px; border-radius: 9px; }
  .driver-popover.burotec-driver-popover.tutorial-live-popover.is-mobile-sheet .tutorial-popover-icon .app-icon { width: 17px; height: 17px; }
  .driver-popover.burotec-driver-popover.tutorial-live-popover.is-mobile-sheet .driver-popover-description { margin-top: 7px; font-size: 13px; line-height: 1.42; }
  .driver-popover.burotec-driver-popover.tutorial-live-popover.is-mobile-sheet .tutorial-popover-points { margin-top: 9px; }
  .driver-popover.burotec-driver-popover.tutorial-live-popover.is-mobile-sheet .tutorial-popover-points li { grid-template-columns: 25px minmax(0,1fr); gap: 7px; padding: 7px 1px; }
  .driver-popover.burotec-driver-popover.tutorial-live-popover.is-mobile-sheet .tutorial-popover-point-icon { width: 22px; height: 22px; padding: 4px; }
  .driver-popover.burotec-driver-popover.tutorial-live-popover.is-mobile-sheet .tutorial-popover-tip { margin-top: 8px; padding: 8px 9px; font-size: 12px; line-height: 1.35; }
  .driver-popover.burotec-driver-popover.tutorial-live-popover.is-mobile-sheet .driver-popover-close-btn { top: 8px; right: 9px; }
  .driver-popover.burotec-driver-popover.tutorial-live-popover.is-mobile-sheet .driver-popover-footer { margin-top: 10px; }
  .driver-popover.burotec-driver-popover.tutorial-live-popover.is-mobile-sheet .driver-popover-footer button { min-height: 42px; padding-inline: 12px; }
  .driver-popover.burotec-driver-popover.tutorial-live-popover.is-mobile-sheet .driver-popover-progress-text { font-size: 12px; }
  .tutorial-hints-toolbar { right: 8px; bottom: 8px; left: 8px; justify-content: space-between; gap: 8px; padding-left: 12px; transform: none; }
  .tutorial-hints-toolbar > span { white-space: normal; }
  .tutorial-completion-dialog { width: calc(100% - 16px); border-radius: 21px; }
  .tutorial-completion-hero { min-height: 210px; }
  .tutorial-completion-body { padding: 21px 18px 22px; }
  .tutorial-exit-dialog { width: calc(100% - 16px); border-radius: 17px; }
  .tutorial-exit-dialog > article { grid-template-columns: 42px minmax(0,1fr); gap: 12px; padding: 19px; }
  .tutorial-exit-symbol { width: 42px; height: 42px; border-radius: 13px; }
  .tutorial-exit-copy h2 { font-size: 18px; }
  .tutorial-exit-copy p { font-size: 13px; }
  .tutorial-exit-actions { display: grid; grid-template-columns: 1fr; margin-top: 3px; }
  .tutorial-exit-actions > button { width: 100%; min-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .legacy-patient-dialog[open] { animation: none; }
  .tutorial-hub-dialog[open] { animation: none; }
  .tutorial-hub-card, .tutorial-access-button { transition: none; }
  .driver-hint.burotec-hint-beacon .driver-hint-pulse { animation: none; }
  .tutorial-completion-dialog[open], .tutorial-completion-confetti i, .tutorial-exit-dialog[open] { animation: none; }
}

@media (max-width: 620px) {
  .account-settings-dialog { width: calc(100% - 16px); max-height: 96vh; border-radius: 16px; }
  .account-settings-dialog > article { max-height: 96vh; }
  .account-settings-dialog > article > header, .account-settings-body, .account-settings-dialog > article > footer { padding-inline: 15px; }
  .account-settings-grid, .account-settings-whatsapp-modes { grid-template-columns: 1fr; }
  .account-settings-duration { align-items: stretch; flex-direction: column; }
  .account-settings-duration label { width: 100%; }
  .account-settings-form > footer { align-items: stretch; flex-direction: column; }
  .account-settings-form > footer button { width: 100%; }
  .patient-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-viewer-dialog footer { align-items: stretch; flex-wrap: wrap; }
  .gallery-viewer-dialog footer > div { flex: 1 0 100%; }
  .history-card-controls { grid-template-columns: 1fr 1fr; }
  .history-report-button { min-width: 0; padding-inline: 10px; gap: 5px; font-size: 12px; letter-spacing: 0; }
  .history-report-button, .history-new-button { width: 100%; }
  .history-report-button > span { overflow: hidden; text-overflow: ellipsis; }
  .history-report-button > small { display: none; }
  .history-new-button { padding-inline: 9px; }
  .history-new-button strong { font-size: 12px; }
  .history-create-heading { align-items: stretch; flex-direction: column; }
  .history-create-heading > div:last-child { justify-content: flex-end; }
  .history-form-grid { grid-template-columns: 1fr; }
  .history-annotations-card > header { align-items: stretch; flex-direction: column; }
  .history-annotation-actions { justify-content: flex-start; }
  .history-annotation-actions select { max-width: none; flex: 1 1 100%; }
  .history-picker-filters, .medication-filters { grid-template-columns: 1fr; }
  .history-treatment-result, .history-medication-result { grid-template-columns: 1fr; }
}

/*
 * Mi Cuenta es un área de configuración: la información nunca debe depender
 * de microtipografía.  Esta capa final fija la escala operativa acordada sin
 * alterar los flujos ni la jerarquía de títulos de cada módulo.
 */
:where(body) :is(
  .account-view,
  .patient-export-dialog,
  .account-signature-dialog,
  .account-settings-dialog,
  .account-reminders-dialog,
  .account-availability-dialog,
  .treatment-values-dialog,
  .message-pack-dialog,
  .subscription-dialog,
  .professional-dialog
) :is(button, input, select, textarea) {
  font-size: 13px;
}

:where(body) :is(
  .account-view,
  .patient-export-dialog,
  .account-signature-dialog,
  .account-settings-dialog,
  .account-reminders-dialog,
  .account-availability-dialog,
  .treatment-values-dialog,
  .message-pack-dialog,
  .subscription-dialog,
  .professional-dialog
) :is(p, small, span, label, dt, dd, a, em, i) {
  font-size: 12px;
}

/* Los identificadores breves y badges mantienen una escala compacta, legible. */
body :is(
  .account-view,
  .patient-export-dialog,
  .account-signature-dialog,
  .account-settings-dialog,
  .account-reminders-dialog,
  .account-availability-dialog,
  .treatment-values-dialog,
  .message-pack-dialog,
  .subscription-dialog,
  .professional-dialog
) :is(.account-heading > aside small, .account-hero-card dt, .account-card header p,
  .patient-export-dialog > article > header p, .patient-export-summary small,
  .patient-export-included header p, .patient-export-included header b,
  .account-signature-dialog > article > header p, .account-signature-current header p,
  .account-signature-current header b, .account-signature-editor > header p,
  .account-signature-canvas-shell > span, .account-settings-dialog > article > header p,
  .account-settings-form > header p, .account-reminders-dialog > article > header p,
  .account-reminder-queue > header p, .account-availability-dialog > article > header p,
  .account-availability-toolbar > label > span, .account-availability-toolbar dt,
  .account-availability-editor > header p, .account-availability-week > header p,
  .account-availability-interval > span em, .account-reminder-job header span,
  .account-reminder-queue-counts dt) {
  font-size: 11px;
}

/* Etiquetas de acción y estados que se implementaban con <strong> o <b>. */
body :is(
  .account-view,
  .patient-export-dialog,
  .account-signature-dialog,
  .account-settings-dialog,
  .account-reminders-dialog,
  .account-availability-dialog,
  .treatment-values-dialog,
  .message-pack-dialog,
  .subscription-dialog,
  .professional-dialog
) :is(
  .account-signature-editor > aside strong, .account-signature-confirm strong,
  .account-settings-permission strong, .account-settings-form > header b,
  .account-settings-switch b, .account-settings-whatsapp-modes b,
  .account-settings-professional > aside strong, .account-settings-password > aside strong,
  .account-reminders-local-note strong, .account-reminders-readonly strong,
  .account-reminder-master b, .account-reminder-options b,
  .account-reminder-dispatcher strong, .account-reminder-queue > aside strong,
  .account-reminder-job header strong, .account-availability-integrity strong,
  .account-availability-ranges-header, #accountAvailabilityDayFields legend,
  #accountAvailabilityForm > aside strong, #accountAvailabilityWeek > article > header strong,
  .account-availability-interval > span b, .treatment-values-integrity strong,
  .treatment-value-confirm strong, #treatmentValueList > article > header strong,
  .message-pack-intro b, .subscription-manual-quote strong,
  .subscription-license-options strong, .professional-form-grid label > span,
  #professionalForm > aside strong, #professionalList article > header strong
) {
  font-size: 12px;
}

/*
 * Escala legible obligatoria de Mi Cuenta.
 * Los módulos fueron creados en distintas etapas y varios traían selectores
 * más específicos con tamaños de 6–10px.  Esta capa es deliberadamente final:
 * ningún texto operativo, historial, etiqueta o estado puede volver a quedar
 * por debajo de la escala de Fichas y Agenda.
 */
:where(body) :is(
  .account-view,
  .patient-export-dialog,
  .account-signature-dialog,
  .account-settings-dialog,
  .account-reminders-dialog,
  .account-availability-dialog,
  .treatment-values-dialog,
  .message-pack-dialog,
  .subscription-dialog,
  .professional-dialog
) :is(p, small, span, label, dt, dd, a, em, i, strong, b) {
  font-size: 14px !important;
}

:where(body) :is(
  .account-view,
  .patient-export-dialog,
  .account-signature-dialog,
  .account-settings-dialog,
  .account-reminders-dialog,
  .account-availability-dialog,
  .treatment-values-dialog,
  .message-pack-dialog,
  .subscription-dialog,
  .professional-dialog
) :is(button, input, select, textarea) {
  font-size: 15px !important;
}

/* Descripciones y resúmenes del tablero se leen a primera vista. */
.account-heading p,
.account-heading > aside small,
.account-hero-card small,
.account-hero-card dt,
.account-card header p { font-size: 13px !important; }
.account-hero-card p,
.account-card > p,
.account-integrity-note p { font-size: 15px !important; }
.account-card-summary span,
.account-card-summary b { font-size: 16px !important; }
.account-card > button { font-size: 15px !important; }
.account-card > button small { font-size: 13px !important; }

/* Las métricas continúan teniendo una jerarquía mayor que el texto base. */
.account-hero-card dd { font-size: 20px !important; }
.patient-export-summary strong { font-size: 25px !important; }
.account-reminders-balance strong { font-size: 18px !important; }
.account-reminders-balance strong b { font-size: 26px !important; }
.account-availability-toolbar dd { font-size: 18px !important; }
.treatment-values-toolbar dd { font-size: 22px !important; }
.treatment-values-dialog .tv-price-amount { font-size: 26px !important; font-weight: 900 !important; }
.treatment-values-dialog .tv-price-tag-label { font-size: 10px !important; font-weight: 800 !important; }
.treatment-values-dialog .tv-code-pill { font-size: 12px !important; font-weight: 850 !important; }
.treatment-values-dialog .tv-category-tag { font-size: 11px !important; font-weight: 750 !important; }
.message-pack-card > div strong { font-size: 24px !important; }
.subscription-current strong { font-size: 20px !important; }
.subscription-price-summary strong { font-size: 26px !important; }
.professional-capacity strong { font-size: 18px !important; }

/* Nombres y registros de listas: ni códigos ni historial se leen con lupa. */
#treatmentValueList > article > header strong,
#professionalList article > header strong { font-size: 16px !important; }
.treatment-value-editor > header h3,
.treatment-values-directory > header h3,
.treatment-values-bulk > header h3,
.account-settings-whatsapp header h4 { font-size: 16px !important; }

/* Tarjeta del plan: lectura inmediata, sin rótulos tenues ni métricas tímidas. */
.account-hero-card small {
  color: #62698e !important;
  font-size: 16px !important;
  font-weight: 850;
  letter-spacing: .07em;
}
.account-hero-card h2 { font-size: 34px; }
.account-hero-card p {
  color: #59627a;
  font-size: 18px !important;
  font-weight: 600;
  line-height: 1.45;
}
.account-hero-card dt {
  color: #69748a;
  font-size: 14px !important;
  font-weight: 850;
  letter-spacing: .055em;
}
.account-hero-card dd {
  color: #26334b;
  font-size: 20px !important;
  font-weight: 900;
}

/* Plan y licencias: experiencia comercial clara, viva y sin microtipografía. */
.subscription-dialog > article > header {
  padding: 22px 28px;
  border-bottom: 0;
  background: linear-gradient(110deg,#fff 0%,#f7f4ff 58%,#eef8ff 100%);
}
.subscription-dialog > article > header p { color: #6552ce; font-size: 13px !important; }
.subscription-dialog > article > header h2 { font-size: 29px; letter-spacing: -.025em; }
.subscription-crown {
  width: 54px;
  height: 54px;
  border-radius: 17px;
  background: linear-gradient(145deg,#6555d8,#8068eb);
  box-shadow: 0 12px 25px rgba(92,72,206,.28);
}
.subscription-crown .app-icon { width: 28px; height: 28px; color: #ffc62f; }
.subscription-body { padding: 26px 28px 32px; background: #f5f7fc; }
#subscriptionWorkspace { gap: 22px; }

.subscription-current {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr);
  gap: 24px;
  padding: 24px 26px;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(115deg,#182a4d 0%,#2f55a9 50%,#7355d5 100%);
  box-shadow: 0 18px 38px rgba(35,55,111,.2);
}
.subscription-current::after {
  position: absolute;
  width: 220px;
  height: 220px;
  right: -85px;
  bottom: -140px;
  border: 34px solid rgba(255,255,255,.08);
  border-radius: 50%;
  content: "";
}
.subscription-current-plan,
.subscription-current-team { position: relative; z-index: 1; }
.subscription-current-plan { display: flex; align-items: center; gap: 18px; }
.subscription-current-plan > span {
  display: grid;
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 20px;
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.subscription-current-plan > span .app-icon { width: 34px; height: 34px; color: #ffca35; }
.subscription-current-plan > div { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.subscription-current-plan small,
.subscription-current-team > small { width: 100%; color: rgba(255,255,255,.72) !important; font-size: 12px !important; font-weight: 900; letter-spacing: .14em; }
.subscription-current-plan strong { color: #fff; font-size: 30px !important; line-height: 1; }
.subscription-current-plan em {
  padding: 5px 10px;
  border-radius: 999px;
  color: #dfffee;
  background: rgba(35,211,132,.2);
  font-size: 12px !important;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .05em;
}
.subscription-current-plan p { width: 100%; margin: 1px 0 0; color: rgba(255,255,255,.82); font-size: 16px !important; }
.subscription-current-team {
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 4px 0 4px 24px;
  border-left: 1px solid rgba(255,255,255,.2);
}
.subscription-current-team p { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.subscription-current-team p b { color: #fff; font-size: 30px !important; line-height: 1; }
.subscription-current-team p span,
.subscription-current-team p strong { color: rgba(255,255,255,.9); font-size: 16px !important; }
.subscription-current-seats { display: flex; gap: 7px; margin-top: 6px; }
.subscription-current-seats > span {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.14);
}
.subscription-current-seats > span.is-occupied { color: #fff; background: linear-gradient(145deg,#16c988,#2aaedf); box-shadow: 0 6px 14px rgba(0,21,65,.2); }
.subscription-current-seats .app-icon { width: 16px; height: 16px; }

#subscriptionOrderForm {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
}
.subscription-builder-heading {
  display: flex;
  grid-column: 1/-1;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 2px 3px 0;
}
.subscription-builder-heading p,
.subscription-builder-heading h3 { margin: 0; }
.subscription-builder-heading p { color: #6354cc; font-size: 12px !important; font-weight: 950; letter-spacing: .13em; }
.subscription-builder-heading h3 { margin-top: 4px; color: #24344f; font-size: 25px; letter-spacing: -.025em; }
.subscription-builder-heading > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 999px;
  color: #3f4f71;
  background: #e9edf8;
  font-size: 13px !important;
  font-weight: 800;
}
.subscription-builder-heading .app-icon { width: 17px; height: 17px; color: #6556cf; }

.subscription-step {
  gap: 17px;
  padding: 21px;
  border: 1px solid #e1e6f1;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(39,55,87,.06);
}
.subscription-step:nth-of-type(3) { grid-column: 1/-1; }
.subscription-step > header { gap: 13px; }
.subscription-step > header > span {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  color: #fff;
  background: linear-gradient(145deg,#4d7de0,#7158d7);
  font-size: 15px !important;
  box-shadow: 0 7px 14px rgba(93,83,207,.22);
}
.subscription-step > header > div { gap: 3px; }
.subscription-step > header strong { color: #253650; font-size: 18px !important; }
.subscription-step > header small { color: #738096; font-size: 14px !important; line-height: 1.35; }

.subscription-tier-options { gap: 13px; }
.subscription-tier-options label > span {
  position: relative;
  display: grid;
  min-height: 132px;
  grid-template-columns: 52px minmax(0,1fr);
  align-content: center;
  align-items: center;
  gap: 0 15px;
  padding: 18px 19px;
  overflow: hidden;
  border: 2px solid #e3e8f1;
  border-radius: 17px;
  background: linear-gradient(145deg,#fff,#f7f9fc);
}
.subscription-tier-options label > span::after {
  position: absolute;
  width: 110px;
  height: 110px;
  right: -70px;
  bottom: -70px;
  border: 18px solid rgba(69,120,218,.06);
  border-radius: 50%;
  content: "";
}
.subscription-tier-options label > span > .app-icon {
  width: 52px;
  height: 52px;
  grid-row: auto;
  padding: 13px;
  border-radius: 16px;
  color: #3476d6;
  background: #eaf3ff;
}
.subscription-tier-options .is-premium label > span,
.subscription-tier-options .is-premium > span { background: linear-gradient(145deg,#fff,#faf7ff); }
.subscription-tier-options .is-premium > span > .app-icon { color: #f4b51e; background: linear-gradient(145deg,#7056da,#8b6bea); }
.subscription-tier-options em {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #6952bd;
  background: #eee8ff;
  font-size: 10px !important;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .06em;
}
.subscription-tier-copy { display: grid; gap: 2px; }
.subscription-tier-copy small { color: #73809a; font-size: 11px !important; font-weight: 900; letter-spacing: .1em; }
.subscription-tier-copy b { color: #243550; font-size: 23px !important; line-height: 1.05; }
.subscription-tier-copy strong { color: #65738a; font-size: 14px !important; font-weight: 700; }
.subscription-option-check {
  position: absolute;
  z-index: 2;
  top: 13px;
  left: 13px;
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 2px solid #cbd4e2;
  border-radius: 50%;
  background: #fff;
}
.subscription-option-check::after { width: 9px; height: 9px; border-radius: 50%; background: #fff; content: ""; }
.subscription-tier-options input:checked + span,
.subscription-period-options input:checked + span,
.subscription-license-options input:checked + span {
  border-color: #5a70dc;
  background: linear-gradient(145deg,#f1f6ff,#f4efff);
  box-shadow: 0 12px 25px rgba(75,94,193,.14), inset 0 0 0 1px rgba(90,112,220,.12);
}
.subscription-tier-options input:checked + span .subscription-option-check,
.subscription-period-options input:checked + span .subscription-option-check,
.subscription-license-options input:checked + span .subscription-option-check { border-color: #536edf; background: #536edf; }
.subscription-tier-options label:hover > span,
.subscription-period-options label:hover > span,
.subscription-license-options label:hover > span { transform: translateY(-2px); border-color: #9ba9dc; box-shadow: 0 10px 22px rgba(56,73,116,.1); }
.subscription-tier-options label > span,
.subscription-period-options label > span,
.subscription-license-options label > span { transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; }

.subscription-period-options { gap: 12px; }
.subscription-period-options label > span {
  position: relative;
  min-height: 132px;
  grid-template-columns: 44px minmax(0,1fr);
  align-items: center;
  gap: 13px;
  padding: 19px 17px;
  border: 2px solid #e3e8f1;
  border-radius: 17px;
  text-align: left;
  background: linear-gradient(145deg,#fff,#f8fafc);
}
.subscription-period-options label > span > .app-icon { width: 43px; height: 43px; padding: 10px; border-radius: 14px; color: #188d99; background: #e5f8f8; }
.subscription-period-options label > span > span { display: grid; gap: 2px; }
.subscription-period-options small { color: #75839a; font-size: 10px !important; font-weight: 900; letter-spacing: .1em; }
.subscription-period-options b { color: #243550; font-size: 20px !important; }
.subscription-period-options strong { color: #67758b; font-size: 13px !important; }

.subscription-license-options { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.subscription-license-options label > span {
  position: relative;
  min-height: 170px;
  grid-template-columns: 1fr;
  align-content: start;
  align-items: start;
  gap: 14px;
  padding: 21px 18px 18px;
  border: 2px solid #e3e8f1;
  border-radius: 17px;
  background: linear-gradient(145deg,#fff,#f8fafc);
}
.subscription-license-seats { display: flex; min-height: 42px; align-items: center; gap: 5px; padding-left: 25px; }
.subscription-license-seat {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border-radius: 11px;
  color: #536edc;
  background: #e9edff;
  font-style: normal;
}
.subscription-license-seat .app-icon { width: 17px; height: 17px; }
.subscription-license-copy { display: grid; gap: 4px; }
.subscription-license-copy b { color: #253650; font-size: 18px !important; }
.subscription-license-copy strong { color: #0a9760; font-size: 15px !important; }
.subscription-license-copy small { color: #718096; font-size: 13px !important; line-height: 1.35; }
.subscription-license-options input:checked + span .subscription-license-seat { color: #fff; background: linear-gradient(145deg,#526bdd,#2eb2b2); box-shadow: 0 5px 12px rgba(72,105,198,.2); }
.subscription-tier-options input:disabled + span,
.subscription-license-options input:disabled + span { opacity: .45; filter: grayscale(.28); transform: none; }
#subscriptionTierRestriction {
  padding: 12px 14px 12px 42px;
  border: 1px solid #f1d894;
  border-radius: 12px;
  color: #725615;
  background: #fff8df;
  font-size: 14px !important;
  line-height: 1.45;
}

.subscription-manual-quote {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 15px 17px;
  border: 1px dashed #ac98df;
  border-radius: 15px;
  color: #563c9b;
  background: linear-gradient(110deg,#faf7ff,#f2f8ff);
}
.subscription-manual-quote > span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; color: #6a53bf; background: #ebe5ff; }
.subscription-manual-quote .app-icon { width: 23px; height: 23px; }
.subscription-manual-quote div { gap: 3px; }
.subscription-manual-quote strong { color: #46317f; font-size: 15px !important; }
.subscription-manual-quote small { color: #72678c; font-size: 13px !important; }
.subscription-manual-quote > em { padding: 7px 10px; border-radius: 999px; color: #6549ae; background: #e8e0fb; font-size: 11px !important; font-style: normal; font-weight: 900; letter-spacing: .05em; }

.subscription-price-summary {
  position: relative;
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: 52px minmax(0,1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 21px 22px;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(110deg,#176fc4,#2765d8 53%,#7651d5);
  box-shadow: 0 15px 32px rgba(35,92,188,.23);
}
.subscription-price-icon { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 15px; color: #fff; background: rgba(255,255,255,.16); }
.subscription-price-icon .app-icon { width: 25px; height: 25px; }
.subscription-price-summary > div:nth-child(2) { display: grid; gap: 3px; }
.subscription-price-summary > div:nth-child(2) small,
.subscription-price-total small { color: rgba(255,255,255,.7); font-size: 10px !important; font-weight: 900; letter-spacing: .12em; }
.subscription-price-summary > div:nth-child(2) b { color: #fff; font-size: 17px !important; }
.subscription-price-summary > div:nth-child(2) span { color: rgba(255,255,255,.82); font-size: 14px !important; }
.subscription-price-total { display: grid; min-width: 150px; justify-items: end; gap: 2px; padding-right: 4px; }
.subscription-price-total strong { color: #fff; font-size: 29px !important; line-height: 1; }
.subscription-price-summary button {
  min-height: 54px;
  padding: 13px 19px;
  border-radius: 14px;
  color: #2351aa;
  background: #fff;
  box-shadow: 0 9px 20px rgba(19,38,92,.22);
  font-size: 14px !important;
  letter-spacing: .01em;
}
.subscription-price-summary button .app-icon { width: 18px; height: 18px; }
.subscription-form-note {
  display: flex;
  grid-column: 1/-1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -4px 0 0;
  color: #6f7b8f;
  font-size: 13px !important;
}
.subscription-form-note .app-icon { width: 17px; height: 17px; color: #286dc9; }

@media (max-width: 1050px) {
  #subscriptionOrderForm { grid-template-columns: 1fr; }
  .subscription-builder-heading,
  .subscription-step:nth-of-type(3),
  .subscription-price-summary,
  .subscription-form-note { grid-column: auto; }
  .subscription-price-summary { grid-template-columns: 48px minmax(0,1fr) auto; }
  .subscription-price-summary button { grid-column: 1/-1; justify-content: center; }
}

@media (max-width: 700px) {
  .subscription-dialog > article > header h2 { font-size: 24px; }
  .subscription-current { grid-template-columns: 1fr; padding: 21px; }
  .subscription-current-team { padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.2); border-left: 0; }
  .subscription-builder-heading { align-items: flex-start; flex-direction: column; }
  .subscription-builder-heading h3 { font-size: 22px; }
  .subscription-tier-options,
  .subscription-period-options,
  .subscription-license-options { grid-template-columns: 1fr; }
  .subscription-tier-options label > span,
  .subscription-period-options label > span,
  .subscription-license-options label > span { min-height: 0; }
  .subscription-manual-quote { grid-template-columns: 44px minmax(0,1fr); }
  .subscription-manual-quote > em { grid-column: 1/-1; justify-self: start; }
  .subscription-price-summary { grid-template-columns: 46px minmax(0,1fr); }
  .subscription-price-total { grid-column: 1/-1; justify-items: start; padding: 13px 0 0; border-top: 1px solid rgba(255,255,255,.2); }
  .subscription-price-summary button { grid-column: 1/-1; width: 100%; }
}

/* Mi Cuenta: navegación estable con módulos integrados, sin ventanas modales. */
.account-workbench {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  scroll-margin-top: 82px;
}

.account-sidebar {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #dbe3ed;
  border-radius: 20px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 32px rgba(36,53,77,.08);
}

.account-profile-card {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr);
  align-items: center;
  gap: 13px;
  padding: 18px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(145deg,#202c44,#111a2d);
  box-shadow: 0 10px 24px rgba(17,26,45,.2);
}

.account-profile-mark {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg,#347fe7,#6c54df);
}
.account-profile-mark .app-icon { width: 25px; height: 25px; }
.account-profile-card > div { display: grid; min-width: 0; gap: 2px; }
.account-profile-card small { color: #aebbd0; font-size: 12px !important; font-weight: 850; letter-spacing: .09em; }
.account-profile-card strong { color: #fff; font-size: 20px !important; }
.account-profile-card > div > span { overflow: hidden; color: #d2d9e5; font-size: 13px !important; text-overflow: ellipsis; white-space: nowrap; }
.account-profile-card > div > span b { color: #fff; font-size: 13px !important; }

.account-section-nav { display: grid; gap: 7px; }
.account-section-nav > button {
  display: grid;
  width: 100%;
  min-height: 62px;
  grid-template-columns: 40px minmax(0,1fr) auto;
  align-items: center;
  column-gap: 11px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: #44536a;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s,background .16s,color .16s,transform .16s;
}
.account-section-nav > button > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 11px;
  color: #59708e;
  background: #eef3f8;
}
.account-section-nav .app-icon { width: 19px; height: 19px; }
.account-section-nav b { align-self: center; font-size: 15px !important; line-height: 1.25; }
.account-section-nav small { align-self: center; color: #8995a6; font-size: 12px !important; font-weight: 700; text-align: right; }
.account-section-nav > button:hover:not(:disabled) { border-color: #cbd9ea; background: #f6f9fd; transform: translateX(2px); }
.account-section-nav > button.is-active {
  border-color: #91bdf0;
  color: #1e67b6;
  background: linear-gradient(110deg,#edf6ff,#f4f1ff);
  box-shadow: 0 6px 16px rgba(45,111,190,.1);
}
.account-section-nav > button.is-active > span { color: #fff; background: linear-gradient(135deg,#2e86df,#6754d8); }
.account-section-nav > button.is-active small { color: #4e79a8; }
.account-section-nav > button:disabled { cursor: not-allowed; opacity: .48; }

/* Mi Cuenta · accesos QR. Todo el bloque queda aislado bajo su diálogo. */
.account-qr-dialog { width: 100%; max-width: none; margin: 0; padding: 0; border: 0; color: #22324b; background: transparent; }
.account-qr-dialog::backdrop { background: rgba(19,35,60,.44); backdrop-filter: blur(4px); }
.account-qr-dialog[open] { display: block; }
.account-qr-dialog > article { overflow: hidden; border: 1px solid #dbe3ef; border-radius: 24px; background: #f6f8fc; box-shadow: 0 24px 65px rgba(36,55,88,.16); }
.account-qr-dialog > article > header { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; border-bottom: 1px solid #e1e7f0; background: #fff; }
.account-qr-dialog > article > header > div { display: flex; align-items: center; gap: 15px; }
.account-qr-dialog > article > header > div > span { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 18px; color: #fff; background: linear-gradient(145deg,#2d86ee,#6650dc); box-shadow: 0 12px 25px rgba(66,89,216,.25); }
.account-qr-dialog > article > header .app-icon { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.account-qr-dialog > article > header p { margin: 0 0 4px; color: #5c67c9; font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.account-qr-dialog > article > header h2 { margin: 0; font-size: 27px; }
.account-qr-dialog > article > header > button { display: grid; width: 42px; height: 42px; place-items: center; border: 0; border-radius: 14px; color: #637087; background: #eef2f7; cursor: pointer; }
.account-qr-body { padding: 24px; }
.account-qr-status { min-height: 52px; margin: 0; padding: 16px; border-radius: 14px; color: #64728a; background: #fff; font-size: 14px; font-weight: 750; }
.account-qr-intro { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; padding: 22px 24px; border-radius: 22px; color: #fff; background: linear-gradient(120deg,#17376c,#2b69c4 60%,#6752d8); box-shadow: 0 18px 38px rgba(39,78,150,.2); }
.account-qr-intro > span { display: grid; flex: 0 0 auto; width: 66px; height: 66px; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 22px; background: rgba(255,255,255,.14); }
.account-qr-intro .app-icon { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.account-qr-intro p { margin: 0 0 5px; color: #bcd7ff; font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.account-qr-intro h3 { margin: 0 0 7px; font-size: 25px; }
.account-qr-intro div > span { color: #e1ebfb; font-size: 15px; line-height: 1.5; }
.account-qr-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.account-qr-card { display: grid; grid-template-columns: minmax(0,1fr) 210px; gap: 15px 22px; align-items: center; padding: 24px; border: 2px solid #dfe6f1; border-radius: 24px; background: #fff; box-shadow: 0 13px 30px rgba(41,62,96,.08); }
.account-qr-card.is-registration { border-top-color: #4e5ee2; }
.account-qr-card.is-reception { border-top-color: #1685d4; }
.account-qr-card.is-paused { filter: grayscale(.72); opacity: .72; }
.account-qr-card > header { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; align-items: center; gap: 13px; }
.account-qr-card > header > span { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 17px; color: #fff; background: linear-gradient(145deg,#4968ed,#734fd7); }
.account-qr-card.is-reception > header > span { background: linear-gradient(145deg,#168bdc,#2964cb); }
.account-qr-card > header .app-icon { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.account-qr-card > header p { margin: 0 0 3px; color: #77839a; font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.account-qr-card > header h3 { margin: 0; font-size: 22px; line-height: 1.15; }
.account-qr-card > header em { padding: 8px 11px; border-radius: 999px; color: #187550; background: #e4f8ef; font-size: 12px; font-style: normal; font-weight: 900; }
.account-qr-card.is-paused > header em { color: #6e7480; background: #edf0f3; }
.account-qr-description { margin: 0; color: #65738a; font-size: 14px; line-height: 1.55; }
.account-qr-artwork { grid-column: 2; grid-row: 1 / span 3; overflow: hidden; padding: 10px; border: 1px solid #e0e7f1; border-radius: 19px; background: #fff; }
.account-qr-artwork svg { display: block; width: 100%; height: auto; }
.account-qr-assignment { display: flex; align-items: center; gap: 8px; color: #4d5e78; font-size: 13px; line-height: 1.4; }
.account-qr-assignment .app-icon { flex: 0 0 auto; width: 21px; height: 21px; fill: none; stroke: #446ed0; stroke-width: 1.8; }
.account-qr-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; padding-top: 4px; }
.account-qr-actions > button { display: flex; min-height: 46px; align-items: center; justify-content: center; gap: 7px; padding: 10px; border: 1px solid #d8e1ee; border-radius: 13px; color: #345175; background: #f8faff; font-size: 12px; font-weight: 900; cursor: pointer; }
.account-qr-actions > button:hover:not(:disabled) { border-color: #72a4ed; color: #225db2; background: #eef6ff; }
.account-qr-actions > button:last-child { color: #80557c; }
.account-qr-actions .app-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.account-qr-security { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; padding: 17px 19px; border: 1px solid #cfe3df; border-radius: 17px; color: #526b70; background: #eff9f7; }
.account-qr-security .app-icon { flex: 0 0 auto; width: 25px; height: 25px; fill: none; stroke: #168a80; stroke-width: 1.8; }
.account-qr-security p { margin: 0; }
.account-qr-security strong { display: block; margin-bottom: 3px; color: #28525a; font-size: 14px; }
.account-qr-security span { font-size: 13px; line-height: 1.5; }
.account-qr-dialog > article > footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 24px; border-top: 1px solid #e0e6ef; background: #fff; }
.account-qr-dialog > article > footer small { display: flex; align-items: center; gap: 8px; color: #65738a; font-size: 12px; font-weight: 700; }
.account-qr-dialog > article > footer .app-icon { width: 19px; height: 19px; fill: none; stroke: #4b69cb; stroke-width: 1.8; }
.account-qr-dialog > article > footer button { min-height: 44px; padding: 0 20px; border: 1px solid #bfd0e5; border-radius: 13px; color: #31587f; background: #f6f9fd; font-size: 12px; font-weight: 900; cursor: pointer; }
@media (max-width: 1350px) { .account-qr-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .account-qr-body { padding: 14px; } .account-qr-intro { align-items: flex-start; padding: 18px; } .account-qr-intro > span { width: 54px; height: 54px; border-radius: 18px; } .account-qr-card { grid-template-columns: 1fr; padding: 18px; } .account-qr-artwork { grid-column: 1; grid-row: auto; width: min(100%,260px); justify-self: center; } .account-qr-actions { grid-template-columns: repeat(2,minmax(0,1fr)); } .account-qr-dialog > article > footer small { display: none; } .account-qr-dialog > article > footer { justify-content: flex-end; } }

/* Agenda Online vive dentro de Mi Cuenta; todos sus estilos quedan aislados en este diálogo. */
.account-online-booking { width: 100%; max-width: none; margin: 0; padding: 0; border: 0; color: #20314a; background: transparent; }
.account-online-booking::backdrop { background: rgba(19,35,60,.44); backdrop-filter: blur(4px); }
.account-online-booking[open] { display: block; }
.account-online-booking > article { overflow: hidden; border: 1px solid #dbe3ef; border-radius: 24px; background: #f5f8fc; box-shadow: 0 24px 65px rgba(36,55,88,.16); }
.account-online-booking > article > header, .account-online-booking > article > footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 25px; border-bottom: 1px solid #e0e7f0; background: #fff; }
.account-online-booking > article > header > div { display: flex; align-items: center; gap: 14px; }
.account-online-booking > article > header > div > span { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 17px; color: #fff; background: linear-gradient(145deg,#2d86ee,#6650dc); box-shadow: 0 12px 25px rgba(66,89,216,.25); }
.account-online-booking > article > header .app-icon { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.account-online-booking > article > header p { margin: 0 0 3px; color: #586cc9; font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.account-online-booking > article > header h2 { margin: 0; font-size: 25px; line-height: 1.1; }
.account-online-booking > article > header > button { display: grid; width: 42px; height: 42px; place-items: center; padding: 0; border: 0; border-radius: 14px; color: #637087; background: #eef2f7; cursor: pointer; }
.account-online-booking__body { padding: 22px; }
.account-online-booking__status { min-height: 50px; margin: 0; padding: 16px; border-radius: 14px; color: #64728a; background: #fff; font-size: 14px; font-weight: 750; }
.account-online-booking__hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 25px; border-radius: 22px; color: #fff; background: linear-gradient(120deg,#17376c,#2b69c4 60%,#6752d8); box-shadow: 0 18px 38px rgba(39,78,150,.2); }
.account-online-booking__hero p { margin: 0 0 5px; color: #bcd7ff; font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.account-online-booking__hero h3 { margin: 0 0 6px; font-size: 26px; }
.account-online-booking__hero div > span { color: #e1ebfb; font-size: 14px; line-height: 1.5; }
.account-online-booking__hero-icon { display: grid; width: 66px; height: 66px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 22px; background: rgba(255,255,255,.14); }
.account-online-booking__hero-icon .app-icon { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.account-online-booking__nav { display: grid; grid-template-columns: repeat(auto-fit,minmax(112px,1fr)); gap: 8px; padding: 17px 2px; }
.account-online-booking__nav button { min-width: 0; min-height: 42px; padding: 9px 12px; border: 1px solid #d8e1ef; border-radius: 12px; color: #526681; background: #fff; font-size: 12px; font-weight: 850; white-space: normal; cursor: pointer; }
.account-online-booking__nav button.is-active { border-color: transparent; color: #fff; background: linear-gradient(135deg,#2d86ee,#6650dc); box-shadow: 0 8px 18px rgba(66,89,216,.2); }
.account-online-booking__nav button:focus-visible { outline: 3px solid rgba(47,115,222,.28); outline-offset: 2px; }
.account-online-booking__panel { padding: 22px; border: 1px solid #dde5f0; border-radius: 20px; background: #fff; }
.account-online-booking__panel > header { margin-bottom: 18px; }
.account-online-booking__panel > header p { margin: 0 0 4px; color: #5e70ca; font-size: 12px; font-weight: 900; letter-spacing: .11em; }
.account-online-booking__panel > header h3 { margin: 0 0 5px; color: #22334e; font-size: 22px; }
.account-online-booking__panel > header > span { color: #5e6d82; font-size: 14px; line-height: 1.45; }
.account-online-booking__fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.account-online-booking__fields label, .account-online-booking__coverage-grid form > label { display: grid; gap: 7px; color: #4e6078; font-size: 13px; font-weight: 800; }
.account-online-booking__fields input, .account-online-booking__fields select, .account-online-booking__fields textarea, .account-online-booking__coverage-grid input, .account-online-booking__coverage-grid select, .account-online-booking__share input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #d5dfed; border-radius: 11px; outline: 0; color: #273a57; background: #fbfcff; font: inherit; font-size: 14px; }
.account-online-booking__fields textarea { min-height: 86px; resize: vertical; }
.account-online-booking__fields input:focus, .account-online-booking__fields select:focus, .account-online-booking__fields textarea:focus, .account-online-booking__coverage-grid input:focus, .account-online-booking__coverage-grid select:focus { border-color: #5f86df; box-shadow: 0 0 0 3px rgba(74,116,216,.13); }
.account-online-booking__wide { grid-column: 1 / -1; }
.account-online-booking__slug { display: grid; grid-template-columns: auto minmax(0,1fr); }
.account-online-booking__slug b { display: grid; min-height: 44px; place-items: center; padding: 0 11px; border: 1px solid #d5dfed; border-right: 0; border-radius: 11px 0 0 11px; color: #64758e; background: #eef3fa; font-size: 12px; }
.account-online-booking__slug input { border-radius: 0 11px 11px 0; }
.account-online-booking__switch { display: flex !important; min-height: 44px; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #d5dfed; border-radius: 11px; color: #314865 !important; background: #fbfcff; }
.account-online-booking__switch input { width: 18px; min-height: 18px; margin: 0; accent-color: #4e65dc; }
.account-online-booking__fields fieldset { margin: 0; padding: 12px; border: 1px solid #d5dfed; border-radius: 11px; }
.account-online-booking__fields legend { padding: 0 4px; color: #4e6078; font-size: 13px; font-weight: 800; }
.account-online-booking__checks { display: flex; flex-wrap: wrap; gap: 8px; }
.account-online-booking__checks label { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 9px; color: #334b6c; background: #eef3fb; font-size: 12px; }
.account-online-booking__checks input { width: 16px; min-height: 16px; margin: 0; }
.account-online-booking__form-message { min-height: 18px; margin: 14px 0; color: #b73b52; font-size: 12px; font-weight: 750; }
.account-online-booking__primary { min-height: 45px; padding: 10px 17px; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(135deg,#2d86ee,#6650dc); box-shadow: 0 9px 18px rgba(66,89,216,.22); font-size: 12px; font-weight: 900; cursor: pointer; }
.account-online-booking__primary:disabled { cursor: not-allowed; opacity: .55; box-shadow: none; }
.account-online-booking__profile-layout { display: grid; grid-template-columns: minmax(220px,.78fr) minmax(0,1.5fr); gap: 17px; }
.account-online-booking__profile-layout > aside, .account-online-booking__list { display: grid; align-content: start; gap: 9px; }
.account-online-booking__new-service { display: inline-flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border: 1px dashed #aec5e8; border-radius: 13px; color: #315d9f; background: #f3f7ff; font-size: 12px; font-weight: 900; letter-spacing: .045em; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; }
.account-online-booking__new-service .app-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.account-online-booking__new-service:hover:not(:disabled), .account-online-booking__new-service:focus-visible { border-color: #638cdb; color: #244b8c; background: #eaf2ff; box-shadow: 0 7px 16px rgba(54, 101, 183, .12); transform: translateY(-1px); }
.account-online-booking__new-service:focus-visible { outline: 3px solid rgba(74, 116, 216, .2); outline-offset: 2px; }
.account-online-booking__new-service:disabled { cursor: not-allowed; opacity: .58; }
.account-online-booking__item { display: grid; gap: 5px; padding: 13px; border: 1px solid #dce5f1; border-radius: 13px; color: #4c607d; background: #f8faff; font-size: 12px; }
.account-online-booking__item strong { color: #263b59; font-size: 14px; }
.account-online-booking__item button { justify-self: start; min-height: 32px; padding: 6px 9px; border: 1px solid #cbd9ef; border-radius: 8px; color: #3f65aa; background: #fff; font-size: 12px; font-weight: 800; cursor: pointer; }
.account-online-booking__coverage-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; }
.account-online-booking__coverage-grid form { display: grid; align-content: start; gap: 13px; padding: 16px; border: 1px solid #dae4f0; border-radius: 15px; background: #f8faff; }
.account-online-booking__coverage-grid h4 { margin: 0; color: #2a4060; font-size: 16px; }
.account-online-booking__payment { display: flex; align-items: center; gap: 15px; padding: 19px; border: 1px solid #dce6f2; border-radius: 16px; background: linear-gradient(135deg,#f8fbff,#f3f0ff); }
.account-online-booking__payment > span { display: grid; width: 52px; height: 52px; flex: 0 0 auto; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(145deg,#2e86df,#6754d8); }
.account-online-booking__payment .app-icon { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.account-online-booking__payment > div { min-width: 0; flex: 1 1 auto; }
.account-online-booking__payment small, .account-online-booking__payment strong, .account-online-booking__payment p { display: block; }
.account-online-booking__payment small { color: #53638f; font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.account-online-booking__payment strong { margin: 3px 0; color: #263d65; font-size: 18px; }
.account-online-booking__payment p { margin: 0; color: #596981; font-size: 13px; line-height: 1.45; }
.account-online-booking__payment > button { min-height: 42px; flex: 0 0 auto; padding: 9px 13px; border: 1px solid #cbd7e8; border-radius: 11px; color: #617089; background: #edf2f8; font-size: 12px; font-weight: 900; cursor: not-allowed; }
.account-online-booking__readiness { display: grid; gap: 13px; margin-top: 14px; padding: 16px; border: 1px solid #d9e4f2; border-radius: 15px; background: #f8fbff; }
.account-online-booking__readiness > header { display: grid; gap: 3px; }
.account-online-booking__readiness > header small { color: #526fc4; font-size: 12px; font-weight: 900; letter-spacing: .09em; }
.account-online-booking__readiness > header strong { color: #293f61; font-size: 16px; }
.account-online-booking__readiness > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.account-online-booking__readiness-item { display: grid; gap: 3px; padding: 10px 11px; border: 1px solid #dce7f3; border-radius: 10px; background: #fff; }
.account-online-booking__readiness-item b { color: #28768d; font-size: 12px; }
.account-online-booking__readiness-item em { color: #50647e; font-size: 13px; font-style: normal; font-weight: 750; }
.account-online-booking__readiness > p { margin: 0; color: #5e6d82; font-size: 13px; line-height: 1.45; }
.account-online-booking__note, .account-online-booking__blockers { display: flex; align-items: flex-start; gap: 11px; margin-top: 16px; padding: 14px; border: 1px solid #cde0ed; border-radius: 13px; color: #526d79; background: #eff9fb; }
.account-online-booking__note .app-icon { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: #228b9c; stroke-width: 1.8; }
.account-online-booking__note p { margin: 0; }
.account-online-booking__note strong { display: block; margin-bottom: 3px; color: #28525a; font-size: 14px; }
.account-online-booking__note span { font-size: 13px; line-height: 1.45; }
.account-online-booking__share { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 20px; align-items: center; }
.account-online-booking__share label { display: grid; gap: 7px; color: #4e6078; font-size: 13px; font-weight: 800; }
.account-online-booking__share-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.account-online-booking__share-actions button { display: flex; min-height: 40px; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid #d2dfef; border-radius: 10px; color: #365a91; background: #f8fbff; font-size: 12px; font-weight: 850; cursor: pointer; }
.account-online-booking__share-actions .app-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.account-online-booking__share > div > p { color: #5f6f85; font-size: 13px; line-height: 1.45; }
.account-online-booking__qr { min-height: 220px; padding: 10px; border: 1px solid #dce5f1; border-radius: 16px; background: #fff; }
.account-online-booking__qr svg { display: block; width: 100%; height: auto; }
.account-online-booking__publication { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 15px 17px; border: 1px solid #dbe4f0; border-radius: 14px; background: #f8faff; color: #516781; font-size: 13px; font-weight: 700; }
.account-online-booking > article > footer { border-top: 1px solid #e0e7f0; border-bottom: 0; }
.account-online-booking > article > footer small { display: flex; align-items: center; gap: 7px; color: #65738a; font-size: 12px; font-weight: 700; }
.account-online-booking > article > footer small .app-icon { width: 18px; height: 18px; fill: none; stroke: #4b69cb; stroke-width: 1.8; }
.account-online-booking > article > footer button { min-height: 44px; padding: 0 20px; border: 1px solid #bfd0e5; border-radius: 13px; color: #31587f; background: #f6f9fd; font-size: 12px; font-weight: 900; cursor: pointer; }
@media (max-width: 860px) { .account-online-booking__body { padding: 14px; } .account-online-booking__profile-layout, .account-online-booking__coverage-grid, .account-online-booking__share { grid-template-columns: 1fr; } .account-online-booking__qr { width: min(100%,250px); justify-self: center; } }
@media (max-width: 620px) { .account-online-booking > article > header, .account-online-booking > article > footer { padding: 15px; } .account-online-booking > article > header h2 { font-size: 20px; } .account-online-booking__hero { align-items: flex-start; padding: 18px; } .account-online-booking__hero-icon { width: 52px; height: 52px; border-radius: 17px; } .account-online-booking__nav { grid-template-columns: repeat(2,minmax(0,1fr)); } .account-online-booking__fields, .account-online-booking__readiness > div { grid-template-columns: 1fr; } .account-online-booking__payment { align-items: flex-start; flex-wrap: wrap; } .account-online-booking__payment > button { width: 100%; } .account-online-booking__wide { grid-column: auto; } .account-online-booking__publication { align-items: stretch; flex-direction: column; } .account-online-booking__publication button { width: 100%; } .account-online-booking > article > footer small { display: none; } .account-online-booking > article > footer { justify-content: flex-end; } }

.account-panel-shell {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dbe3ed;
  border-radius: 22px;
  background: #f7f9fc;
  box-shadow: 0 14px 38px rgba(36,53,77,.08);
}
.account-panel-welcome { display: grid; gap: 24px; padding: 28px; }
.account-panel-welcome > header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 4px 2px 22px; border-bottom: 1px solid #dde5ee; }
.account-panel-welcome > header div { display: grid; gap: 4px; }
.account-panel-welcome > header p { margin: 0; color: #347bc0; font-size: 13px !important; font-weight: 900; letter-spacing: .12em; }
.account-panel-welcome > header h2 { margin: 0; color: #29384d; font-size: clamp(25px,2.5vw,34px); }
.account-panel-welcome > header div > span { color: #68778b; font-size: 16px !important; line-height: 1.5; }
.account-welcome-icon { display: grid; width: 62px; height: 62px; flex: 0 0 62px; place-items: center; border-radius: 18px; color: #fff; background: linear-gradient(135deg,#2e86df,#6754d8); box-shadow: 0 10px 22px rgba(62,92,195,.22); }
.account-welcome-icon .app-icon { width: 28px; height: 28px; }

.account-message-prompt {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid #b9d8ef;
  border-left: 5px solid #3386d5;
  border-radius: 17px;
  color: #294761;
  background: linear-gradient(112deg,#eef8ff,#f5f4ff);
}
.account-message-prompt > span { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(135deg,#3186d8,#6553d4); box-shadow: 0 8px 18px rgba(53,112,202,.2); }
.account-message-prompt > span .app-icon { width: 25px; height: 25px; }
.account-message-prompt > div { display: grid; min-width: 0; gap: 3px; }
.account-message-prompt p { margin: 0; color: #2f76b7; font-size: 12px !important; font-weight: 900; letter-spacing: .1em; }
.account-message-prompt h3 { margin: 0; color: #2d405a; font-size: 20px; }
.account-message-prompt h3 b { color: #2378c7; font-size: 20px !important; }
.account-message-prompt > div > span { color: #63768a; font-size: 14px !important; line-height: 1.5; }
.account-message-prompt > button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 8px; padding: 10px 15px; border: 0; border-radius: 11px; color: #fff; background: #2e83d5; box-shadow: 0 7px 16px rgba(46,131,213,.2); font: inherit; font-size: 14px !important; font-weight: 850; cursor: pointer; white-space: nowrap; }
.account-message-prompt > button .app-icon { width: 18px; height: 18px; }

.account-summary-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.account-summary-grid > article {
  display: grid;
  min-width: 0;
  grid-template-columns: 48px minmax(0,1fr);
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid #dee6ef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(39,57,81,.045);
}
.account-summary-grid > article > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; color: #337bc2; background: #edf6ff; }
.account-summary-grid > article:nth-child(2) > span { color: #7056c8; background: #f2efff; }
.account-summary-grid > article:nth-child(3) > span { color: #bd7c0d; background: #fff6df; }
.account-summary-grid > article:nth-child(4) > span { color: #526bc9; background: #eff2ff; }
.account-summary-grid > article:nth-child(5) > span { color: #526172; background: #f0f3f6; }
.account-summary-grid > article:nth-child(6) > span { color: #168ea7; background: #eaf9fb; }
.account-summary-grid .app-icon { width: 22px; height: 22px; }
.account-summary-grid article > div { display: grid; min-width: 0; gap: 3px; }
.account-summary-grid small { color: #7d899a; font-size: 12px !important; font-weight: 900; letter-spacing: .09em; }
.account-summary-grid strong { color: #2f3d52; font-size: 18px !important; }
.account-summary-grid strong b { font-size: 20px !important; }
.account-summary-grid p { margin: 0; color: #718094; font-size: 14px !important; line-height: 1.4; }
.account-summary-grid p b { color: #46566c; font-size: 14px !important; }
.account-panel-welcome > aside { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border: 1px solid #cfe3db; border-left: 5px solid #1aa473; border-radius: 13px; color: #286d57; background: #f0faf6; }
.account-panel-welcome > aside > .app-icon { width: 21px; height: 21px; flex: 0 0 21px; }
.account-panel-welcome > aside p { display: grid; gap: 3px; margin: 0; }
.account-panel-welcome > aside strong { font-size: 15px !important; }
.account-panel-welcome > aside span { color: #5e786f; font-size: 14px !important; line-height: 1.5; }

.account-panel-host { min-width: 0; }
.account-inline-panel {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.account-inline-panel::backdrop { display: none !important; background: transparent !important; backdrop-filter: none !important; }
.account-inline-panel > article { max-height: none !important; }
.account-inline-panel > article > header { border-radius: 0 !important; }
.account-inline-panel > article > header > button[aria-label="Cerrar"] { display: none !important; }
.account-inline-panel.account-online-booking > article > header > button[aria-label="Cerrar"] { display: grid !important; }
.account-inline-panel :is(.patient-export-body,.account-signature-body,.account-settings-body,.account-reminders-body,.message-pack-body,.subscription-body,.professional-body,.account-availability-body,.treatment-values-body) {
  max-height: none !important;
  overflow: visible !important;
}
.account-inline-panel > article > footer { position: static; border-radius: 0 0 22px 22px; }
.account-inline-panel > article > footer > button { min-height: 44px; padding-inline: 18px; }

/* Resumen de cuenta: información útil con una jerarquía más cálida y visible. */
.account-profile-card > div > span { overflow: visible; text-overflow: clip; white-space: normal; }
.account-profile-mark { color: #347bc0; background: #fff; box-shadow: 0 7px 16px rgba(4,13,31,.18); }
.account-plan-mark.is-premium-plan .app-icon { color: #e9b126; }
#accountProfessionalName { color: #d9e4f4; font-size: 13px !important; letter-spacing: .01em; text-transform: none; }
.account-panel-welcome > header {
  position: relative;
  overflow: hidden;
  padding: 23px 24px;
  border: 0;
  border-radius: 17px;
  background: linear-gradient(120deg,#263f69,#376fc0 58%,#6a58c9);
  box-shadow: 0 12px 26px rgba(49,84,153,.19);
}
.account-panel-welcome > header::after { position: absolute; width: 180px; height: 180px; top: -112px; right: 24px; border-radius: 50%; background: rgba(255,255,255,.11); content: ''; }
.account-panel-welcome > header p { color: #d9edff; }
.account-panel-welcome > header h2 { color: #fff; }
.account-panel-welcome > header div > span { color: #e8f0ff; }
.account-welcome-icon { z-index: 1; color: #ffce47; background: rgba(255,255,255,.16); box-shadow: none; }
.account-summary-grid > article { position: relative; overflow: hidden; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.account-summary-grid > article:hover { border-color: #a8c7ed; box-shadow: 0 12px 24px rgba(39,76,128,.1); transform: translateY(-2px); }
.account-summary-grid > article:first-child { grid-column: span 2; border-color: #a9d5ec; color: #fff; background: linear-gradient(112deg,#1779b9,#3b6bc3 62%,#7159c7); box-shadow: 0 12px 24px rgba(49,103,185,.18); }
.account-summary-grid > article:first-child::after { position: absolute; width: 142px; height: 142px; right: -48px; bottom: -78px; border: 20px solid rgba(255,255,255,.12); border-radius: 50%; content: ''; }
.account-summary-grid > article:first-child > span { position: relative; z-index: 1; color: #167ab9; background: #fff; box-shadow: 0 6px 14px rgba(15,61,117,.18); }
.account-summary-grid > article:first-child small, .account-summary-grid > article:first-child strong, .account-summary-grid > article:first-child p, .account-summary-grid > article:first-child p b { position: relative; z-index: 1; color: #fff; }
.account-summary-grid > article:first-child small { color: #d8ecff; }
.account-summary-grid > article:first-child p b { color: #ffe28a; }

/* Los canales se leen en el orden operativo: WhatsApp a la izquierda, e-mail a la derecha. */
#accountRemindersForm > .account-reminder-channel.is-whatsapp { grid-column: 1; grid-row: 1; }
#accountRemindersForm > .account-reminder-channel.is-email { grid-column: 2; grid-row: 1; }

/* Selecciones de plan: los períodos recuperan un radio visible y las licencias ganan presencia. */
.subscription-period-options label > span { position: relative; grid-template-columns: 16px minmax(0,1fr); align-items: center; gap: 1px 8px; text-align: left; }
.subscription-period-options label > span::before { width: 13px; height: 13px; grid-row: 1 / 3; border: 2px solid #aab6c6; border-radius: 50%; box-sizing: border-box; content: ''; }
.subscription-period-options input:checked + span::before { border-color: #6655c4; box-shadow: inset 0 0 0 3px #f4f2ff; background: #6655c4; }
.subscription-period-options small { grid-column: 2; }
.subscription-license-options label > span { position: relative; grid-template-columns: 46px minmax(0,1fr); gap: 3px 11px; padding: 15px; }
.subscription-license-options b { width: 42px; height: 42px; border-radius: 13px; font-size: 20px; }
.subscription-license-options strong { font-size: 13px; }
.subscription-license-options small { font-size: 11px; }
.subscription-license-options input:checked + span { border-color: #2ba976; background: linear-gradient(135deg,#edfff6,#f5f1ff); box-shadow: 0 0 0 2px rgba(43,169,118,.14),0 9px 18px rgba(38,136,96,.1); }
.subscription-license-options input:checked + span b { color: #fff; background: linear-gradient(135deg,#18a96a,#3c8fc9); box-shadow: 0 5px 12px rgba(24,169,106,.2); }

@media (max-width: 680px) {
  .account-panel-welcome > header { padding: 20px 18px; }
  .account-summary-grid > article:first-child { grid-column: auto; }
}

@media (max-width: 980px) {
  .account-workbench { grid-template-columns: 1fr; }
  .account-sidebar { position: static; }
  .account-section-nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .account-section-nav > button { min-width: 0; }
  .account-section-nav > button:hover:not(:disabled) { transform: none; }
}

@media (max-width: 680px) {
  .account-sidebar { padding: 12px; border-radius: 17px; }
  .account-profile-card { padding: 14px; }
  .account-panel-shell { border-radius: 17px; }
  .account-panel-welcome { gap: 18px; padding: 18px 14px; }
  .account-panel-welcome > header { align-items: flex-start; }
  .account-welcome-icon { width: 48px; height: 48px; flex-basis: 48px; border-radius: 14px; }
  .account-summary-grid { grid-template-columns: 1fr; }
  .account-summary-grid > article { padding: 15px; }
  .account-section-nav { grid-template-columns: 1fr; }
  .account-message-prompt { grid-template-columns: 46px minmax(0,1fr); gap: 12px; padding: 16px; }
  .account-message-prompt > span { width: 46px; height: 46px; }
  .account-message-prompt > button { grid-column: 1 / -1; width: 100%; }
  .account-inline-panel > article > header { padding-inline: 15px !important; }
  .account-inline-panel > article > footer { align-items: stretch; flex-direction: column; padding-inline: 15px !important; }
  .account-inline-panel > article > footer > button { width: 100%; }
  #accountRemindersForm > .account-reminder-channel.is-whatsapp,
  #accountRemindersForm > .account-reminder-channel.is-email { grid-column: auto; grid-row: auto; }
  #accountRemindersForm > .account-reminder-channel.is-whatsapp { order: -1; }
}

/* Estado del plan: fechas de cobro legibles de un vistazo. */
.account-summary-grid > article.account-plan-insight {
  grid-template-columns: 52px minmax(0,1fr);
  gap: 14px;
  padding: 22px;
}
.account-plan-insight > div { display: grid; gap: 4px; }
.account-plan-insight > dl { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 4px 0 0; }
.account-plan-insight > dl > div { display: grid; gap: 5px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.26); border-radius: 13px; background: rgba(10,26,82,.19); }
.account-plan-insight dt { color: #d5e8ff; font-size: 12px !important; font-weight: 900; letter-spacing: .07em; }
.account-plan-insight dd { margin: 0; color: #fff; font-size: 22px !important; font-weight: 900; letter-spacing: -.02em; }

/* Sin mensajes: bloque comercial claro, inspirado en el ejemplo compartido. */
.account-message-prompt {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 28px;
  min-height: 280px;
  padding: 38px 44px;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(112deg,#10285f,#2162d9 48%,#11ac8a);
  box-shadow: 0 16px 32px rgba(29,84,181,.22);
}
.account-message-prompt::before, .account-message-prompt::after { position: absolute; z-index: -1; border-radius: 50%; background: rgba(255,255,255,.1); content: ''; }
.account-message-prompt::before { width: 310px; height: 310px; top: -205px; right: -20px; }
.account-message-prompt::after { width: 190px; height: 190px; bottom: -142px; left: -56px; }
.account-message-prompt > span { display: none; }
.account-message-prompt > div { align-content: center; gap: 10px; max-width: 760px; }
.account-message-prompt p { color: #cde8ff; font-size: 13px !important; }
.account-message-prompt h3 { max-width: 700px; color: #fff; font-size: clamp(29px,3vw,46px); line-height: 1.04; letter-spacing: -.035em; }
.account-message-prompt h3 b { color: #fff; font-size: inherit !important; }
.account-message-prompt > div > span { max-width: 760px; color: #e6f3ff; font-size: 17px !important; line-height: 1.55; }
.account-message-prompt > button { z-index: 1; min-width: 195px; min-height: 62px; padding: 14px 21px; border: 0; border-radius: 15px; color: #195ac1; background: #fff; box-shadow: 0 10px 22px rgba(5,31,83,.18); font-size: 15px !important; }
.account-message-prompt > button:hover { color: #114b9e; background: #f5f9ff; transform: translateY(-1px); }

/* Planes y licencias: bloques contemporáneos, no tabla partida. */
.subscription-current { align-items: stretch; padding: 20px; border: 0; border-radius: 18px; background: linear-gradient(130deg,#eef3ff,#f5f1ff); }
.subscription-current > div { justify-content: center; }
.subscription-current small { font-size: 12px !important; }
.subscription-current strong { font-size: 25px !important; }
.subscription-current span { font-size: 14px !important; }
.subscription-current dl { align-self: stretch; min-width: 290px; gap: 10px; overflow: visible; border: 0; border-radius: 0; background: transparent; }
.subscription-current dl div { align-content: center; min-width: 130px; padding: 14px 17px; border: 1px solid #dfe5f4; border-radius: 13px; background: #fff; box-shadow: 0 5px 14px rgba(46,67,120,.07); }
.subscription-current dl div + div { border-left: 1px solid #dfe5f4; }
.subscription-current dt { color: #69758d; font-size: 12px !important; letter-spacing: .06em; }
.subscription-current dd { color: #24334d; font-size: 25px !important; }

@media (max-width: 680px) {
  .account-summary-grid > article.account-plan-insight { grid-template-columns: 46px minmax(0,1fr); padding: 18px; }
  .account-plan-insight > dl { grid-template-columns: 1fr; }
  .account-plan-insight dd { font-size: 19px !important; }
  .account-message-prompt { grid-template-columns: 1fr; min-height: 0; gap: 22px; padding: 28px 23px; }
  .account-message-prompt h3 { font-size: 31px; }
  .account-message-prompt > div > span { font-size: 15px !important; }
  .account-message-prompt > button { width: 100%; }
  .subscription-current { flex-direction: column; }
  .subscription-current dl { min-width: 0; grid-template-columns: 1fr; }
}

/* Accesos rápidos de Mi Cuenta: estado, explicación y acción en el mismo lugar. */
.account-summary-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
.account-summary-grid > article.account-plan-insight { grid-column: 1 / -1; }
.account-summary-grid > .account-quick-card.is-team,
.account-summary-grid > .account-quick-card.is-reminders { grid-column: span 3; }
.account-summary-grid > .account-quick-card.is-values,
.account-summary-grid > .account-quick-card.is-schedule,
.account-summary-grid > .account-quick-card.is-signature { grid-column: span 2; }
.account-summary-grid > article.account-quick-card {
  min-height: 250px;
  align-items: start;
  align-content: start;
  padding: 22px;
  border-color: #dbe5f0;
  background: linear-gradient(150deg,#fff 58%,#f5f8fc);
}
.account-quick-card > div { height: 100%; grid-template-rows: auto auto auto minmax(42px,1fr) auto; gap: 7px; }
.account-summary-grid .account-quick-card > span { width: 48px; height: 48px; }
.account-quick-card small { line-height: 1.25; }
.account-quick-card strong { max-width: 520px; font-size: 20px !important; line-height: 1.22; }
.account-quick-card em {
  justify-self: start;
  padding: 5px 9px;
  border-radius: 999px;
  color: #4d6684;
  background: #edf3f9;
  font-size: 12px !important;
  font-style: normal;
  font-weight: 850;
  line-height: 1.2;
}
.account-quick-card p { align-self: start; padding-top: 2px; }
.account-quick-card button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  justify-self: stretch;
  padding: 9px 12px;
  border: 1px solid #cfdeed;
  border-radius: 10px;
  color: #286db0;
  background: rgba(255,255,255,.9);
  font: inherit;
  font-size: 12px !important;
  font-weight: 900;
  letter-spacing: .025em;
  cursor: pointer;
  transition: border-color .16s,background .16s,transform .16s,box-shadow .16s;
}
.account-quick-card button .app-icon { width: 17px; height: 17px; }
.account-quick-card button:hover { border-color: #83b7e8; background: #edf7ff; box-shadow: 0 6px 13px rgba(46,116,181,.12); transform: translateY(-1px); }
.account-quick-card.needs-action { border-color: #f0c876; background: linear-gradient(150deg,#fffdfa,#fff7e5); }
.account-quick-card.needs-action > span { color: #b77a0a; background: #fff0c8; }
.account-quick-card.needs-action em { color: #8a5e0d; background: #ffedbd; }
.account-quick-card.needs-action button { border-color: #e5b64e; color: #75500c; background: #ffd975; }

@media (max-width: 1220px) {
  .account-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .account-summary-grid > article.account-plan-insight { grid-column: 1 / -1; }
  .account-summary-grid > .account-quick-card { grid-column: span 1; }
  .account-summary-grid > .account-quick-card:last-child { grid-column: span 2; }
}

@media (max-width: 680px) {
  .account-summary-grid { grid-template-columns: 1fr; }
  .account-summary-grid > article.account-plan-insight,
  .account-summary-grid > .account-quick-card,
  .account-summary-grid > .account-quick-card:last-child { grid-column: auto; }
  .account-summary-grid > article.account-quick-card { min-height: 0; padding: 17px; }
  .account-quick-card > div { grid-template-rows: auto; }
}

/* Tarjetas orgánicas: lectura primero, acción discreta y contexto inequívoco. */
.account-summary-grid > article.account-quick-card {
  isolation: isolate;
  min-height: 230px;
  grid-template-columns: 58px minmax(0,1fr);
  gap: 17px;
  padding: 25px;
  overflow: hidden;
  border: 1px solid #dce6f1;
  border-radius: 20px;
  background: radial-gradient(circle at 100% 0,rgba(80,126,192,.09),transparent 38%),#fff;
  box-shadow: 0 10px 25px rgba(35,57,89,.07);
}
.account-summary-grid > article.account-quick-card::before { position: absolute; z-index: -1; top: 0; right: 0; left: 0; height: 5px; background: #765bd0; content: ''; }
.account-summary-grid > article.account-quick-card:hover { border-color: #afc8e4; box-shadow: 0 17px 34px rgba(36,70,116,.12); transform: translateY(-3px); }
.account-summary-grid .account-quick-card > span { width: 58px; height: 58px; border-radius: 17px; color: #694ec4; background: #f0ecff; }
.account-summary-grid .account-quick-card > span .app-icon { width: 26px; height: 26px; }
.account-quick-card > div { height: auto; grid-template-rows: none; align-content: start; gap: 8px; }
.account-quick-card small { color: #66758b; font-size: 13px !important; line-height: 1.3; letter-spacing: .08em; }
.account-quick-card strong { max-width: 560px; color: #24334b; font-size: clamp(22px,1.55vw,27px) !important; line-height: 1.15; letter-spacing: -.025em; }
.account-quick-card em { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 0; color: #52657b; background: transparent; font-size: 15px !important; line-height: 1.35; }
.account-quick-card em::before { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #22a875; box-shadow: 0 0 0 4px rgba(34,168,117,.12); content: ''; }
.account-quick-card p { max-width: 580px; margin: 2px 0 0; padding: 0; color: #66768b; font-size: 16px !important; line-height: 1.48; }
.account-quick-card button {
  display: inline-flex;
  width: auto;
  min-height: 34px;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  justify-self: start;
  margin-top: 7px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #246eb6;
  background: transparent;
  box-shadow: none;
  font-size: 15px !important;
  font-weight: 850;
  letter-spacing: 0;
}
.account-quick-card button .app-icon { width: 27px; height: 27px; padding: 6px; border-radius: 50%; color: #fff; background: #2d7fc9; box-sizing: border-box; transition: transform .16s,background .16s; }
.account-quick-card button:hover { border: 0; color: #155894; background: transparent; box-shadow: none; transform: none; }
.account-quick-card button:hover .app-icon { background: #155f9f; transform: translateX(3px); }
.account-quick-card.is-team::before { background: #7257cf; }
.account-quick-card.is-reminders::before { background: #d59a19; }
.account-summary-grid .account-quick-card.is-reminders > span { color: #b77900; background: #fff2cf; }
.account-quick-card.is-values::before { background: #4f74d2; }
.account-summary-grid .account-quick-card.is-values > span { color: #496bc5; background: #edf2ff; }
.account-quick-card.is-schedule::before { background: #64768c; }
.account-summary-grid .account-quick-card.is-schedule > span { color: #516379; background: #edf1f5; }
.account-quick-card.is-signature::before { background: #149caf; }
.account-summary-grid .account-quick-card.is-signature > span { color: #078ca0; background: #e4f8fb; }
.account-quick-card.is-muted em::before { background: #e0a127; box-shadow: 0 0 0 4px rgba(224,161,39,.14); }
.account-summary-grid > article.account-quick-card.needs-action { border-color: #e8ce91; background: radial-gradient(circle at 100% 0,rgba(239,185,57,.15),transparent 40%),#fffdfa; }
.account-summary-grid > article.account-quick-card.needs-action::before { background: #df9e15; }
.account-quick-card.needs-action em { color: #795815; background: transparent; }
.account-quick-card.needs-action em::before { background: #e0a127; box-shadow: 0 0 0 4px rgba(224,161,39,.14); }
.account-quick-card.needs-action button { border: 0; color: #9a6905; background: transparent; }
.account-quick-card.needs-action button .app-icon { color: #fff; background: #d6950d; }

@media (max-width: 680px) {
  .account-summary-grid > article.account-quick-card { min-height: 0; grid-template-columns: 50px minmax(0,1fr); gap: 13px; padding: 20px 17px; }
  .account-summary-grid .account-quick-card > span { width: 50px; height: 50px; border-radius: 14px; }
  .account-quick-card strong { font-size: 21px !important; }
  .account-quick-card em { font-size: 14px !important; }
  .account-quick-card p { font-size: 15px !important; }
}

/* Encabezado compacto e identidad del profesional. */
.account-panel-welcome { gap: 18px; padding: 22px; }
.account-panel-welcome > header {
  min-height: 0;
  padding: 14px 18px;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(49,84,153,.16);
}
.account-panel-welcome > header::after { width: 120px; height: 120px; top: -78px; right: 18px; }
.account-panel-welcome > header div { gap: 1px; }
.account-panel-welcome > header p { font-size: 13px !important; }
.account-panel-welcome > header h2 { font-size: clamp(23px,2vw,29px); line-height: 1.15; }
.account-panel-welcome > header div > span { font-size: 16px !important; line-height: 1.35; }
.account-welcome-icon { width: 44px; height: 44px; flex-basis: 44px; border-radius: 13px; }
.account-welcome-icon .app-icon { width: 22px; height: 22px; }

.account-profile-card { grid-template-columns: 52px minmax(0,1fr); padding: 16px; }
.account-profile-card > div { gap: 3px; }
#accountProfessionalName { overflow: hidden; font-size: 15px !important; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.account-profile-card > div > span { color: #bfcbe0; font-size: 13px !important; line-height: 1.35; }

/* El plan muestra cada dato una sola vez y concentra la atención en las fechas. */
.account-summary-grid > article.account-plan-insight {
  grid-template-columns: 52px minmax(170px,.52fr) minmax(0,1.48fr);
  align-items: center;
  gap: 16px;
  padding: 17px 20px;
}
.account-plan-insight > div { gap: 2px; }
.account-plan-insight > div > strong { font-size: 20px !important; }
.account-plan-insight > dl { grid-column: auto; gap: 10px; margin: 0; }
.account-plan-insight > dl > div { padding: 11px 14px; }
.account-plan-insight dt { font-size: 13px !important; }
.account-plan-insight dd { font-size: 20px !important; }

@media (max-width: 900px) {
  .account-summary-grid > article.account-plan-insight { grid-template-columns: 48px minmax(0,1fr); }
  .account-plan-insight > dl { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .account-panel-welcome { gap: 16px; padding: 16px 13px; }
  .account-panel-welcome > header { align-items: center; padding: 13px 14px; }
  .account-panel-welcome > header div > span { font-size: 15px !important; }
  .account-welcome-icon { width: 40px; height: 40px; flex-basis: 40px; }
  .account-summary-grid > article.account-plan-insight { grid-template-columns: 44px minmax(0,1fr); padding: 16px; }
  .account-plan-insight > dl { grid-template-columns: 1fr; }
}

/* Mi Cuenta como tablero visual: estados que se comprenden antes de leerlos. */
.account-team-board { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.account-seat-map { display: flex; align-items: center; gap: 8px; }
.account-seat-map > span {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  transition: transform .18s ease,box-shadow .18s ease;
}
.account-seat-map > span .app-icon { width: 19px; height: 19px; }
.account-seat-map > span.is-occupied { color: #fff; background: linear-gradient(145deg,#7357d1,#4f75d5); box-shadow: 0 7px 14px rgba(95,82,197,.23); }
.account-seat-map > span.is-occupied::after { position: absolute; width: 9px; height: 9px; right: -2px; bottom: -2px; border: 3px solid #fff; border-radius: 50%; background: #20b77a; content: ''; }
.account-seat-map > span.is-vacant { border: 2px dashed #b9c3d3; color: #a6b1c1; background: rgba(244,246,250,.72); }
.account-seat-map > span:hover { transform: translateY(-2px); }
.account-team-board > em { padding: 7px 10px; border-radius: 999px; color: #5a4ca3; background: #f0edff; font-size: 14px !important; }
.account-team-board > em::before { display: none; }

.account-reminder-caption { margin-top: -5px; color: #7a8798; font-size: 15px !important; font-weight: 750; }
.account-channel-board { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 6px; }
.account-channel-board > span {
  display: grid;
  min-width: 0;
  grid-template-columns: 34px minmax(0,1fr);
  align-items: center;
  gap: 1px 9px;
  padding: 10px;
  border: 1px solid #dce3eb;
  border-radius: 14px;
  color: #6e7b8c;
  background: #f5f7fa;
}
.account-channel-board .app-icon { width: 23px; height: 23px; grid-row: 1 / 3; }
.account-channel-board b { overflow: hidden; font-size: 14px !important; text-overflow: ellipsis; white-space: nowrap; }
.account-channel-board i { color: #7f8b9b; font-size: 11px !important; font-style: normal; font-weight: 900; letter-spacing: .06em; }
.account-channel-board #accountWhatsappChannel { border-color: #b9e8cd; background: #f2fcf6; }
.account-channel-board #accountWhatsappChannel .app-icon,.account-channel-board #accountWhatsappChannel b { color: #1fa855; }
.account-channel-board #accountEmailChannel { border-color: #bfdaf6; background: #f3f8ff; }
.account-channel-board #accountEmailChannel .app-icon,.account-channel-board #accountEmailChannel b { color: #287dcc; }
.account-channel-board > span.is-on { border-color: #a9dfca; color: #0b8d61; background: linear-gradient(145deg,#ecfbf5,#f7fffb); box-shadow: 0 5px 12px rgba(22,153,105,.09); }
.account-channel-board #accountWhatsappChannel.is-on i { color: #119a69; }
.account-channel-board #accountEmailChannel.is-on { border-color: #a9cfee; background: linear-gradient(145deg,#eff7ff,#f8fbff); box-shadow: 0 5px 12px rgba(40,125,204,.1); }
.account-channel-board #accountEmailChannel.is-on i { color: #287dcc; }

.account-summary-grid > article.account-quick-card.is-values { background: radial-gradient(circle at 100% 0,rgba(80,116,210,.14),transparent 42%),linear-gradient(155deg,#fff,#f7f9ff); }
.account-summary-grid > article.account-quick-card.is-values > span { display: none; }
.account-summary-grid > article.account-quick-card.is-values > div { grid-column: 1 / -1; }
.account-value-board {
  position: relative;
  display: grid;
  min-height: 74px;
  grid-template-columns: 64px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  margin: 5px 4px 2px 0;
  padding: 10px 12px 10px 10px;
  border: 1px solid #d9e2f5;
  border-radius: 16px;
  background: rgba(255,255,255,.86);
  box-shadow: 5px 5px 0 #e9edfb,10px 10px 0 #f2f4fb;
}
.account-value-board > span { display: grid; width: 60px; height: 60px; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(145deg,#5277d4,#6c56c9); box-shadow: 0 8px 16px rgba(76,91,184,.22); font-size: 30px !important; font-weight: 950; }
.account-value-board > div { display: grid; gap: 1px; }
.account-value-board b { color: #293950; font-size: 14px !important; line-height: 1.2; letter-spacing: .035em; }
.account-value-board small { color: #748297; font-size: 13px !important; letter-spacing: 0; }
.account-quick-card.is-values.needs-action .account-value-board > span { background: linear-gradient(145deg,#d99b18,#efbd50); }

.account-day-board { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 7px; }
.account-day-board > span { display: grid; min-width: 42px; height: 38px; padding: 0 8px; place-items: center; border-radius: 12px; font-size: 13px !important; font-weight: 900; transition: transform .18s ease,box-shadow .18s ease; }
.account-day-board > span.is-active { border: 1px solid rgba(255,255,255,.58); color: #fff; background: linear-gradient(145deg,var(--day-start),var(--day-end)); box-shadow: 0 8px 17px var(--day-shadow),inset 0 1px 0 rgba(255,255,255,.3); text-shadow: 0 1px 2px rgba(39,35,79,.18); }
.account-day-board > span.is-active:nth-child(1) { --day-start: #7c5cff; --day-end: #5b7cfa; --day-shadow: rgba(105,88,244,.25); }
.account-day-board > span.is-active:nth-child(2) { --day-start: #5276f4; --day-end: #2f9cf4; --day-shadow: rgba(55,132,238,.24); }
.account-day-board > span.is-active:nth-child(3) { --day-start: #249be8; --day-end: #17b8cf; --day-shadow: rgba(27,164,212,.24); }
.account-day-board > span.is-active:nth-child(4) { --day-start: #13b8a6; --day-end: #20bf7f; --day-shadow: rgba(20,180,144,.23); }
.account-day-board > span.is-active:nth-child(5) { --day-start: #ff6a75; --day-end: #f4518a; --day-shadow: rgba(239,76,116,.24); }
.account-day-board > span.is-active:nth-child(6) { --day-start: #c35cf4; --day-end: #8b62f4; --day-shadow: rgba(151,86,232,.24); }
.account-day-board > span.is-active:nth-child(7) { --day-start: #ffad3d; --day-end: #f47b4f; --day-shadow: rgba(239,133,67,.24); }
.account-day-board > span.is-active:hover { transform: translateY(-2px); box-shadow: 0 11px 21px var(--day-shadow),inset 0 1px 0 rgba(255,255,255,.35); }
.account-day-board > span.is-inactive { border: 2px dashed #c3cbd5; color: #a3adba; background: #f5f7f9; }
.account-quick-card.is-schedule > div > em { margin-top: 2px; color: #3d6f73; font-size: 14px !important; }

/* Todas las tarjetas terminan en el mismo punto de acción. */
.account-summary-grid > article.account-quick-card > div { padding-bottom: 45px; }
.account-summary-grid > article.account-quick-card button {
  position: absolute;
  right: 25px;
  bottom: 21px;
  max-width: calc(100% - 50px);
  justify-content: flex-end;
  margin: 0;
  text-align: right;
}

.account-signature-seal { display: inline-flex; align-items: center; gap: 10px; justify-self: start; margin-top: 7px; padding: 8px 12px 8px 8px; border: 1px solid #bde5e9; border-radius: 999px; color: #087e8d; background: linear-gradient(145deg,#edfbfc,#f7ffff); }
.account-signature-seal > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #fff; background: #16a1b1; box-shadow: 0 5px 10px rgba(22,161,177,.2); }
.account-signature-seal .app-icon { width: 17px; height: 17px; stroke-width: 3; }
.account-signature-seal b { font-size: 12px !important; letter-spacing: .06em; }
.account-quick-card.is-signature.needs-action .account-signature-seal { border-color: #ead29d; color: #8a620f; background: #fff9eb; }
.account-quick-card.is-signature.needs-action .account-signature-seal > span { background: #d89b1f; }

@media (max-width: 680px) {
  .account-seat-map > span { width: 38px; height: 38px; border-radius: 12px; }
  .account-channel-board { grid-template-columns: 1fr; }
  .account-day-board > span { min-width: 38px; }
  .account-summary-grid > article.account-quick-card > div { padding-bottom: 47px; }
  .account-summary-grid > article.account-quick-card button { right: 17px; bottom: 16px; max-width: calc(100% - 34px); }
}

/* Consultorio y perfil: configuración como recorrido de mejora. */
.account-settings-dialog { background: #f4f6ff; box-shadow: 0 30px 75px rgba(45,53,119,.24); }
.account-settings-dialog > article > header {
  border-bottom: 0;
  color: #fff;
  background:
    radial-gradient(circle at 88% -35%,rgba(255,255,255,.3),transparent 34%),
    linear-gradient(112deg,#5b45d8 0%,#397cf0 58%,#13b9a1 118%);
}
.account-settings-dialog > article > header > div > span { color: #fff; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28),0 8px 20px rgba(29,36,112,.2); }
.account-settings-dialog > article > header p { color: #d9f7ff; font-size: 13px !important; }
.account-settings-dialog > article > header h2 { color: #fff; font-size: 27px !important; }
.account-settings-dialog > article > header > button { border-color: rgba(255,255,255,.32); color: #fff; background: rgba(255,255,255,.13); }
.account-settings-body { background: radial-gradient(circle at 100% 0,rgba(101,83,232,.08),transparent 32%),#f5f7ff; }
#accountSettingsWorkspace { gap: 20px; }

.account-settings-journey {
  position: relative;
  display: grid;
  gap: 17px;
  padding: 24px;
  overflow: hidden;
  border-radius: 21px;
  color: #fff;
  background:
    radial-gradient(circle at 90% -20%,rgba(70,233,212,.36),transparent 37%),
    radial-gradient(circle at 0 120%,rgba(143,95,255,.5),transparent 38%),
    linear-gradient(120deg,#18295f,#415de1 55%,#138f9d);
  box-shadow: 0 16px 34px rgba(45,65,157,.23);
}
.account-settings-journey::after { position: absolute; width: 150px; height: 150px; right: -72px; bottom: -82px; border: 24px solid rgba(255,255,255,.09); border-radius: 50%; content: ''; }
.account-settings-journey > header { position: relative; z-index: 1; display: grid; grid-template-columns: 54px minmax(0,1fr) auto; align-items: center; gap: 14px; }
.account-settings-journey > header > span { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 17px; color: #fff; background: linear-gradient(145deg,#8b67ff,#44a3ff); box-shadow: 0 9px 20px rgba(15,27,100,.27),inset 0 1px 0 rgba(255,255,255,.3); }
.account-settings-journey > header > span .app-icon { width: 26px; height: 26px; }
.account-settings-journey > header > div { display: grid; gap: 3px; }
.account-settings-journey > header p,.account-settings-journey > header h3,.account-settings-journey > header small { margin: 0; }
.account-settings-journey > header p { color: #8ff4e2; font-size: 13px !important; font-weight: 950; letter-spacing: .11em; }
.account-settings-journey > header h3 { color: #fff; font-size: 23px !important; line-height: 1.17; }
.account-settings-journey > header small { color: #dce7ff; font-size: 15px !important; line-height: 1.4; }
.account-settings-journey > header > strong { padding: 9px 13px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: #fff; background: rgba(255,255,255,.13); font-size: 14px !important; white-space: nowrap; }
.account-settings-progress { position: relative; z-index: 1; height: 9px; overflow: hidden; border-radius: 999px; background: rgba(11,22,72,.36); box-shadow: inset 0 1px 3px rgba(5,12,48,.35); }
.account-settings-progress > i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#916cff,#47a8ff,#35e2b5); box-shadow: 0 0 15px rgba(91,228,200,.55); transition: width .35s ease; }
.account-settings-goals { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.account-settings-goals > article { display: grid; min-width: 0; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 3px 10px; padding: 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 15px; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); transition: transform .18s,background .18s,box-shadow .18s; }
.account-settings-goals > article > span { display: grid; width: 42px; height: 42px; grid-row: 1 / 3; place-items: center; border-radius: 13px; color: #fff; background: rgba(255,255,255,.16); }
.account-settings-goals > article > span .app-icon { width: 21px; height: 21px; }
.account-settings-goals > article > div { display: grid; min-width: 0; gap: 1px; }
.account-settings-goals b { color: #fff; font-size: 16px !important; }
.account-settings-goals small { overflow: hidden; color: #dbe5ff; font-size: 13px !important; text-overflow: ellipsis; white-space: nowrap; }
.account-settings-goals em { grid-column: 2; justify-self: start; color: #b9c8ee; font-size: 11px !important; font-style: normal; font-weight: 950; letter-spacing: .06em; }
.account-settings-goals > article.is-complete { border-color: rgba(255,255,255,.72); background: #fff; box-shadow: 0 9px 20px rgba(12,26,88,.2); transform: translateY(-2px); }
.account-settings-goals > article.is-complete b { color: #253354; }
.account-settings-goals > article.is-complete small { color: #6a7892; }
.account-settings-goals > article.is-complete em { color: #168d67; }
.account-settings-goals > article[data-settings-goal="identity"].is-complete > span { color: #fff; background: linear-gradient(145deg,#8262f2,#526eef); }
.account-settings-goals > article[data-settings-goal="agenda"].is-complete > span { color: #fff; background: linear-gradient(145deg,#318dec,#21b8d4); }
.account-settings-goals > article[data-settings-goal="whatsapp"].is-complete > span { color: #fff; background: linear-gradient(145deg,#25d366,#12a968); }

#accountClinicSettingsForm { position: relative; overflow: hidden; border-color: #d9ddfa; border-radius: 20px; box-shadow: 0 12px 28px rgba(56,67,142,.09); }
#accountClinicSettingsForm::before { position: absolute; top: 0; right: 0; left: 0; height: 5px; background: linear-gradient(90deg,#7c5cff,#3d8cf4,#20c4ad); content: ''; }
#accountClinicSettingsForm > header { padding-top: 5px; }
#accountClinicSettingsForm > header p { color: #6752d5; font-size: 13px !important; }
#accountClinicSettingsForm > header h3 { color: #293650; font-size: 20px !important; }
#accountClinicSettingsForm > header > b { color: #634ecf; background: #f0edff; font-size: 12px !important; }
.account-settings-grid label { color: #4d5d77; font-size: 14px !important; }
.account-settings-grid input,.account-settings-duration input { min-height: 48px; border-color: #d4daf0; border-radius: 12px; font-size: 15px !important; }
.account-settings-grid input:focus,.account-settings-duration input:focus { border-color: #6758df; box-shadow: 0 0 0 4px rgba(103,88,223,.12); }
.account-settings-duration { position: relative; overflow: hidden; padding: 18px; border-color: #cfdcfb; border-radius: 16px; background: linear-gradient(125deg,#eef1ff,#eafaff); }
.account-settings-duration::after { position: absolute; width: 90px; height: 90px; right: 90px; bottom: -60px; border-radius: 50%; background: rgba(76,112,236,.1); content: ''; }
.account-settings-duration p { color: #4e64cf; font-size: 12px !important; }
.account-settings-duration strong { color: #263857; font-size: 17px !important; }
.account-settings-duration strong b { color: #5d58dc; }
.account-settings-duration span { font-size: 14px !important; }
.account-settings-duration label { position: relative; z-index: 1; color: #546386; font-size: 12px !important; }
.account-settings-duration input { color: #4e4ac7; background: #fff; box-shadow: 0 7px 16px rgba(67,78,159,.1); font-weight: 950; }
.account-settings-whatsapp { padding: 19px; border-color: #ccebd9; border-radius: 16px; background: linear-gradient(130deg,#f4fff8,#f0fbff); }
.account-settings-whatsapp.is-enabled { border-color: #67d69a; background: linear-gradient(130deg,#effff5,#ebfff9); box-shadow: 0 10px 24px rgba(37,181,103,.1); }
.account-settings-whatsapp header p { color: #159f58; font-size: 12px !important; }
.account-settings-whatsapp header h4 { color: #264756; font-size: 18px !important; }
.account-settings-switch { border-color: #c5e4d2; border-radius: 14px; background: rgba(255,255,255,.84); }
.account-settings-switch b { font-size: 15px !important; }
.account-settings-switch small,.account-settings-whatsapp > p,.account-settings-whatsapp-modes small { font-size: 13px !important; }
.account-settings-switch > input:checked + .account-settings-switch-track { background: #25d366; box-shadow: 0 0 0 4px rgba(37,211,102,.12); }
.account-settings-whatsapp-modes label { min-height: 75px; align-items: center; padding: 14px; border-radius: 13px; }
.account-settings-whatsapp-modes b { font-size: 15px !important; }
.account-settings-whatsapp-modes label:has(input:checked:not(:disabled)) { border-color: #49ca86; background: #effff6; box-shadow: 0 0 0 3px rgba(37,211,102,.1); }
#accountClinicSettingsForm > footer button { min-height: 46px; padding-inline: 18px; border-radius: 12px; background: linear-gradient(100deg,#6553df,#3588ed); box-shadow: 0 9px 20px rgba(74,85,208,.22); font-size: 13px !important; }
.account-settings-professional { border-top: 5px solid #8b62e9; border-radius: 18px; box-shadow: 0 10px 25px rgba(99,77,174,.08); }
.account-settings-password { border-top: 5px solid #f18b5b; border-radius: 18px; box-shadow: 0 10px 25px rgba(175,89,61,.08); }

@media (max-width: 850px) {
  .account-settings-goals { grid-template-columns: 1fr; }
  .account-settings-journey > header { grid-template-columns: 48px minmax(0,1fr); }
  .account-settings-journey > header > span { width: 48px; height: 48px; }
  .account-settings-journey > header > strong { grid-column: 2; justify-self: start; }
}

@media (max-width: 620px) {
  .account-settings-journey { padding: 18px 15px; border-radius: 17px; }
  .account-settings-journey > header h3 { font-size: 20px !important; }
  .account-settings-journey > header small { font-size: 14px !important; }
  .account-settings-duration { align-items: stretch; }
}

/* Consultorio y perfil: densidad útil sin perder jerarquía. */
#accountClinicSettingsForm { gap: 14px; padding: 18px; }
.account-settings-columns { display: grid; grid-template-columns: minmax(0,1.14fr) minmax(390px,.86fr); align-items: start; gap: 14px; }
.account-settings-column { display: grid; align-content: start; gap: 14px; min-width: 0; }
.account-settings-column.is-clinic-data > .account-settings-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.account-settings-column.is-clinic-data > .account-settings-grid label.span-2 { grid-column: span 2; }
.account-settings-column .account-settings-grid label { gap: 5px; }
.account-settings-column .account-settings-grid input { min-height: 44px; padding-block: 8px; }

.account-settings-duration {
  display: grid;
  min-height: 0;
  grid-template-columns: 46px minmax(0,1fr) 140px;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
}
.account-settings-duration-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; color: #fff !important; background: linear-gradient(145deg,#7660eb,#348fe9); box-shadow: 0 7px 15px rgba(78,86,211,.2); }
.account-settings-duration-icon .app-icon { width: 22px; height: 22px; }
.account-settings-duration > div { gap: 1px; }
.account-settings-duration > div > p { font-size: 11px !important; }
.account-settings-duration > div > strong { font-size: 16px !important; }
.account-settings-duration > div > span { font-size: 12px !important; }
.account-settings-duration label { width: 140px; gap: 3px; text-align: center; }
.account-settings-duration input { text-align: center; padding-inline: 0; }
.account-settings-duration input::-webkit-outer-spin-button,
.account-settings-duration input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.account-settings-duration input[type=number] { -moz-appearance: textfield; }
.account-duration-stepper { display: flex; align-items: center; gap: 4px; width: 100%; }
.account-duration-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 42px; border: 1px solid #cfdcfb; border-radius: 10px; background: #fff; color: #4e4ac7; font-size: 16px; font-weight: 900; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease; flex-shrink: 0; user-select: none; }
.account-duration-btn:hover:not(:disabled) { background: #eef1ff; border-color: #6758df; color: #342ec1; }
.account-duration-btn:active:not(:disabled) { transform: scale(.96); }
.account-duration-btn:disabled { opacity: .45; cursor: not-allowed; }
.account-duration-stepper input { flex: 1; min-width: 0; min-height: 42px; padding-block: 7px; }

.account-settings-professional { gap: 11px; padding: 15px; border-top-width: 4px; border-radius: 16px; }
.account-settings-professional > header p { font-size: 11px !important; }
.account-settings-professional > header h3 { font-size: 18px !important; }
.account-settings-professional > header > b { font-size: 11px !important; }
.account-settings-professional > .account-settings-grid { gap: 9px; }
.account-settings-professional-note { display: flex; align-items: center; gap: 7px; margin: 0; color: #6a7192; font-size: 12px !important; line-height: 1.35; }
.account-settings-professional-note .app-icon { width: 16px; height: 16px; flex: 0 0 16px; color: #7658d6; }
.account-settings-professional > footer { justify-content: flex-end; padding: 0; }
.account-settings-professional > footer button { min-height: 39px; border-radius: 10px; background: linear-gradient(100deg,#7658d6,#5578e9); font-size: 12px !important; }

.account-settings-whatsapp { gap: 10px; padding: 15px; }
.account-settings-whatsapp header h4 { font-size: 17px !important; }
.account-settings-switch { padding: 11px 12px; }
.account-settings-whatsapp > p { margin: 0; font-size: 12px !important; }
.account-settings-whatsapp-modes label { min-height: 62px; padding: 10px; }
.account-settings-whatsapp-modes small { font-size: 12px !important; }
#accountClinicSettingsForm > footer { padding-top: 0; }

.account-settings-security { overflow: hidden; border: 1px solid #e0ddf0; border-radius: 17px; background: #fff; box-shadow: 0 8px 20px rgba(60,55,112,.06); }
.account-settings-security > summary { display: grid; min-height: 92px; grid-template-columns: 46px minmax(360px,680px) max-content; align-items: center; justify-content: start; gap: 12px 18px; padding: 14px 20px; cursor: pointer; list-style: none; transition: background .18s; }
.account-settings-security > summary:hover { background: #fff9fb; }
.account-settings-security > summary::-webkit-details-marker { display: none; }
.account-settings-security > summary > span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(145deg,#f08a5c,#d95c81); box-shadow: 0 7px 15px rgba(210,91,105,.19); }
.account-settings-security > summary > span .app-icon { width: 22px; height: 22px; }
.account-settings-security > summary > div { display: grid; max-width: 680px; gap: 1px; }
.account-settings-security > summary p,.account-settings-security > summary h3,.account-settings-security > summary small { margin: 0; }
.account-settings-security > summary p { color: #c35c70; font-size: 11px !important; font-weight: 950; letter-spacing: .1em; }
.account-settings-security > summary h3 { color: #303a55; font-size: 18px !important; }
.account-settings-security > summary small { color: #727c90; font-size: 13px !important; }
.account-settings-security > summary > b { display: inline-flex; min-height: 41px; grid-column: 3; align-items: center; justify-self: start; margin: 0; padding: 9px 16px; border-radius: 11px; color: #fff; background: linear-gradient(100deg,#ec7b62,#d95782); box-shadow: 0 7px 15px rgba(206,83,105,.2); font-size: 13px !important; }
.account-settings-security > summary .when-open { display: none; }
.account-settings-security[open] > summary > b { background: #6c5a77; box-shadow: 0 6px 13px rgba(71,57,85,.18); }
.account-settings-security[open] > summary .when-closed { display: none; }
.account-settings-security[open] > summary .when-open { display: inline; }
.account-settings-security > .account-settings-password { margin: 0 14px 14px; border-top-width: 4px; box-shadow: none; }

@media (max-width: 1450px) {
  .account-settings-columns { grid-template-columns: 1fr; }
  .account-settings-column.is-clinic-data > .account-settings-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (min-width: 1001px) {
  #accountClinicSettingsForm > .account-settings-whatsapp { grid-template-columns: minmax(300px,.78fr) minmax(480px,1.22fr); column-gap: 18px; align-items: start; }
  #accountClinicSettingsForm > .account-settings-whatsapp > header,
  #accountClinicSettingsForm > .account-settings-whatsapp > .account-settings-switch,
  #accountClinicSettingsForm > .account-settings-whatsapp > p { grid-column: 1; }
  #accountClinicSettingsForm > .account-settings-whatsapp > .account-settings-whatsapp-modes { height: 100%; grid-column: 2; grid-row: 1 / span 3; align-items: stretch; }
  #accountClinicSettingsForm > .account-settings-whatsapp > .account-settings-whatsapp-modes label { min-height: 100%; }
}

@media (max-width: 900px) {
  .account-settings-column.is-clinic-data > .account-settings-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .account-settings-column.is-clinic-data > .account-settings-grid label.span-2 { grid-column: auto; }
  .account-settings-security > summary { grid-template-columns: 46px minmax(0,1fr); }
  .account-settings-security > summary > b { grid-column: 2; }
}

@media (max-width: 620px) {
  .account-settings-column.is-clinic-data > .account-settings-grid { grid-template-columns: 1fr; }
  .account-settings-duration { grid-template-columns: 42px minmax(0,1fr); }
  .account-settings-duration-icon { width: 42px; height: 42px; }
  .account-settings-duration label { width: 100%; grid-column: 1 / -1; }
  .account-settings-security > summary { grid-template-columns: 42px minmax(0,1fr); }
  .account-settings-security > summary > span { width: 42px; height: 42px; }
  .account-settings-security > summary > b { grid-column: 2; justify-self: start; }
}
/* Caja diaria: una jornada visual, conciliable y basada exclusivamente en datos reales. */
.help-view { width:min(1280px,100%); min-height:calc(100vh - 126px); margin:0 auto; padding:28px clamp(4px,2vw,24px) 58px; color:#26374d; }
.help-hero { display:flex; min-height:184px; align-items:center; justify-content:space-between; gap:30px; padding:30px clamp(24px,5vw,58px); overflow:hidden; border-radius:24px; color:#fff; background:linear-gradient(120deg,#237ee6,#5249d7 72%,#7654d6); box-shadow:0 20px 44px rgba(65,73,194,.23); }
.help-hero p,.help-section header p,.help-next p { margin:0 0 7px; font-size:10px; font-weight:900; letter-spacing:.16em; }
.help-hero p { color:#d4e8ff; }.help-hero h1 { margin:0 0 9px; font-size:clamp(30px,4vw,46px); line-height:1; letter-spacing:-.045em; }.help-hero > div > span { max-width:590px; color:rgba(255,255,255,.84); font-size:14px; font-weight:650; line-height:1.55; }
.help-hero-symbol { display:grid; width:90px; height:90px; flex:0 0 90px; place-items:center; border:1px solid rgba(255,255,255,.25); border-radius:28px; background:rgba(255,255,255,.12); }.help-hero-symbol .app-icon { width:43px; height:43px; }
.help-toolbar { display:flex; align-items:center; justify-content:space-between; gap:22px; margin:24px 0 28px; }.help-search { display:flex; width:min(600px,100%); align-items:center; gap:11px; padding:13px 16px; border:1px solid #d7e4f3; border-radius:14px; color:#337fdd; background:#fff; box-shadow:0 6px 18px rgba(43,72,117,.06); }.help-search .app-icon { width:19px; height:19px; }.help-search input { width:100%; border:0; outline:0; color:#3c4d66; background:transparent; font:inherit; font-size:14px; }.help-toolbar > p { margin:0; color:#74849a; font-size:12px; font-weight:700; }
.help-section { padding:28px; border:1px solid #e0e9f4; border-radius:22px; background:linear-gradient(145deg,#fff,#f9fbff); }.help-section > header { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:20px; }.help-section header p,.help-next p { color:#477be0; }.help-section h2,.help-next h2 { margin:0; color:#293b55; font-size:24px; letter-spacing:-.025em; }.help-section > header > span { max-width:310px; color:#7b899d; font-size:12px; font-weight:650; line-height:1.45; text-align:right; }
.help-guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.help-guide-card { display:grid; min-height:152px; grid-template-columns:52px minmax(0,1fr); grid-template-rows:1fr auto; gap:0 15px; padding:18px; border:1px solid #dce7f3; border-radius:17px; background:#fff; box-shadow:0 5px 15px rgba(47,73,113,.05); }.help-guide-card:hover { border-color:#a8cbee; box-shadow:0 10px 25px rgba(43,87,144,.11); }.help-guide-icon { display:grid; width:48px; height:48px; place-items:center; border-radius:14px; }.help-guide-icon .app-icon { width:23px; height:23px; }.help-guide-icon.is-blue { color:#287fde; background:#e9f4ff; }.help-guide-icon.is-violet { color:#8551c6; background:#f3ecfc; }.help-guide-icon.is-teal { color:#168c7b; background:#e7f8f4; }.help-guide-icon.is-orange { color:#dc831d; background:#fff3de; }.help-guide-card > div { min-width:0; }.help-guide-card p { margin:1px 0 5px; color:#8290a4; font-size:9px; font-weight:900; letter-spacing:.12em; }.help-guide-card h3 { margin:0 0 5px; color:#30425b; font-size:16px; }.help-guide-card div > span { color:#708096; font-size:12px; font-weight:600; line-height:1.45; }.help-guide-card button { display:inline-flex; grid-column:2; align-items:center; gap:6px; justify-self:start; margin-top:12px; padding:0; border:0; color:#397fda; background:transparent; font:inherit; font-size:12px; font-weight:850; }.help-guide-card button .app-icon { width:15px; height:15px; transition:transform .16s ease; }.help-guide-card button:hover .app-icon { transform:translateX(3px); }.help-guide-card[hidden] { display:none; }.help-empty { margin:20px 0 0; padding:15px; border-radius:12px; color:#748196; background:#f2f6fb; font-size:13px; text-align:center; }
.help-next { display:flex; align-items:center; gap:16px; margin-top:22px; padding:22px 24px; border:1px solid #dce8f5; border-radius:18px; background:#f4f8ff; }.help-next > span { display:grid; width:43px; height:43px; flex:0 0 43px; place-items:center; border-radius:13px; color:#188861; background:#e2f7ee; }.help-next .app-icon { width:21px; height:21px; }.help-next h2 { margin-bottom:5px; font-size:17px; }.help-next div > span { color:#718096; font-size:12px; font-weight:650; line-height:1.45; }
.help-support { margin-top:22px; padding:28px; border:1px solid #dce7f3; border-radius:22px; background:#fff; }.help-support > header { display:flex; align-items:center; justify-content:space-between; gap:20px; }.help-support header p { margin:0 0 6px; color:#16865d; font-size:10px; font-weight:900; letter-spacing:.15em; }.help-support h2 { margin:0 0 5px; color:#293b55; font-size:22px; letter-spacing:-.025em; }.help-support header div > span { color:#718096; font-size:12px; font-weight:650; }.help-support > header > button,.help-support form footer button[type="submit"] { display:inline-flex; align-items:center; gap:7px; min-height:42px; padding:10px 15px; border:0; border-radius:10px; color:#fff; background:linear-gradient(125deg,#218b69,#2eab81); box-shadow:0 7px 16px rgba(30,139,103,.2); font:inherit; font-size:12px; font-weight:850; }.help-support > header > button .app-icon,.help-support form footer button .app-icon { width:16px; height:16px; }.help-support form { display:grid; gap:14px; margin-top:22px; padding:20px; border:1px solid #dce8f3; border-radius:16px; background:#f7faff; }.help-support form > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.help-support label { display:grid; gap:6px; color:#53647a; font-size:11px; font-weight:800; }.help-support label span { color:#53647a; }.help-support input,.help-support select,.help-support textarea { width:100%; min-height:42px; padding:10px 11px; border:1px solid #ccdbea; border-radius:9px; outline:0; color:#33445d; background:#fff; font:inherit; font-size:13px; }.help-support textarea { resize:vertical; min-height:92px; line-height:1.45; }.help-support input:focus,.help-support select:focus,.help-support textarea:focus { border-color:#4f91de; box-shadow:0 0 0 3px rgba(55,131,222,.12); }.help-support form > p { min-height:0; margin:0; color:#c44747; font-size:12px; font-weight:700; }.help-support form footer { display:flex; justify-content:flex-end; gap:10px; }.help-support form footer button[type="button"] { min-height:42px; padding:10px 15px; border:0; border-radius:10px; color:#6e7d91; background:#e9eef5; font:inherit; font-size:12px; font-weight:800; }.support-ticket-status { margin:20px 0 10px; color:#75849a; font-size:12px; font-weight:700; }.support-ticket-list { display:grid; gap:8px; }.support-ticket-list article { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 14px; border:1px solid #e0e8f1; border-radius:12px; background:#fbfcfe; }.support-ticket-list b { color:#21866a; font-size:11px; }.support-ticket-list strong { overflow:hidden; color:#41526a; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }.support-ticket-list span { color:#7b899b; font-size:11px; font-weight:700; }
.help-support { position:relative; overflow:hidden; padding:0; border:0; border-radius:26px; background:#fff; box-shadow:0 18px 48px rgba(37,56,97,.12); }.help-support::before { position:absolute; inset:0; z-index:0; content:""; background:radial-gradient(circle at 84% 20%,rgba(53,235,188,.28),transparent 24%),radial-gradient(circle at 65% 0%,rgba(116,92,255,.48),transparent 30%),linear-gradient(118deg,#123e68,#26399b 48%,#5c43ca); }.help-support-hero { position:relative; z-index:1; display:grid; min-height:260px; grid-template-columns:minmax(0,1fr) 190px 235px; align-items:center; gap:26px; padding:34px clamp(28px,4vw,54px); color:#fff; }.help-support-copy { max-width:620px; }.help-support-copy p { margin:0 0 10px; color:#8ff4d2; font-size:10px; font-weight:950; letter-spacing:.18em; }.help-support h2 { margin:0 0 12px; color:#fff; font-size:clamp(27px,3vw,39px); line-height:1.03; letter-spacing:-.045em; }.help-support-copy > span { display:block; max-width:560px; color:rgba(239,246,255,.82); font-size:14px; font-weight:620; line-height:1.55; }.help-support-promises { display:flex; flex-wrap:wrap; gap:8px; margin-top:19px; }.help-support-promises span { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border:1px solid rgba(206,230,255,.25); border-radius:999px; color:#e4f7ff; background:rgba(7,29,79,.17); font-size:10px; font-weight:800; }.help-support-promises .app-icon { width:14px; height:14px; color:#8ff4d2; }.help-support-pulse { position:relative; display:grid; width:166px; height:166px; place-items:center; justify-self:center; border-radius:50%; background:radial-gradient(circle,#2c56b7 0 43%,#172f85 44% 58%,transparent 59%); }.help-support-pulse::before { position:absolute; inset:25px; border:1px solid rgba(190,255,231,.52); border-radius:50%; content:""; }.help-support-pulse > div { position:relative; z-index:1; display:grid; place-items:center; }.help-support-pulse .app-icon { width:22px; height:22px; margin-bottom:5px; color:#97f7d4; }.help-support-pulse strong { color:#fff; font-size:31px; line-height:1; letter-spacing:-.06em; }.help-support-pulse small { margin-top:5px; color:#d6e4ff; font-size:9px; font-weight:850; letter-spacing:.05em; text-align:center; }.help-support-orbit { position:absolute; border:1px solid rgba(157,237,255,.38); border-radius:50%; }.orbit-one { width:140px; height:140px; transform:rotate(35deg) scaleX(1.26); }.orbit-two { width:174px; height:174px; border-color:rgba(152,255,214,.24); transform:rotate(-22deg) scaleY(.72); }.help-support > .help-support-hero > button { position:relative; display:grid; min-height:184px; align-content:center; justify-items:start; gap:9px; padding:25px; overflow:hidden; border:1px solid rgba(255,255,255,.26); border-radius:19px; color:#fff; background:linear-gradient(145deg,rgba(120,238,193,.28),rgba(255,255,255,.12)); box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 14px 30px rgba(8,18,76,.22); font:inherit; text-align:left; transition:transform .2s ease,background .2s ease,box-shadow .2s ease; }.help-support > .help-support-hero > button::after { position:absolute; right:-20px; bottom:-45px; width:115px; height:115px; border:1px solid rgba(255,255,255,.22); border-radius:50%; content:""; }.help-support > .help-support-hero > button:hover,.help-support > .help-support-hero > button:focus-visible { outline:0; background:linear-gradient(145deg,rgba(116,251,200,.5),rgba(255,255,255,.2)); box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 19px 34px rgba(8,18,76,.32); transform:translateY(-4px); }.help-support > .help-support-hero > button > span { display:grid; width:37px; height:37px; place-items:center; border-radius:12px; color:#173f7c; background:#a0f8d8; }.help-support > .help-support-hero > button .app-icon { width:19px; height:19px; }.help-support > .help-support-hero > button b { position:relative; z-index:1; font-size:17px; }.help-support > .help-support-hero > button small { position:relative; z-index:1; max-width:145px; color:#e4f8ff; font-size:11px; font-weight:650; line-height:1.45; }.help-support form { position:relative; z-index:2; margin:0 22px 22px; background:#f7faff; }.support-ticket-inbox { position:relative; z-index:2; padding:0 22px 22px; }.support-ticket-inbox > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 17px; border-radius:14px 14px 0 0; color:#fff; background:#183e78; }.support-ticket-status { margin:0; color:#dce9ff; font-size:12px; }.support-ticket-inbox > div:first-child > span { color:#8ff4d2; font-size:10px; font-weight:900; letter-spacing:.1em; }.support-ticket-list { padding:10px; border:1px solid #dce7f3; border-top:0; border-radius:0 0 14px 14px; background:#fff; }.support-ticket-list:empty { display:none; }.support-ticket-list article { border-color:#e5edf5; background:#fbfdff; }
@media (max-width:700px) { .help-view { padding:14px 0 40px; }.help-hero { min-height:164px; padding:25px; border-radius:18px; }.help-hero-symbol { display:none; }.help-toolbar,.help-section > header,.help-support > header { align-items:flex-start; flex-direction:column; }.help-toolbar { gap:10px; }.help-section,.help-support { padding:18px; border-radius:17px; }.help-section > header > span { text-align:left; }.help-guide-grid { grid-template-columns:1fr; }.help-next { align-items:flex-start; }.help-next > span { flex-basis:38px; width:38px; height:38px; }.help-support form > div { grid-template-columns:1fr; }.support-ticket-list article { grid-template-columns:1fr; gap:4px; } }

/* El bloque de soporte conserva su composición, también cuando se achica la pantalla. */
@media (max-width:800px) {
  .help-support { padding:0; }
  .help-support-hero { grid-template-columns:minmax(0,1fr) 150px; gap:20px; padding:30px; }
  .help-support > .help-support-hero > button { min-height:106px; grid-column:1 / -1; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:13px; padding:19px 21px; }
  .help-support > .help-support-hero > button > span { grid-row:1 / span 2; }
  .help-support > .help-support-hero > button b { align-self:end; }
  .help-support > .help-support-hero > button small { max-width:none; align-self:start; }
}

@media (max-width:520px) {
  .help-support { border-radius:19px; }
  .help-support-hero { grid-template-columns:1fr; gap:20px; padding:26px 22px; }
  .help-support h2 { font-size:30px; }
  .help-support-pulse { width:142px; height:142px; justify-self:start; }
  .orbit-one { width:120px; height:120px; }
  .orbit-two { width:150px; height:150px; }
  .help-support > .help-support-hero > button { grid-column:auto; }
  .help-support form { margin:0 12px 12px; padding:16px; }
  .support-ticket-inbox { padding:0 12px 12px; }
  .support-ticket-inbox > div:first-child { align-items:flex-start; flex-direction:column-reverse; }
}

/* Ayuda se consulta durante el trabajo: ningún texto operativo queda en escala micro. */
.help-hero p,.help-section header p,.help-next p { font-size:12px; letter-spacing:.13em; }
.help-toolbar > p { font-size:14px; }
.help-section h2 { font-size:26px; }
.help-section > header > span { font-size:14px; line-height:1.5; }
.help-guide-card { min-height:172px; padding:21px; }
.help-guide-card p { font-size:12px; letter-spacing:.1em; }
.help-guide-card h3 { font-size:19px; }
.help-guide-card div > span { font-size:14px; line-height:1.5; }
.help-guide-card button { margin-top:14px; font-size:14px; }
.help-guide-card button .app-icon { width:17px; height:17px; }
.help-empty { font-size:14px; }
.help-next h2 { font-size:20px; }
.help-next div > span { font-size:14px; line-height:1.5; }
.help-support-copy p { font-size:12px; letter-spacing:.14em; }
.help-support-promises span { font-size:12px; }
.help-support-pulse small { font-size:11px; }
.help-support > .help-support-hero > button small { font-size:13px; line-height:1.5; }
.help-support label { font-size:13px; }
.help-support input,.help-support select,.help-support textarea { min-height:46px; font-size:15px; }
.help-support textarea { min-height:108px; }
.help-support form > p { font-size:13px; }
.help-support form footer button[type="button"],.help-support form footer button[type="submit"] { min-height:46px; font-size:14px; }
.support-ticket-status { font-size:14px; }
.support-ticket-inbox > div:first-child > span { font-size:12px; }
.support-ticket-list b { font-size:12px; }
.support-ticket-list strong { font-size:15px; }
.support-ticket-list span { font-size:13px; }

/* Ayuda debe leerse con la misma escala que las pantallas operativas, incluso a distancia. */
.help-hero > div > span { font-size:18px; line-height:1.55; }
.help-section h2 { font-size:31px; }
.help-section > header > span { max-width:390px; font-size:17px; line-height:1.52; }
.help-guide-card { min-height:196px; padding:24px; }
.help-guide-card p { margin-bottom:7px; font-size:14px; letter-spacing:.11em; }
.help-guide-card h3 { margin-bottom:8px; font-size:25px; line-height:1.12; }
.help-guide-card div > span { font-size:18px; line-height:1.5; }
.help-guide-card button { margin-top:17px; font-size:16px; }
.help-guide-card button .app-icon { width:19px; height:19px; }
.help-next h2 { font-size:23px; }
.help-next div > span { font-size:17px; line-height:1.52; }
.help-support h2 { font-size:clamp(34px,3.3vw,44px); }
.help-support-copy > span { font-size:19px; line-height:1.58; }
.help-support-promises span { padding:9px 14px; font-size:16px; }
.help-support-promises .app-icon { width:18px; height:18px; }
.help-support-pulse small { font-size:13px; }
.help-support > .help-support-hero > button b { font-size:20px; }
.help-support > .help-support-hero > button small { max-width:180px; font-size:16px; line-height:1.48; }
.support-ticket-status { font-size:18px; }
.support-ticket-inbox > div:first-child > span { font-size:15px; }
.support-ticket-list b { font-size:14px; }
.support-ticket-list strong { font-size:17px; }
.support-ticket-list span { font-size:15px; }

.cash-view { min-height: calc(100vh - 126px); padding: 34px clamp(22px,4vw,62px) 52px; background: #f4f7fb; color: #17243b; }
.cash-header { display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:1460px; margin:0 auto 24px; }
.cash-header p,.cash-dialog header p { margin:0 0 5px; color:#7658dc; font-size:12px; font-weight:900; letter-spacing:.16em; }
.cash-header h1 { margin:0; font-size:clamp(28px,3vw,42px); letter-spacing:-.04em; }
.cash-header > div > span { display:block; margin-top:7px; color:#6e788a; font-size:15px; }

.cash-header-tools { display:flex; align-items:stretch; gap:14px; }
.cash-currency-card { display:flex; flex-direction:column; justify-content:center; gap:5px; min-width:210px; min-height:72px; padding:10px 18px; border:1px solid #dbe3ed; border-radius:18px; background:#fff; box-shadow:0 4px 18px rgba(23,36,59,.06); transition:border-color .18s ease,box-shadow .18s ease; cursor:pointer; }
.cash-currency-card:hover { border-color:#c4d2e5; box-shadow:0 6px 22px rgba(23,36,59,.09); }
.cash-currency-label { display:flex; align-items:center; gap:6px; color:#5f6d83; font-size:12px; font-weight:850; letter-spacing:.06em; text-transform:uppercase; line-height:1; }
.cash-currency-label .app-icon { width:15px; height:15px; color:#6346d8; flex-shrink:0; }
.cash-currency-card .smart-select { width:100%; min-width:0; }
.cash-currency-card .smart-select-trigger { min-height:30px; padding:2px 4px 2px 0; border:0; border-radius:8px; background:transparent; box-shadow:none; font-size:16px; font-weight:850; color:#17243b; display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; transition:color .16s ease; }
.cash-currency-card .smart-select-trigger:hover { background:transparent; color:#5333c5; }
.cash-currency-card .smart-select-trigger:focus-visible,
.cash-currency-card .smart-select.is-open .smart-select-trigger { border:0; box-shadow:none; color:#5333c5; outline:0; }
.cash-currency-card .smart-select-value { font-size:16px; font-weight:850; color:#17243b; letter-spacing:-.01em; }
.cash-currency-card .smart-select-arrow { color:#6346d8; width:9px; height:9px; border-right-width:2.5px; border-bottom-width:2.5px; }
.cash-currency-card .smart-select-menu { top:calc(100% + 8px); min-width:100%; padding:6px; border:1px solid #d5ddea; border-radius:14px; background:#fff; box-shadow:0 16px 40px rgba(23,36,59,.16); z-index:90; }
.cash-currency-card .smart-select-option { min-height:42px; padding:9px 12px; border-radius:9px; font-size:14px; font-weight:800; color:#17243b; }
.cash-currency-card .smart-select-option:hover,
.cash-currency-card .smart-select-option:focus-visible { background:#f2effe; color:#5534c7; }
.cash-currency-card .smart-select-option[aria-selected="true"] { background:#ece6fd; color:#4927b8; font-weight:900; }
.cash-currency-card .smart-select-check { color:#6346d8; font-weight:900; }
.cash-currency-card select.cash-currency-select:not(.smart-select-native) { border:0; outline:0; color:#17243b; background:transparent; font:inherit; font-size:16px; font-weight:850; cursor:pointer; padding:4px 0; }

.cash-day-state { display:flex; align-items:center; gap:14px; min-height:72px; padding:10px 20px; border:1px solid #dbe3ed; border-radius:18px; background:#fff; box-shadow:0 4px 18px rgba(23,36,59,.06); transition:border-color .18s ease,box-shadow .18s ease; }
.cash-day-state:hover { border-color:#c4d2e5; box-shadow:0 6px 22px rgba(23,36,59,.09); }
.cash-day-icon-badge { display:grid; place-items:center; width:44px; height:44px; border-radius:13px; background:#f0edfc; color:#6346d8; flex-shrink:0; }
.cash-day-icon-badge .app-icon { width:22px; height:22px; }
.cash-day-info { display:flex; flex-direction:column; justify-content:center; gap:3px; min-width:0; }
.cash-day-date { color:#17243b; font-size:15px; font-weight:850; letter-spacing:-.01em; text-transform:capitalize; line-height:1.25; white-space:nowrap; }
.cash-day-badge { display:inline-flex; align-items:center; width:fit-content; padding:3px 9px; border-radius:6px; font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; line-height:1.2; }
.cash-day-state .cash-day-badge,
.cash-day-state[data-state="loading"] .cash-day-badge { color:#5f6d83; background:#f1f5f9; border:1px solid #e2e8f0; }
.cash-day-state[data-state="not-opened"] .cash-day-badge { color:#b45309; background:#fef3c7; border:1px solid #fde68a; }
.cash-day-state[data-state="open"] .cash-day-badge { color:#047857; background:#d1fae5; border:1px solid #a7f3d0; }
.cash-day-state[data-state="closed"] .cash-day-badge { color:#475569; background:#f1f5f9; border:1px solid #cbd5e1; }

.cash-status { max-width:1460px; margin:40px auto; padding:22px; text-align:center; color:#667185; }
.cash-opening { max-width:920px; margin:54px auto; display:grid; grid-template-columns:280px minmax(0,1fr); overflow:hidden; border-radius:28px; background:#fff; box-shadow:0 24px 70px #2334551c; }
.cash-opening-visual { position:relative; min-height:510px; display:grid; place-content:center; justify-items:center; overflow:hidden; color:#fff; background:radial-gradient(circle at 50% 38%,#957bf0 0 4%,transparent 5%),linear-gradient(150deg,#7354dc,#38257f); }
.cash-opening-visual::before,.cash-opening-visual::after { content:""; position:absolute; width:220px; height:220px; border:1px solid #ffffff29; border-radius:50%; }.cash-opening-visual::after { width:340px; height:340px; }
.cash-opening-visual span { z-index:1; display:grid; place-items:center; width:92px; height:92px; border-radius:28px; background:#ffffff1c; backdrop-filter:blur(7px); }.cash-opening-visual .app-icon { width:46px;height:46px; }
.cash-opening-visual i { z-index:1; width:2px;height:70px;background:linear-gradient(#fff8,transparent); }.cash-opening-visual b { z-index:1; font-size:12px; letter-spacing:.18em; }
.cash-opening form { padding:48px clamp(28px,5vw,68px); }.cash-opening form > p:first-child { margin:0 0 8px;color:#7658dc;font-size:12px;font-weight:900;letter-spacing:.15em; }.cash-opening h2 { margin:0 0 8px;font-size:30px;letter-spacing:-.03em; }.cash-opening form > span { color:#68758a;line-height:1.55; }
.cash-suggestion { width:100%; margin:27px 0 22px; padding:16px 18px; display:grid; grid-template-columns:1fr auto; text-align:left; border:1px solid #ded8f8; border-radius:15px; background:#faf9ff; color:#3b2b75; }.cash-suggestion small { font-size:12px;letter-spacing:.1em; }.cash-suggestion strong { grid-row:2;font-size:22px; }.cash-suggestion em { grid-row:1/3;grid-column:2;align-self:center;color:#7658dc;font-size:12px;font-style:normal;font-weight:800; }
.cash-opening label,.cash-dialog-body > label { display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px; }.cash-opening label span,.cash-dialog label > span { grid-column:1/-1;color:#455268;font-size:12px;font-weight:800; }.cash-opening label > b,.cash-amount-field > b,.cash-close-equation label > b { font-size:25px;color:#68758a; }.cash-opening input,.cash-dialog input,.cash-dialog select,.cash-dialog textarea { min-width:0;border:1px solid #d5ddea;border-radius:11px;padding:12px 13px;background:#fff;color:#17243b;font:inherit; }.cash-opening input { font-size:26px;font-weight:800; }
.cash-primary-action,.cash-close-confirm { display:flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:12px;background:linear-gradient(135deg,#7458de,#5339b8);color:#fff;font-weight:900;letter-spacing:.04em;box-shadow:0 12px 24px #6547d733; }.cash-opening .cash-primary-action { width:100%;padding:15px; }.cash-primary-action .app-icon,.cash-close-confirm .app-icon { width:18px;height:18px; }
.cash-form-error { min-height:20px;margin:10px 0;color:#c53e49;font-size:12px;font-weight:700; }
.cash-view #cashWorkspace { max-width:1460px;margin:0 auto; }

.cash-channel-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.cash-channel-summary article { position:relative; overflow:hidden; display:grid; gap:4px; padding:18px 20px; border:1px solid #dfe5ee; border-radius:18px; background:#fff; box-shadow:0 9px 26px #20304e0c; }
.cash-channel-summary article::after { content:""; position:absolute; right:-18px; bottom:-28px; width:78px; height:78px; border-radius:50%; background:currentColor; opacity:.07; }
.cash-channel-summary small { color:#778397; font-size:12px; font-weight:900; letter-spacing:.1em; }
.cash-channel-summary strong { color:#1d2a40; font-size:clamp(20px,2vw,30px); letter-spacing:-.03em; }
.cash-channel-summary span { color:#7a8597; font-size:12px; }
.cash-channel-summary .is-total { color:#5a50d2; border-color:#dad7f6; }
.cash-channel-summary .is-cash { color:#159366; border-color:#ccebdd; }
.cash-channel-summary .is-digital { color:#2779bd; border-color:#cfe4f4; }
.cash-channel-summary .is-pending { color:#c27a25; border-color:#efdcbc; }

.cash-method-breakdown { margin:14px 0 0; padding:16px 18px; border:1px solid #dfe5ee; border-radius:18px; background:#fff; }
.cash-method-breakdown > header { display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:12px; }
.cash-method-breakdown header p { margin:0 0 3px; color:#6d55d1; font-size:12px; font-weight:900; letter-spacing:.11em; }
.cash-method-breakdown h2 { margin:0; font-size:17px; }
.cash-method-breakdown header > span { color:#7d8899; font-size:12px; }
.cash-method-breakdown > div { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:8px; }
.cash-method-breakdown article { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 13px; border:1px solid #e8ebf1; border-radius:12px; background:#fafbfc; }
.cash-method-breakdown article p { display:grid; gap:2px; margin:0; }
.cash-method-breakdown article strong { color:#313c52; font-size:13px; }
.cash-method-breakdown article span { color:#818b9c; font-size:12px; }
.cash-method-breakdown article > b { color:#28364d; font-size:13px; }
.cash-method-breakdown article.needs-reconciliation { border-color:#cfe4f4; background:#f2f9ff; }
.cash-method-breakdown article.is-pending { border-color:#efddbd; background:#fff9ee; }

.cash-balance-ribbon { display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1.18fr;align-items:stretch;gap:10px; }.cash-balance-ribbon > i { align-self:center;color:#9ba5b5;font-size:25px;font-style:normal; }
.cash-balance-ribbon article { min-width:0;display:flex;align-items:center;gap:13px;padding:18px;border:1px solid #dfe5ee;border-radius:18px;background:#fff;box-shadow:0 9px 26px #20304e0c; }.cash-balance-ribbon article > span { flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#edf1f7;color:#5b6980; }.cash-balance-ribbon .app-icon { width:21px;height:21px; }.cash-balance-ribbon div { min-width:0;display:grid;gap:3px; }.cash-balance-ribbon small { color:#7c8799;font-size:12px;font-weight:900;letter-spacing:.08em; }.cash-balance-ribbon strong { overflow:hidden;text-overflow:ellipsis;font-size:clamp(18px,1.8vw,28px);letter-spacing:-.03em; }.cash-balance-ribbon em { color:#fff9;font-size:12px;font-style:normal; }.cash-balance-ribbon .is-payments > span { background:#e4f8ef;color:#159366; }.cash-balance-ribbon .is-expenses > span { background:#fff0ec;color:#e16442; }.cash-balance-ribbon .is-expected { color:#fff;border:0;background:linear-gradient(140deg,#ff9c27,#ed6d23); }.cash-balance-ribbon .is-expected small { color:#fffbd1; }

.cash-command { margin:22px 0 16px;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:15px 18px;border:1px solid #dfe5ef;border-radius:16px;background:#fff; }.cash-command > div { display:flex;align-items:center;gap:12px; }.cash-command p { display:grid;margin:0; }.cash-command small { color:#189368;font-size:12px;font-weight:900;letter-spacing:.12em; }.cash-command strong { font-size:13px; }.cash-live-dot { width:10px;height:10px;border-radius:50%;background:#20bf85;box-shadow:0 0 0 6px #20bf8518; }.cash-command button { display:flex;align-items:center;gap:7px;padding:10px 13px;border:1px solid #d9e0eb;border-radius:10px;background:#fff;color:#58657a;font-weight:800;font-size:12px; }.cash-command .cash-close-button { border-color:#f2c7c2;color:#c24d45;background:#fff7f5; }.cash-command .app-icon { width:16px;height:16px; }

.cash-closed-banner { margin:22px 0 16px;display:flex;align-items:center;gap:16px;padding:18px 22px;border:1px solid #bce8d7;border-radius:18px;background:linear-gradient(90deg,#edf9f4,#fff); }.cash-closed-banner > span { display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#1ca777;color:#fff; }.cash-closed-banner .app-icon { width:25px;height:25px; }.cash-closed-banner div { display:grid;gap:3px; }.cash-closed-banner small { color:#178860;font-size:12px;font-weight:900;letter-spacing:.12em; }.cash-closed-banner p { margin:0;color:#5b6b70;font-size:13px; }

.cash-ledger { display:grid;grid-template-columns:1fr 1fr;gap:18px; }.cash-movements { min-width:0;overflow:hidden;border:1px solid #dfe5ee;border-radius:20px;background:#fff; }.cash-movements > header { min-height:76px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #edf0f5; }.cash-movements header > div { display:flex;align-items:center;gap:12px; }.cash-movements header span { display:grid;place-items:center;width:38px;height:38px;border-radius:12px; }.cash-movements.is-payments header span { background:#e6f8f0;color:#148e64; }.cash-movements.is-expenses header span { background:#fff0ec;color:#dc6040; }.cash-movements header .app-icon { width:19px;height:19px; }.cash-movements header p { display:grid;margin:0; }.cash-movements header small { color:#7c8798;font-size:12px;font-weight:900;letter-spacing:.12em; }.cash-movements header strong { font-size:16px; }.cash-movements header > b { color:#7b8697;font-size:13px; }.cash-movements header button { display:flex;align-items:center;gap:6px;border:0;border-radius:10px;padding:10px 12px;background:#fff0ec;color:#c94e32;font-size:12px;font-weight:900; }.cash-empty { margin:0;padding:32px;text-align:center;color:#8b95a5;font-size:13px; }.cash-movement-list { max-height:430px;overflow:auto; }.cash-movement { display:grid;grid-template-columns:54px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:14px 18px;border-top:1px solid #f0f2f6; }.cash-movement time { color:#738095;font-size:12px;font-weight:800; }.cash-movement div { min-width:0;display:grid;gap:3px; }.cash-movement strong { white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px; }.cash-movement small { color:#8791a1;font-size:12px; }.cash-movement > b { color:#17243b;font-size:14px; }.cash-movement > button { width:29px;height:29px;display:grid;place-items:center;border:1px solid #f0d3cf;border-radius:9px;background:#fff8f6;color:#cb5b4a; }.cash-movement > button .app-icon { width:14px;height:14px; }.cash-movement.is-void { opacity:.52;text-decoration:line-through; }
.cash-movements > footer { padding:12px 18px; border-top:1px solid #edf0f5; color:#788397; font-size:12px; text-align:right; }
.cash-movements > footer strong { color:#28364d; }
.cash-movement.is-pending { background:#fffaf0; }
.cash-movement.is-pending > b { color:#b87322; }

.cash-dialog { width:min(620px,calc(100vw - 28px));padding:0;border:0;border-radius:22px;box-shadow:0 30px 90px #17243b55; }.cash-dialog::backdrop { background:#1822399e;backdrop-filter:blur(3px); }.cash-dialog form > header { display:flex;align-items:center;gap:12px;padding:20px 24px;border-bottom:1px solid #e8edf3; }.cash-dialog form > header > span { display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#eeeafd;color:#6446d1; }.cash-dialog header .app-icon { width:21px;height:21px; }.cash-dialog header div { flex:1; }.cash-dialog header h2 { margin:0;font-size:21px; }.cash-dialog header button { display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:10px;background:#f2f4f8;color:#68758a; }.cash-dialog-body { padding:24px;display:grid;gap:18px; }.cash-dialog-body > div { display:grid;grid-template-columns:1fr 1fr;gap:14px; }.cash-dialog-body label { display:grid;gap:7px; }.cash-dialog-body .cash-amount-field { grid-template-columns:auto 1fr; }.cash-dialog form > footer { display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid #e8edf3;background:#f8fafc; }.cash-dialog footer button { padding:12px 16px;border:1px solid #dbe1ea;border-radius:10px;background:#fff;color:#596579;font-weight:900;font-size:12px; }.cash-dialog footer .cash-primary-action,.cash-dialog footer .cash-close-confirm { border:0;color:#fff; }.cash-close-dialog { width:min(760px,calc(100vw - 28px)); }.cash-close-equation { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px; }.cash-close-equation > div,.cash-close-equation > label { min-height:110px;padding:18px;display:grid;align-content:center;border:1px solid #dfe5ee;border-radius:15px;background:#f9fafc; }.cash-close-equation small,.cash-close-equation label > span,#cashDifferencePreview small { color:#7b8698;font-size:12px;font-weight:900;letter-spacing:.1em; }.cash-close-equation strong { font-size:26px; }.cash-close-equation div > span { color:#7c8799;font-size:12px; }.cash-close-equation > i { color:#8c96a6;font-style:normal;font-weight:800; }.cash-close-equation label { grid-template-columns:auto 1fr; }.cash-close-equation label input { font-size:22px;font-weight:800; }.cash-close-equation label > span { grid-column:1/-1; }#cashDifferencePreview { display:grid;grid-template-columns:1fr auto;gap:3px;padding:15px 18px;border-radius:13px;background:#eef8f4;color:#177d5b; }#cashDifferencePreview strong { grid-row:1/3;grid-column:2;font-size:21px; }#cashDifferencePreview span { font-size:12px; }#cashDifferencePreview.has-difference { background:#fff2ee;color:#bd4c38; }.cash-close-confirm { background:linear-gradient(135deg,#1fa876,#138060); }.cash-void-confirm { border-color:#dc6356!important;background:#cf5145!important;color:#fff!important; }

@media (max-width:1000px) { .cash-channel-summary { grid-template-columns:1fr 1fr; }.cash-balance-ribbon { grid-template-columns:1fr 1fr; }.cash-balance-ribbon > i { display:none; }.cash-ledger { grid-template-columns:1fr; } }
@media (max-width:680px) {
  .cash-view { padding:20px 12px 38px; }
  .cash-header { align-items:flex-start;flex-direction:column; }
  .cash-header-tools { width:100%;flex-direction:column;gap:10px; }
  .cash-currency-card, .cash-day-state { width:100%;min-width:0; }
  .cash-day-state { padding:12px 16px; }
  .cash-opening { grid-template-columns:1fr;margin:24px auto; }
  .cash-opening-visual { min-height:150px; }
  .cash-opening-visual::before,.cash-opening-visual::after,.cash-opening-visual i { display:none; }
  .cash-opening form { padding:28px 22px; }
  .cash-channel-summary,.cash-balance-ribbon { grid-template-columns:1fr; }
  .cash-command { align-items:flex-start;flex-direction:column; }
  .cash-command > div:last-child { width:100%; }
  .cash-command button { flex:1;justify-content:center; }
  .cash-movement { grid-template-columns:46px minmax(0,1fr) auto; }
  .cash-movement > button { grid-column:3; }
  .cash-close-equation { grid-template-columns:1fr; }
  .cash-close-equation > i { text-align:center; }
  .cash-dialog-body > div { grid-template-columns:1fr; }
}
@media print {
  @page { margin: 14mm; }
  body.cash-printing * { visibility: hidden !important; }
  body.cash-printing #cashView,
  body.cash-printing #cashView * { visibility: visible !important; }
  body.cash-printing #cashView { position: absolute; inset: 0; display: block !important; width: 100%; padding: 0; background: #fff; }
  body.cash-printing .legacy-topbar,
  body.cash-printing .legacy-footer,
  body.cash-printing .cash-command,
  body.cash-printing .cash-status,
  body.cash-printing .cash-movements header button { display: none !important; }
  body.cash-printing .cash-header { margin-bottom: 18px; }
  body.cash-printing .cash-balance-ribbon article,
  body.cash-printing .cash-movements,
  body.cash-printing .cash-closed-banner { break-inside: avoid; box-shadow: none; }
  body.cash-printing .cash-movement-list { max-height: none; overflow: visible; }
  body.cash-printing .cash-ledger { align-items: start; }
}

/* Mi Cuenta en móvil: una sola columna real, sin tracks implícitos de escritorio. */
@media (max-width: 700px) {
  .account-view .account-workbench { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .account-view .account-panel-welcome { min-width: 0; }
  .account-view .account-summary-grid { grid-template-columns: minmax(0, 1fr); }
  .account-view .account-summary-grid > article.account-plan-insight,
  .account-view .account-summary-grid > article.pwa-install-account-prompt,
  .account-view .account-summary-grid > .account-quick-card.is-team,
  .account-view .account-summary-grid > .account-quick-card.is-reminders,
  .account-view .account-summary-grid > .account-quick-card.is-values,
  .account-view .account-summary-grid > .account-quick-card.is-schedule,
  .account-view .account-summary-grid > .account-quick-card.is-signature { grid-column: 1 / -1; min-width: 0; width: 100%; }
}

/* Corrección final de especificidad: preserva el nuevo hero comercial del plan. */
.subscription-current {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr);
  align-items: center;
  padding: 24px 26px;
  border-radius: 22px;
  background: linear-gradient(115deg,#182a4d 0%,#2f55a9 50%,#7355d5 100%);
}
.subscription-current > div { justify-content: initial; }
.subscription-current-plan strong { color: #fff; font-size: 30px !important; }
.subscription-current-plan p { color: rgba(255,255,255,.82); font-size: 16px !important; }
.subscription-current-plan em { color: #dfffee; font-size: 12px !important; }
.subscription-current-team > small,
.subscription-current-plan small { color: rgba(255,255,255,.72) !important; }
.subscription-current-team p span,
.subscription-current-team p strong { color: rgba(255,255,255,.9); font-size: 16px !important; }
.subscription-current-team p b { color: #fff; font-size: 30px !important; }
.subscription-tier-options .is-premium > span > .app-icon {
  width: 42px;
  height: 42px;
  padding: 0;
  color: #f6b91f !important;
  background: transparent;
}
.subscription-period-options label > span {
  grid-template-columns: 44px minmax(0,1fr);
  gap: 13px;
  padding: 19px 17px;
}
.subscription-period-options label > span::before { display: none; content: none; }
.subscription-period-options small { grid-column: auto; }
.subscription-license-options label > span {
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 21px 18px 18px;
}
.subscription-license-options .subscription-license-copy b,
.subscription-license-options input:checked + span .subscription-license-copy b {
  display: block;
  width: auto;
  height: auto;
  color: #253650;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  font-size: 18px !important;
}
.subscription-license-options .subscription-license-copy strong { font-size: 15px !important; }
.subscription-license-options .subscription-license-copy small { font-size: 13px !important; }

@media (max-width: 700px) {
  .subscription-current { grid-template-columns: 1fr; }
  .account-section-nav { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .account-section-nav > button { min-height: 66px; grid-template-columns: 36px minmax(0,1fr); padding: 9px; }
  .account-section-nav > button > span { width: 36px; height: 36px; }
  .account-section-nav b { font-size: 13px !important; }
  .account-section-nav small { display: none; }
}

/* Plan y licencias: distribución amplia y selección azul eléctrica. */
#subscriptionOrderForm { grid-template-columns: minmax(0,1fr); }
.subscription-builder-heading,
.subscription-step:nth-of-type(3),
.subscription-price-summary,
.subscription-form-note { grid-column: auto; }

.subscription-tier-options { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.subscription-tier-options label > span {
  min-height: 150px;
  grid-template-columns: 64px minmax(0,1fr);
  gap: 18px;
  padding: 27px 25px 23px;
}
.subscription-tier-symbol {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border-radius: 19px;
  color: #2477e8;
  background: #e9f2ff;
}
.subscription-tier-symbol .app-icon { width: 29px; height: 29px; }
.subscription-tier-options .is-premium .subscription-tier-symbol {
  color: #ffc529;
  background: #6751d8;
  box-shadow: 0 9px 18px rgba(91,68,205,.22);
}
.subscription-tier-options .is-premium .subscription-tier-symbol .app-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  color: #ffc529 !important;
  background: transparent;
}
.subscription-tier-options em { top: 16px; right: 18px; }
.subscription-tier-options .is-premium .subscription-tier-copy { padding-right: 124px; }
.subscription-tier-copy small { white-space: nowrap; }

.subscription-period-options { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.subscription-period-options label > span {
  min-height: 152px;
  grid-template-columns: 58px minmax(0,1fr);
  gap: 17px;
  padding: 24px 22px;
}
.subscription-period-options label > span > .app-icon {
  width: 56px;
  height: 56px;
  padding: 14px;
  border-radius: 17px;
}
.subscription-period-options label > span > span { gap: 4px; }
.subscription-period-options b { font-size: 24px !important; }
.subscription-period-options strong { font-size: 14px !important; }

.subscription-tier-options input:checked + span,
.subscription-period-options input:checked + span,
.subscription-license-options input:checked + span {
  border-color: #1677ff;
  background: #eef5ff;
  box-shadow: 0 0 0 3px rgba(22,119,255,.14),0 13px 28px rgba(22,93,195,.14);
}
.subscription-tier-options input:checked + span .subscription-option-check,
.subscription-period-options input:checked + span .subscription-option-check,
.subscription-license-options input:checked + span .subscription-option-check {
  border-color: #1677ff;
  background: #1677ff;
}
.subscription-license-options input:checked + span .subscription-license-seat,
.subscription-current-seats > span.is-occupied {
  color: #fff;
  background: #1677ff;
  box-shadow: 0 7px 15px rgba(22,119,255,.25);
}
.subscription-license-copy strong,
.subscription-license-options input:checked + span .subscription-license-copy strong { color: #146fdb; }
.subscription-period-options label > span > .app-icon { color: #1677ff; background: #e7f1ff; }

/* Las plazas se agrupan dentro de cada opción: tres por fila evita que seis integrantes desborden la tarjeta. */
.subscription-license-options label > span {
  grid-template-columns: 1fr;
  grid-template-areas:
    'seats'
    'copy';
  align-content: start;
  gap: 13px;
  padding: 46px 18px 18px;
}
.subscription-license-options .subscription-option-check {
  position: absolute;
  top: 17px;
  left: 17px;
}
.subscription-license-seats {
  display: grid;
  grid-area: seats;
  grid-template-columns: repeat(3, 35px);
  gap: 7px;
  justify-content: center;
  width: min(100%, 119px);
  min-height: 35px;
  margin: 0 auto;
  padding: 0;
}
.subscription-license-options label[data-seat-count="1"] .subscription-license-seats { grid-template-columns: 35px; }
.subscription-license-copy { grid-area: copy; }

@media (max-width: 760px) {
  .subscription-tier-options,
  .subscription-period-options { grid-template-columns: 1fr; }
  .subscription-tier-options .is-premium .subscription-tier-copy { padding-right: 0; }
  .subscription-tier-options em { position: static; grid-column: 2; grid-row: 1; justify-self: start; margin-bottom: 2px; }
  .subscription-tier-options .is-premium > span { grid-template-rows: auto auto; }
  .subscription-tier-options .is-premium .subscription-tier-symbol { grid-row: 1 / span 2; }
}

/* Profesionales: vista de equipo, sin bordes verdes ni apariencia de tabla. */
.professional-dialog > article > header {
  padding: 22px 28px;
  border-bottom: 0;
  background: linear-gradient(110deg,#fff 0%,#f6f3ff 58%,#eef6ff 100%);
}
.professional-dialog > article > header p { color: #6552ce; font-size: 13px !important; }
.professional-dialog > article > header h2 { font-size: 29px; letter-spacing: -.025em; }
.professional-dialog > article > header > div > span {
  width: 54px;
  height: 54px;
  border-radius: 17px;
  background: linear-gradient(145deg,#6555d8,#8068eb);
  box-shadow: 0 12px 25px rgba(92,72,206,.25);
}
.professional-dialog > article > header > div > span .app-icon { width: 27px; height: 27px; }
.professional-body { padding: 26px 28px 32px; background: #f5f7fc; }
#professionalWorkspace { gap: 24px; }

.professional-capacity {
  position: relative;
  display: grid;
  grid-template-columns: minmax(340px,1fr) auto auto;
  gap: 24px;
  align-items: center;
  padding: 25px 27px;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(112deg,#172b50 0%,#2462c7 58%,#7354d5 100%);
  box-shadow: 0 17px 35px rgba(34,69,142,.2);
}
.professional-capacity::after {
  position: absolute;
  width: 210px;
  height: 210px;
  right: -95px;
  bottom: -135px;
  border: 30px solid rgba(255,255,255,.08);
  border-radius: 50%;
  content: "";
}
.professional-capacity > .professional-capacity-main {
  position: relative;
  z-index: 1;
  display: flex !important;
  align-items: center;
  gap: 28px;
}
.professional-capacity-main > span {
  display: grid;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.23);
  border-radius: 19px;
  color: #fff;
  background: rgba(255,255,255,.14);
}
.professional-capacity-main > span .app-icon { width: 30px; height: 30px; }
.professional-capacity-main > div { display: grid; gap: 7px; }
.professional-capacity-main small { color: rgba(255,255,255,.72); font-size: 11px !important; }
.professional-capacity-main strong { color: #fff; font-size: 25px !important; }
.professional-capacity-main p { margin: 0; color: rgba(255,255,255,.82); font-size: 14px !important; }
.professional-capacity-seats { display: flex; gap: 9px; margin-top: 11px; }
.professional-capacity-seats > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  color: #5673a3;
  background: rgba(255,255,255,.82);
}
.professional-capacity-seats > span.is-occupied {
  color: #fff;
  background: #1677ff;
  box-shadow: 0 7px 15px rgba(7,31,92,.25);
}
.professional-capacity-seats .app-icon { width: 17px; height: 17px; }
.professional-capacity dl {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3,minmax(118px,1fr));
  gap: 9px;
  min-width: 410px;
  overflow: visible;
  border: 0;
  background: transparent;
}
.professional-capacity dl div,
.professional-capacity dl div + div {
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 13px;
  background: rgba(15,38,92,.18);
}
.professional-capacity dt { color: rgba(255,255,255,.68); font-size: 10px !important; letter-spacing: .07em; }
.professional-capacity dd { display: grid; gap: 2px; margin: 0; color: rgba(255,255,255,.8); font-size: 12px !important; }
.professional-capacity dd b { color: #fff; font-size: 22px !important; }
.professional-capacity > button {
  position: relative;
  z-index: 1;
  min-height: 52px;
  padding: 13px 17px;
  border-radius: 14px;
  color: #2156b2;
  background: #fff;
  box-shadow: 0 9px 19px rgba(12,31,78,.2);
  font-size: 13px !important;
}
.professional-capacity > button:disabled {
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

.professional-directory { gap: 15px; }
.professional-directory > header { padding: 2px 3px; }
.professional-directory > header p { color: #6552ce; font-size: 11px !important; }
.professional-directory > header h3 { margin-top: 3px; font-size: 23px; letter-spacing: -.02em; }
.professional-directory > header > span { padding: 7px 11px; border-radius: 999px; color: #42628a; background: #eaf0f7; font-size: 13px !important; font-weight: 800; }

#professionalList { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
#professionalList > article {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 15px;
  min-width: 0;
  padding: 21px;
  overflow: hidden;
  border: 1px solid #dce5f0;
  border-left: 1px solid #dce5f0;
  border-radius: 18px;
  background: linear-gradient(155deg,#fff 62%,#f3f7fc);
  box-shadow: 0 10px 24px rgba(35,57,89,.07);
}
#professionalList > article::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: #1677ff;
  content: "";
}
#professionalList > article[data-access="OWNER"]::before { background: #7255d9; }
#professionalList > article[data-status="INVITED"] { border-left-color: #dce5f0; background: linear-gradient(155deg,#fff 62%,#fff9ec); }
#professionalList > article[data-status="INVITED"]::before { background: #e5a62d; }
#professionalList > article[data-status="INACTIVE"] { border-left-color: #dce5f0; background: #f3f5f8; }
#professionalList > article[data-status="INACTIVE"]::before { background: #98a4b4; }
#professionalList article > header { grid-template-columns: 52px minmax(0,1fr) auto; gap: 13px; }
#professionalList article > header > span {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(145deg,#247be8,#5c61dd);
  box-shadow: 0 7px 15px rgba(42,96,201,.2);
  font-size: 14px !important;
}
#professionalList article[data-access="OWNER"] > header > span { background: linear-gradient(145deg,#624bd0,#8a64e6); }
#professionalList article > header > div { gap: 4px; }
#professionalList article > header strong { color: #24334b; font-size: 18px !important; }
#professionalList article > header small { color: #748196; font-size: 13px !important; }
#professionalList article > header em {
  padding: 6px 9px;
  color: #1265ce;
  background: #e8f2ff;
  font-size: 10px !important;
  letter-spacing: .05em;
}
#professionalList article[data-access="OWNER"] > header em { color: #6045ba; background: #eee8ff; }
#professionalList article[data-status="INVITED"] > header em { color: #8a6110; background: #fff0c9; }
#professionalList article[data-status="INACTIVE"] > header em { color: #687382; background: #e4e9ef; }
#professionalList dl {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
  overflow: visible;
  border: 0;
  background: transparent;
}
#professionalList dl div,
#professionalList dl div + div {
  gap: 5px;
  padding: 11px;
  border: 0;
  border-radius: 11px;
  background: #f0f4f9;
}
#professionalList dt { color: #75839a; font-size: 10px !important; letter-spacing: .06em; }
#professionalList dd { color: #33445e; font-size: 14px !important; }
#professionalList .professional-activity {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #65748a;
  font-size: 13px !important;
}
#professionalList .professional-activity .app-icon { width: 16px; height: 16px; color: #3974c7; }
#professionalList article > footer { align-self: end; gap: 8px; padding-top: 2px; }
#professionalList article > footer:empty { display: none; }
#professionalList article > footer button {
  min-height: 39px;
  gap: 7px;
  padding: 9px 12px;
  border-color: #cbd8e8;
  border-radius: 10px;
  color: #2268c1;
  font-size: 12px !important;
}
#professionalList article > footer button.is-danger { border-color: #efcbd2; color: #b83d51; background: #fff9fa; }
#professionalList article > footer button.is-success { border-color: #bcd5f7; color: #1769ce; background: #f2f7ff; }

#professionalForm > aside {
  border-color: #c9dcf6;
  color: #255fae;
  background: #f1f6ff;
}
#professionalForm > aside span { color: #61748f; }

@media (max-width: 1280px) {
  .professional-capacity { grid-template-columns: 1fr auto; }
  .professional-capacity dl { min-width: 0; }
  .professional-capacity > button { grid-column: 1/-1; justify-self: end; }
  #professionalList { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* El panel se abre dentro de Mi Cuenta: responde al ancho real del diálogo, no al de la ventana. */
@container (max-width: 1080px) {
  .professional-dialog .professional-capacity { grid-template-columns: minmax(0,1fr) auto; }
  .professional-dialog .professional-capacity > .professional-capacity-main,
  .professional-dialog .professional-capacity dl { min-width: 0; }
  .professional-dialog .professional-capacity > button { grid-column: 1 / -1; width: 100%; justify-self: stretch; }
}

@container (max-width: 760px) {
  .professional-dialog .professional-capacity { grid-template-columns: minmax(0,1fr); padding: 21px; }
  .professional-dialog .professional-capacity dl { grid-template-columns: 1fr; }
  .professional-dialog .professional-capacity > button { grid-column: auto; }
}

@media (max-width: 760px) {
  .professional-dialog > article > header h2 { font-size: 24px; }
  .professional-capacity { grid-template-columns: 1fr; padding: 21px; }
  .professional-capacity dl { grid-template-columns: 1fr; }
  .professional-capacity > button { grid-column: auto; width: 100%; justify-self: stretch; }
  #professionalList { grid-template-columns: 1fr; }
  #professionalList article > header { grid-template-columns: 50px minmax(0,1fr); }
  #professionalList article > header em { grid-column: 2; justify-self: start; }
}

.professional-patient-count {
  display: grid;
  grid-template-columns: 38px auto minmax(0,1fr);
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 12px;
  color: #125ebc;
  background: #eaf3ff;
}
.professional-patient-count > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: #1677ff;
}
.professional-patient-count .app-icon { width: 18px; height: 18px; }
.professional-patient-count b { color: #145fc0; font-size: 23px !important; line-height: 1; }
.professional-patient-count small { color: #416b9c; font-size: 13px !important; font-weight: 800; }

/* Packs de mensajes: jerarquía comercial y compra con Mercado Pago. */
.message-pack-catalog { gap: 20px; padding-top: 7px; }
.message-pack-card {
  align-content: start;
  gap: 24px;
  padding: 26px;
  border-color: #e0e3ec;
  border-radius: 21px;
  box-shadow: 0 13px 30px rgba(41,48,74,.09);
}
.message-pack-card.is-recommended {
  border-color: #8a63e8;
  background: #fbf9ff;
  box-shadow: 0 16px 36px rgba(119,82,211,.17);
  transform: translateY(-5px);
}
.message-pack-card > em {
  top: 18px;
  right: 18px;
  padding: 8px 12px;
  color: #fff;
  background: #7d57dc;
  font-size: 10px;
}
.message-pack-card > header { align-items: flex-start; gap: 15px; }
.message-pack-card.is-recommended > header { padding-right: 112px; }
.message-pack-card > header > div { gap: 9px; }
.message-pack-card h3 { font-size: 23px; line-height: 1.16; }
.message-pack-card.is-recommended .message-pack-symbol,
.message-pack-symbol {
  width: 50px;
  height: 50px;
  flex-basis: 50px;
  color: #fff;
  background: #25d366;
  box-shadow: 0 9px 19px rgba(37,211,102,.23);
}
.message-pack-audience {
  display: inline-flex !important;
  width: fit-content;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid #d9cafa;
  border-radius: 999px;
  color: #6847b5 !important;
  background: #f2edff;
  font-size: 12px !important;
  font-weight: 850;
  line-height: 1.25;
}
.message-pack-audience .app-icon { width: 16px; height: 16px; }
.message-pack-price {
  gap: 12px !important;
  padding-top: 19px !important;
  border-color: #e4e6ee !important;
}
.message-pack-price > div {
  min-height: 93px;
  padding: 15px 16px;
  border: 1px solid #e1e4ec;
  border-radius: 14px;
  background: #f7f8fb;
}
.message-pack-total { border-color: #e1e4ec; background: #f7f8fb; }
.message-pack-monthly {
  border-color: #d8c9f8;
  background: #f3effd;
}
.message-pack-monthly small { color: #7459ad; }
.message-pack-monthly strong { color: #5d3ca8; }
.message-pack-price > button[data-buy-catalog],
.message-pack-card.is-recommended .message-pack-price > button[data-buy-catalog] {
  min-height: 53px;
  border-radius: 14px;
  color: #fff;
  background: #009ee3;
  box-shadow: 0 10px 21px rgba(0,158,227,.24);
  font-size: 13px;
}
.message-pack-price > button[data-buy-catalog]:hover { background: #008dcc; }
.message-pack-price > button[data-buy-catalog] .mercado-pago-icon {
  width: 30px;
  height: 23px;
  flex: 0 0 30px;
}
.message-pack-validity {
  gap: 8px;
  margin-top: -5px;
  font-size: 12px;
}
.message-pack-validity .app-icon { color: #7d57dc; }
.message-pack-card.is-custom {
  gap: 28px;
  padding: 27px;
  border-color: #ded7ef;
  background: #fcfbff;
}
.message-pack-card.is-custom .message-pack-price {
  padding-left: 24px !important;
  border-left-color: #ddd7eb;
}
.message-pack-card.is-custom .message-pack-price > div { min-height: 86px; }

@media (max-width: 1100px) {
  .message-pack-card.is-custom { grid-template-columns: 1fr; }
  .message-pack-card.is-custom .message-pack-price {
    padding: 19px 0 0 !important;
    border-top: 1px solid #e4e6ee !important;
    border-left: 0 !important;
  }
}

.message-pack-intro {
  grid-template-columns: minmax(0,1fr) minmax(300px,auto);
  align-items: center;
  column-gap: 28px;
}
.message-pack-intro > .message-pack-intro-tags { display: contents; }
.message-pack-intro-tags > strong {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}
.message-pack-intro-tags > b {
  grid-column: 2;
  grid-row: 1/3;
  max-width: 450px;
  align-self: center;
  justify-self: center;
  padding: 12px 18px;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
}
.message-pack-intro > p {
  grid-column: 1;
  grid-row: 2;
}
.message-pack-forever {
  align-content: center !important;
  justify-items: start;
  gap: 5px !important;
}
.message-pack-forever strong {
  color: #6040ad;
  font-size: 15px !important;
  line-height: 1.2;
}
.message-pack-forever > span {
  color: #716589;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.3;
}

@media (max-width: 760px) {
  .message-pack-intro { grid-template-columns: 1fr; gap: 12px; }
  .message-pack-intro > .message-pack-intro-tags {
    display: flex;
    align-items: stretch;
    flex-direction: column;
  }
  .message-pack-intro-tags > strong,
  .message-pack-intro-tags > b,
  .message-pack-intro > p {
    grid-column: auto;
    grid-row: auto;
    max-width: none;
    align-self: stretch;
    justify-self: stretch;
  }
  .message-pack-intro-tags > strong,
  .message-pack-intro-tags > b { justify-content: center; }
}

.message-pack-card > em { display: none; }
.message-pack-card.is-recommended > header { padding-right: 0; }
.message-pack-audience {
  max-width: 100%;
  padding: 7px 12px;
  border-radius: 10px;
  white-space: nowrap;
}
.message-custom-controls input {
  padding-block: 0 !important;
  line-height: normal !important;
}

.message-custom-benefits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.message-custom-unit-price {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid #c8ddf7;
  border-radius: 999px;
  color: #144f91;
  background: #eaf4ff;
}
.message-custom-unit-price small {
  color: #49739f !important;
  font-size: 9px !important;
  font-weight: 900;
  letter-spacing: .05em;
}
.message-custom-unit-price strong { color: #104c8e; font-size: 14px !important; }
.message-custom-controls input[type="text"] {
  display: block;
  height: 54px;
  padding: 0 !important;
  font-size: 20px;
  line-height: normal !important;
  text-align: center !important;
  text-indent: 0;
}
.message-pack-price > button[data-buy-catalog] .mercado-pago-icon {
  box-sizing: border-box;
  width: 46px !important;
  height: 32px !important;
  flex: 0 0 46px;
  padding: 5px 7px;
  border-radius: 9px;
  color: #0a0080;
  background: #fff;
}

/* Recordatorios: el saldo informa; la compra queda como la siguiente acción clara. */
.account-reminders-balance {
  grid-template-columns: minmax(260px,.82fr) minmax(420px,1.18fr);
  grid-template-areas:
    'heading metrics'
    'purchase purchase';
  gap: 18px 22px;
  padding: 20px;
}
.account-reminders-balance-heading { grid-area: heading; }
.account-reminders-balance dl {
  grid-area: metrics;
  justify-content: end;
}
.account-reminders-balance > button {
  display: grid;
  grid-area: purchase;
  grid-template-columns: minmax(0,1fr) auto;
  min-height: 74px;
  align-items: center;
  gap: 18px;
  padding: 13px 18px 13px 22px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(110deg,#075ecf 0%,#147df0 54%,#009ee3 100%);
  box-shadow: 0 13px 26px rgba(0,112,222,.26);
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.account-reminders-balance > button:hover:not(:disabled),
.account-reminders-balance > button:focus-visible:not(:disabled) {
  filter: brightness(1.05);
  box-shadow: 0 16px 31px rgba(0,112,222,.32);
  transform: translateY(-2px);
  outline: 0;
}
.account-reminders-balance > button > span { display: grid; gap: 3px; min-width: 0; }
.account-reminders-balance > button small,
.account-reminders-balance > button b,
.account-reminders-balance > button em { margin: 0; color: inherit; }
.account-reminders-balance > button small { font-size: 10px; font-weight: 900; letter-spacing: .1em; opacity: .82; }
.account-reminders-balance > button b { display: inline-flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 950; letter-spacing: .02em; }
.account-reminders-balance > button b .app-icon { width: 21px; height: 21px; }
.account-reminders-balance > button em { overflow: hidden; font-size: 12px; font-style: normal; font-weight: 700; opacity: .86; text-overflow: ellipsis; white-space: nowrap; }
.account-reminders-balance > button .account-reminders-balance-arrow { width: 25px; height: 25px; }
.account-reminders-balance > button:disabled { border-color: #e0e6e4; color: #96a39f; background: #e9efed; box-shadow: none; transform: none; }

/* Casillas de momentos: controles propios, grandes y legibles para cada canal. */
.account-reminder-options label { align-items: center; gap: 12px; }
.account-reminder-options .account-reminder-check {
  position: relative;
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border: 2px solid #9db6d4;
  border-radius: 8px;
  color: transparent;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(38,66,102,.06);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.account-reminder-check > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  opacity: 0;
  pointer-events: none;
}
.account-reminder-check .app-icon { width: 17px !important; height: 17px !important; color: currentColor !important; stroke-width: 3px; transition: transform .18s ease; transform: scale(.72); }
.account-reminder-check:has(input:checked) { color: #fff; border-color: #2278ff; background: #2278ff; box-shadow: 0 5px 12px rgba(34,120,255,.25); }
.account-reminder-check:has(input:checked) .app-icon { transform: scale(1); }
.account-reminder-channel.is-whatsapp .account-reminder-check { border-color: #8cccae; }
.account-reminder-channel.is-whatsapp .account-reminder-check:has(input:checked) { border-color: #25d366; background: #25d366; box-shadow: 0 5px 12px rgba(37,211,102,.25); }
.account-reminder-check:has(input:focus-visible) { outline: 3px solid rgba(34,120,255,.28); outline-offset: 3px; }
.account-reminder-channel.is-whatsapp .account-reminder-check:has(input:focus-visible) { outline-color: rgba(37,211,102,.3); }
.account-reminder-options label:has(input:checked:not(:disabled)) { border-color: #a8c9fb; background: #f4f8ff; box-shadow: 0 0 0 2px rgba(34,120,255,.07); }
.account-reminder-channel.is-whatsapp .account-reminder-options label:has(input:checked:not(:disabled)) { border-color: #a4e1c0; background: #f1fcf6; box-shadow: 0 0 0 2px rgba(37,211,102,.07); }
.account-reminder-options label:has(input:disabled) .account-reminder-check { border-color: #d7dfdc; color: transparent; background: #eef2f0; box-shadow: none; }

@media (max-width: 920px) {
  .account-reminders-balance {
    grid-template-columns: 1fr;
    grid-template-areas: 'heading' 'metrics' 'purchase';
  }
  .account-reminders-balance dl { justify-content: stretch; }
  .account-reminders-balance > button { min-height: 70px; }
}

/* Pack personalizado: reglas discretas; precio final primero. */
.message-pack-card.is-custom > header > div { width: 100%; }
.message-pack-card.is-custom .message-pack-symbol { color: #fff; background: #7657d9; }
.message-pack-card.is-custom .message-pack-no-expiry {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  margin-top: 5px;
  padding: 7px 10px;
  color: #6040ad;
  background: #f0ebff;
  box-shadow: none;
}
.message-custom-rules {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  margin: 1px 0 0;
  color: #6e5d91;
  font-size: 12px;
  font-weight: 750;
  text-align: center;
}
.message-custom-rules > span {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.message-pack-card .message-custom-rules strong { color: #5237a0; font-size: inherit !important; white-space: nowrap; }
.message-pack-card.is-custom .message-pack-total {
  border-color: #b9d9fb;
  background: linear-gradient(135deg,#eef7ff,#e8f2ff);
  box-shadow: 0 8px 16px rgba(32,120,226,.09);
}
.message-pack-card.is-custom .message-pack-total small { color: #2169b1; }
.message-pack-card.is-custom .message-pack-total > strong { color: #073d86; font-size: 29px !important; }
.message-pack-card.is-custom .message-custom-unit-price {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #5277a0;
  background: transparent;
  font-size: 11px;
  font-weight: 800;
}
.message-pack-card.is-custom .message-custom-unit-price b { color: #155ca8; font-size: inherit; font-weight: 950; }
.message-pack-card.is-custom .message-pack-forever {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 12px 2px 0;
  border: 0;
  border-top: 1px solid #e0d9ee;
  border-radius: 0;
  color: #766a8d;
  background: transparent;
}
.message-pack-card.is-custom .message-pack-forever > .app-icon { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; color: #826bc0; }
.message-pack-card.is-custom .message-pack-forever > span { display: grid; gap: 2px; }
.message-pack-card.is-custom .message-pack-forever b { color: #5f5276; font-size: 11px !important; font-weight: 900; }
.message-pack-card.is-custom .message-pack-forever small { color: #7d748a; font-size: 11px; line-height: 1.35; }
.message-pack-intro > p { align-items: center; font-size: 17px; }
.message-pack-intro p > .app-icon { align-self: center; }
.message-pack-intro > p b { color: #fff; font-weight: 950; }

@media (max-width: 640px) {
  .message-custom-rules { align-items: center; flex-direction: column; gap: 3px; }
}

/* Ajustes ópticos: la marca se construye centrada en el propio control. */
.account-reminder-check .app-icon { display: none; }
.account-reminder-check::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 6px;
  border-bottom: 3px solid currentColor;
  border-left: 3px solid currentColor;
  content: '';
  opacity: 0;
  transform: translate(-50%,-60%) rotate(-45deg);
  transform-origin: center;
  transition: opacity .16s ease, transform .16s ease;
}
.account-reminder-check:has(input:checked)::after { opacity: 1; transform: translate(-50%,-60%) rotate(-45deg); }

/* Las reglas del selector acompañan, sin competir con el importe final. */
.message-custom-rules {
  display: flex;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  justify-self: center;
  gap: 0;
  margin: 2px auto 0;
  padding: 8px 12px;
  border: 1px solid #e3ddeb;
  border-radius: 11px;
  color: #85808e;
  background: #faf9fc;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.25;
}
.message-custom-rules > span { color: inherit; }
.message-custom-rules > span + span { margin-left: 11px; padding-left: 11px; border-left: 1px solid #ded8e8; }
.message-pack-card .message-custom-rules strong { color: #62606a; font-size: inherit !important; }
.message-pack-card.is-custom .message-pack-no-expiry {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 6px 9px;
  font-size: 9px;
}
.message-pack-card.is-custom .message-pack-no-expiry .app-icon { width: 14px; height: 14px; }
.message-pack-card.is-custom .message-custom-positioning { margin: 1px 0 0; color: #776f84; font-size: 11px; font-weight: 700; line-height: 1.35; }

@media (max-width: 640px) {
  .message-custom-rules { align-items: center; flex-direction: column; gap: 5px; }
  .message-custom-rules > span + span { margin-left: 0; padding-left: 0; border-top: 1px solid #ded8e8; border-left: 0; padding-top: 5px; }
}

/* Guía comercial: diferencia explícita entre packs fijos y personalizado. */
.message-pack-intro {
  grid-template-columns: minmax(0,1.1fr) minmax(340px,.9fr);
  gap: 20px 26px;
}
.message-pack-intro-copy { display: grid !important; align-content: center; gap: 10px; }
.message-pack-intro-copy > strong {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 999px;
  color: #fff;
  background: #1dbd62;
  box-shadow: 0 7px 16px rgba(29,189,98,.22);
  font-size: 12px;
  font-weight: 950;
}
.message-pack-intro-copy > strong .app-icon { width: 18px; height: 18px; }
.message-pack-intro-copy > p { display: flex; align-items: center; gap: 10px; margin: 0; color: rgba(255,255,255,.91); font-size: 15px; line-height: 1.45; }
.message-pack-intro-copy > p > .app-icon { width: 19px; height: 19px; flex: 0 0 19px; color: #75eab0; }
.message-pack-price-guide { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.message-pack-price-guide > span { display: grid; align-content: center; gap: 4px; min-width: 0; padding: 11px 13px; border: 1px solid rgba(174,211,255,.42); border-radius: 13px; background: rgba(255,255,255,.1); }
.message-pack-price-guide > span.is-custom { border-color: rgba(112,239,171,.48); background: rgba(31,174,102,.16); }
.message-pack-price-guide small { color: #d4e6ff; font-size: 9px; font-weight: 900; letter-spacing: .06em; line-height: 1.25; }
.message-pack-price-guide .is-custom small { color: #9cf1c2; }
.message-pack-price-guide em { color: rgba(255,255,255,.78); font-size: 12px; font-style: normal; font-weight: 750; line-height: 1.2; }
.message-pack-price-guide .is-custom em { color: #c3f8d8; }
.message-pack-price-guide b { color: #fff; font-size: 16px; font-weight: 950; line-height: 1.2; }

/* Desde Packs se vuelve directamente a la configuración que lo originó. */
.message-pack-dialog > article > header > .message-pack-header-actions { display: flex; align-items: center; gap: 8px; }
.message-pack-dialog > article > header .message-pack-header-actions > button { min-height: 38px; border: 1px solid #dbe4ed; border-radius: 10px; color: #496177; background: #fff; font: inherit; font-size: 10px; font-weight: 900; letter-spacing: .02em; cursor: pointer; }
.message-pack-dialog > article > header .message-pack-header-actions > #backToAccountReminders { display: inline-flex; width: auto; align-items: center; gap: 6px; padding: 0 12px; color: #137f4b; border-color: #bfe7cf; background: #f2fcf6; }
.message-pack-dialog > article > header .message-pack-header-actions > #backToAccountReminders .app-icon { width: 16px; height: 16px; }
.message-pack-dialog > article > header .message-pack-header-actions > #closeMessagePacksTop { display: grid; width: 38px; height: 38px; place-items: center; padding: 0; }
@media (max-width: 640px) {
  .message-pack-dialog > article > header .message-pack-header-actions > #backToAccountReminders { width: 38px; padding: 0; justify-content: center; font-size: 0; }
}

/* El personalizado es WhatsApp: verde, saldo flexible y total de compra vivo. */
.message-pack-card.is-custom { border-color: #c6ead6; background: #fcfffd; }
.message-pack-card.is-custom .message-pack-symbol { color: #fff; background: #25d366; box-shadow: 0 9px 19px rgba(37,211,102,.24); }
.message-pack-card.is-custom .message-pack-no-expiry { color: #16894d; background: #e8faef; }
.message-pack-card.is-custom .message-custom-positioning { color: #5d7868; }
.message-pack-card.is-custom .message-custom-controls button { border-color: #9bdbb7; color: #139452; }
.message-pack-card.is-custom .message-pack-total {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg,#078745,#27ca70);
  box-shadow: 0 13px 24px rgba(23,178,91,.24);
}
.message-pack-card.is-custom .message-pack-total small,
.message-pack-card.is-custom .message-pack-total > strong,
.message-pack-card.is-custom .message-custom-unit-price,
.message-pack-card.is-custom .message-custom-unit-price b { color: #fff; }
.message-pack-card.is-custom .message-custom-unit-price { opacity: .88; }
.message-pack-card.is-custom .message-pack-forever { border-top-color: #d9ebdf; }
.message-pack-card.is-custom .message-pack-forever > .app-icon { color: #1aa35b; }
.message-pack-card.is-custom .message-pack-forever b { color: #416756; }
.message-pack-card.is-custom .message-pack-forever small { color: #6b8375; }

@media (max-width: 760px) {
  .message-pack-intro { grid-template-columns: 1fr; }
  .message-pack-price-guide { grid-template-columns: 1fr; }
}

/* Datos: lectura administrativa del consultorio */
.data-view { color: #17223b; }
.data-status { max-width: 760px; margin: 80px auto; padding: 28px; border: 1px solid #dce3f0; border-radius: 20px; color: #64748b; background: #fff; text-align: center; font-weight: 750; box-shadow: 0 18px 45px rgba(36,48,88,.08); }
.data-workbench { display: grid; grid-template-columns: 270px minmax(0,1fr); gap: 22px; align-items: start; }
.data-sidebar { position: sticky; top: 86px; overflow: hidden; border: 1px solid #dde3ef; border-radius: 24px; background: #fff; box-shadow: 0 18px 45px rgba(35,45,86,.08); }
.data-sidebar > header { display: flex; align-items: center; gap: 13px; padding: 22px 20px; color: #fff; background: radial-gradient(circle at 0 0,rgba(120,112,255,.72),transparent 48%),linear-gradient(145deg,#352fc4,#17145e); }
.data-sidebar > header > span { display: grid; width: 45px; height: 45px; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.25); border-radius: 14px; background: rgba(255,255,255,.13); }
.data-sidebar > header .app-icon { width: 23px; height: 23px; }
.data-sidebar > header small,.data-sidebar > header strong { display: block; }
.data-sidebar > header small { margin-bottom: 3px; color: #c9c7ff; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.data-sidebar > header strong { font-size: 14px; line-height: 1.25; }
.data-sidebar nav { display: grid; gap: 6px; padding: 13px; }
.data-sidebar nav button { display: grid; grid-template-columns: 38px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 11px; width: 100%; padding: 10px; border: 0; border-radius: 13px; color: #58647c; background: transparent; text-align: left; transition: .18s ease; }
.data-sidebar nav button > span { display: grid; grid-row: 1/3; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: #6366dc; background: #f0f1ff; }
.data-sidebar nav button .app-icon { width: 18px; height: 18px; }
.data-sidebar nav button b { align-self: end; color: #2b354d; font-size: 12px; }
.data-sidebar nav button small { margin-top: 2px; font-size: 9px; }
.data-sidebar nav button:hover,.data-sidebar nav button.is-active { color: #5a54c9; background: #f2f3ff; }
.data-sidebar nav button.is-active { box-shadow: inset 3px 0 #4e48d9; }
.data-sidebar > aside { display: flex; gap: 10px; margin: 5px 13px 14px; padding: 13px; border-radius: 14px; color: #436253; background: #edf9f3; }
.data-sidebar > aside .app-icon { width: 19px; height: 19px; flex: 0 0 auto; color: #1b9865; }
.data-sidebar > aside p { margin: 0; }
.data-sidebar > aside strong,.data-sidebar > aside span { display: block; }
.data-sidebar > aside strong { font-size: 10px; }
.data-sidebar > aside span { margin-top: 3px; font-size: 9px; line-height: 1.45; }
.data-content { min-width: 0; }
.data-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 10px 4px 18px; scroll-margin-top: 90px; }
.data-heading p,.data-chart-card header p,.data-secondary-grid header p,.data-integrity-card header p { margin: 0 0 5px; color: #514bd3; font-size: 10px; font-weight: 950; letter-spacing: .13em; }
.data-heading h1 { margin: 0; color: #17213b; font-size: clamp(28px,3vw,43px); line-height: 1.04; letter-spacing: -.045em; }
.data-heading > div > span { display: block; margin-top: 9px; color: #69748a; font-size: 13px; }
.data-readonly-badge { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 9px 12px; border: 1px solid #bfe5d3; border-radius: 999px; color: #177b55; background: #f0fbf6; font-size: 9px; font-weight: 950; letter-spacing: .08em; }
.data-readonly-badge .app-icon { width: 15px; height: 15px; }
.data-period-panel { padding: 15px 17px; border: 1px solid #dce3ef; border-radius: 19px; background: #fff; box-shadow: 0 10px 28px rgba(30,42,81,.055); }
.data-presets { display: flex; gap: 7px; flex-wrap: wrap; }
.data-presets button { padding: 9px 13px; border: 1px solid #dce2ee; border-radius: 10px; color: #59657c; background: #f9fafc; font-size: 11px; font-weight: 800; }
.data-presets button:hover,.data-presets button.is-active { border-color: #4b45d3; color: #fff; background: #4b45d3; box-shadow: 0 7px 16px rgba(75,69,211,.22); }
.data-filters { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-top: 13px; }
.data-filters label { display: grid; gap: 5px; color: #647087; font-size: 9px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.data-filters select,.data-filters input { min-height: 38px; padding: 7px 11px; border: 1px solid #d5dce9; border-radius: 9px; color: #24304a; background: #fff; font-size: 11px; font-weight: 700; }
.data-custom-dates { display: flex; align-items: end; gap: 8px; margin-left: auto; }
.data-custom-dates button { min-height: 38px; padding: 8px 14px; border: 0; border-radius: 9px; color: #fff; background: #29249f; font-size: 11px; font-weight: 900; }
.data-period-panel > p { display: flex; gap: 8px; align-items: center; margin: 13px 0 0; padding-top: 12px; border-top: 1px solid #edf0f5; color: #7a8497; font-size: 10px; text-transform: capitalize; }
.data-period-panel > p .app-icon { width: 15px; height: 15px; color: #554fd2; }
.data-period-panel > p strong { color: #2b354d; }
.data-period-panel > p span { margin-left: auto; }
.data-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-top: 14px; }
.data-metrics article { position: relative; display: flex; min-height: 126px; gap: 12px; overflow: hidden; padding: 18px; border: 1px solid #e0e5ef; border-radius: 18px; background: #fff; box-shadow: 0 11px 28px rgba(35,46,83,.055); }
.data-metrics article::after { position: absolute; inset: auto -25px -33px auto; width: 90px; height: 90px; border-radius: 50%; background: currentColor; content: ''; opacity: .045; }
.data-metrics article > span { display: grid; width: 39px; height: 39px; place-items: center; flex: 0 0 auto; border-radius: 12px; }
.data-metrics .app-icon { width: 19px; height: 19px; }
.data-metrics article small { display: block; color: #778196; font-size: 8px; font-weight: 950; letter-spacing: .08em; }
.data-metrics article strong { display: block; margin-top: 8px; color: #17213b; font-size: clamp(18px,1.65vw,25px); letter-spacing: -.04em; white-space: nowrap; }
.data-metrics article p { margin: 7px 0 0; color: #7d8799; font-size: 9px; line-height: 1.4; }
.data-metrics .is-income { color: #0f9c68; }.data-metrics .is-income > span { background: #e8f8f1; }
.data-metrics .is-outflow { color: #e36e63; }.data-metrics .is-outflow > span { background: #fff0ed; }
.data-metrics .is-net { color: #4d49d6; }.data-metrics .is-net > span { background: #efefff; }
.data-metrics .is-balance { color: #d48b1e; }.data-metrics .is-balance > span { background: #fff6e5; }
.data-chart-card,.data-coverage-card,.data-activity-card,.data-integrity-card { scroll-margin-top: 88px; margin-top: 14px; border: 1px solid #dde3ee; border-radius: 20px; background: #fff; box-shadow: 0 12px 32px rgba(34,45,82,.06); }
.data-chart-card > header,.data-secondary-grid > section > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 19px 20px 14px; }
.data-chart-card h2,.data-secondary-grid h2,.data-integrity-card h2 { margin: 0; color: #202a43; font-size: 19px; letter-spacing: -.025em; }
.data-chart-card header > div > span { display: block; margin-top: 5px; color: #7a8497; font-size: 10px; }
.data-chart-legend { display: flex; gap: 13px; color: #677287; font-size: 9px; font-weight: 800; }
.data-chart-legend span { display: flex; align-items: center; gap: 6px; }.data-chart-legend i { width: 9px; height: 9px; border-radius: 50%; }.data-chart-legend .is-income { background: #30b881; }.data-chart-legend .is-outflow { background: #f07d71; }
.data-chart { height: 285px; padding: 3px 15px 4px 3px; }
.data-chart svg { width: 100%; height: 100%; overflow: visible; }
.data-chart-grid { stroke: #e8ecf3; stroke-width: 1; stroke-dasharray: 4 5; }.data-chart-y,.data-chart-x { fill: #8b94a5; font-family: inherit; font-size: 9px; }.data-chart-y { text-anchor: end; }.data-chart-x { text-anchor: middle; }
.data-chart-income,.data-chart-outflow { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }.data-chart-income { stroke: #24a977; }.data-chart-outflow { stroke: #ec756b; }.data-chart-income-point { fill: #fff; stroke: #24a977; stroke-width: 2; vector-effect: non-scaling-stroke; }.data-chart-outflow-point { fill: #fff; stroke: #ec756b; stroke-width: 2; vector-effect: non-scaling-stroke; }
.data-chart-card > footer { display: flex; gap: 20px; flex-wrap: wrap; padding: 13px 20px; border-top: 1px solid #edf0f5; color: #778195; font-size: 9px; }.data-chart-card > footer b { color: #303b53; }
.data-empty,.data-inline-empty { color: #7b8598; text-align: center; font-size: 11px; }.data-empty { margin: 40px 20px 75px; }
.data-secondary-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 14px; }
.data-source-tag { padding: 6px 8px; border-radius: 7px; color: #6761d8; background: #f0f0ff; font-size: 8px; font-weight: 950; letter-spacing: .08em; }
.data-coverage-visual { display: grid; grid-template-columns: 135px 1fr; gap: 18px; align-items: center; padding: 3px 20px 15px; }
.data-donut { --coverage-share:0deg; display: grid; width: 126px; height: 126px; place-items: center; border-radius: 50%; background: conic-gradient(#5d57dd 0 var(--coverage-share),#37bc88 var(--coverage-share) 360deg); }
.data-donut::before { grid-area: 1/1; width: 88px; height: 88px; border-radius: 50%; background: #fff; content: ''; }.data-donut span { z-index: 1; grid-area: 1/1; text-align: center; }.data-donut b,.data-donut small { display: block; }.data-donut b { font-size: 24px; }.data-donut small { color: #7a8496; font-size: 8px; }
.data-coverage-visual dl { display: grid; gap: 12px; margin: 0; }.data-coverage-visual dl div { padding-bottom: 10px; border-bottom: 1px solid #eef1f5; }.data-coverage-visual dt { color: #758095; font-size: 9px; }.data-coverage-visual dd { margin: 4px 0 0; color: #29344d; font-size: 16px; font-weight: 900; }
.data-coverage-list { display: grid; gap: 10px; padding: 0 20px 17px; }.data-coverage-list article p { display: flex; justify-content: space-between; margin: 0 0 5px; color: #556178; font-size: 9px; }.data-coverage-list article p b { color: #2d3850; }.data-coverage-list article > i { display: block; height: 5px; overflow: hidden; border-radius: 99px; background: #eef1f6; }.data-coverage-list article > i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#4b46d1,#7e79ed); }.data-coverage-list article small { display: block; margin-top: 4px; color: #9199a8; font-size: 8px; }
.data-coverage-card > aside { display: flex; gap: 10px; margin: 0 15px 15px; padding: 12px; border: 1px solid #f3d9a6; border-radius: 13px; color: #775822; background: #fff8e9; }.data-coverage-card > aside .app-icon { width: 19px; height: 19px; flex: 0 0 auto; }.data-coverage-card > aside p { margin: 0; }.data-coverage-card > aside strong,.data-coverage-card > aside span { display: block; }.data-coverage-card > aside strong { font-size: 10px; }.data-coverage-card > aside span { margin-top: 3px; font-size: 9px; line-height: 1.45; }
.data-activity-totals { display: flex; align-items: baseline; gap: 8px; padding: 3px 20px 14px; }.data-activity-totals strong { color: #4f49d1; font-size: 38px; letter-spacing: -.05em; }.data-activity-totals span { color: #788296; font-size: 10px; }
.data-activity-bars { display: grid; gap: 11px; padding: 0 20px 17px; }.data-activity-bars p { display: flex; justify-content: space-between; margin: 0 0 5px; color: #606b80; font-size: 9px; }.data-activity-bars > div > i { display: block; height: 7px; overflow: hidden; border-radius: 99px; background: #eef1f6; }.data-activity-bars > div > i b { display: block; width: 0; height: 100%; border-radius: inherit; background: #31b47f; transition: width .35s ease; }.data-activity-bars > div:nth-child(2) > i b { background: #e1a646; }.data-activity-bars > div:nth-child(3) > i b { background: #ec766b; }.data-activity-bars > div:nth-child(4) > i b { background: #9aa4b7; }
.data-professional-list { margin: 0 15px 15px; border-top: 1px solid #edf0f5; }.data-professional-list h3 { margin: 13px 5px 8px; color: #333e55; font-size: 10px; }.data-professional-list article { display: flex; justify-content: space-between; gap: 10px; padding: 8px 5px; border-top: 1px solid #f1f3f7; }.data-professional-list article p { margin: 0; }.data-professional-list article strong,.data-professional-list article span { display: block; }.data-professional-list article strong { color: #333e54; font-size: 9px; }.data-professional-list article span { margin-top: 3px; color: #848d9e; font-size: 8px; }.data-professional-list article > b { color: #514bd0; font-size: 10px; }
.data-integrity-card { padding: 18px 20px; }.data-integrity-card > header { display: flex; align-items: center; gap: 13px; }.data-integrity-card > header > span { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 13px; color: #16865c; background: #e8f8f1; }.data-integrity-card > header .app-icon { width: 21px; height: 21px; }
.data-integrity-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 15px; }.data-integrity-grid article { padding: 14px; border: 1px solid #e4e8f0; border-radius: 13px; background: #fafbfc; }.data-integrity-grid article > b { color: #707a8e; font-size: 8px; letter-spacing: .08em; }.data-integrity-grid article strong { display: block; margin-top: 5px; color: #2c374f; font-size: 11px; }.data-integrity-grid article p { margin: 6px 0 0; color: #7a8496; font-size: 9px; line-height: 1.5; }.data-integrity-grid .is-safe { border-color: #cfe9db; background: #f2fbf6; }.data-integrity-grid .is-review { border-color: #f0d8a8; background: #fff9ed; }
.data-integrity-warning { margin: 11px 0 0; padding: 11px; border-radius: 10px; color: #9b3945; background: #fff0f1; font-size: 9px; font-weight: 800; }

.data-coverage-workflow { overflow: hidden; }
.data-coverage-workflow > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 21px 22px 17px; }
.data-coverage-workflow > header p { margin: 0 0 5px; color: #514bd3; font-size: 10px; font-weight: 950; letter-spacing: .13em; }
.data-coverage-workflow > header h2 { margin: 0; color: #202a43; font-size: 21px; letter-spacing: -.025em; }
.data-coverage-workflow > header > div:first-child > span { display: block; max-width: 620px; margin-top: 5px; color: #7a8497; font-size: 10px; }
.coverage-workflow-actions { display: flex; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.coverage-workflow-actions button,.coverage-queue-panel > header button { display: inline-flex; min-height: 36px; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid #d8deeb; border-radius: 10px; color: #414a61; background: #fff; font-size: 9px; font-weight: 900; }
.coverage-workflow-actions button:first-child,.coverage-queue-panel > header button { border-color: #413bc2; color: #fff; background: #413bc2; box-shadow: 0 7px 16px rgba(65,59,194,.18); }
.coverage-workflow-actions button:disabled,.coverage-queue-panel > header button:disabled { cursor: default; opacity: .5; box-shadow: none; }
.coverage-workflow-actions .app-icon { width: 15px; height: 15px; }
.coverage-stage-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; margin: 0 22px; overflow: hidden; border: 1px solid #e1e5ee; border-radius: 16px; background: #e1e5ee; }
.coverage-stage-strip article { display: flex; min-height: 106px; align-items: center; gap: 11px; padding: 16px; background: #fbfcfe; }
.coverage-stage-strip article > span { display: grid; width: 31px; height: 31px; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #6b7280; background: #eef1f6; font-size: 10px; font-weight: 950; }
.coverage-stage-strip p { margin: 0; }.coverage-stage-strip small,.coverage-stage-strip strong,.coverage-stage-strip b { display: block; }
.coverage-stage-strip small { color: #7b8497; font-size: 7px; font-weight: 950; letter-spacing: .08em; }
.coverage-stage-strip strong { margin-top: 6px; color: #263149; font-size: 16px; letter-spacing: -.025em; }
.coverage-stage-strip b { margin-top: 3px; color: #8a93a3; font-size: 8px; }
.coverage-stage-strip .is-ready > span { color: #514bd0; background: #eeedff; }.coverage-stage-strip .is-submitted > span { color: #b27712; background: #fff4d8; }.coverage-stage-strip .is-approved > span { color: #157aa3; background: #e8f7fd; }.coverage-stage-strip .is-paid > span { color: #16825a; background: #e7f8ef; }
.coverage-workflow-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr); gap: 15px; padding: 17px 22px 22px; }
.coverage-queue-panel,.coverage-cycle-panel > section { overflow: hidden; border: 1px solid #e2e6ee; border-radius: 15px; background: #fbfcfe; }
.coverage-queue-panel > header,.coverage-cycle-panel section > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 15px; border-bottom: 1px solid #e9ecf2; background: #fff; }
.coverage-queue-panel h3,.coverage-cycle-panel h3 { margin: 0; color: #2b354c; font-size: 11px; }.coverage-queue-panel header p { margin: 3px 0 0; color: #8991a0; font-size: 8px; }
.coverage-cycle-panel { display: grid; align-content: start; gap: 12px; }.coverage-cycle-panel section > header span { display: grid; min-width: 24px; height: 24px; place-items: center; border-radius: 99px; color: #5852cb; background: #efefff; font-size: 9px; font-weight: 900; }
.coverage-operational-list { max-height: 470px; overflow-y: auto; }
.coverage-operation-row { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; gap: 9px; align-items: center; padding: 12px 14px; border-top: 1px solid #edf0f4; background: #fff; }
.coverage-operation-row:first-child { border-top: 0; }.coverage-operation-check { display: grid; place-items: center; }.coverage-operation-check input { width: 16px; height: 16px; accent-color: #4943cf; }
.coverage-operation-row p { display: flex; justify-content: space-between; gap: 10px; margin: 0; }.coverage-operation-row strong { overflow: hidden; color: #303b52; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.coverage-operation-row p b { color: #2e3950; font-size: 9px; white-space: nowrap; }
.coverage-operation-row div > span { display: block; margin-top: 4px; color: #8a93a3; font-size: 8px; }.coverage-operation-row > em { padding: 5px 7px; border-radius: 99px; color: #625ccf; background: #f0efff; font-size: 7px; font-style: normal; font-weight: 950; white-space: nowrap; }
.coverage-operation-row.is-submitted > em,.coverage-operation-row.is-drafted > em { color: #9b6b19; background: #fff5df; }.coverage-operation-row.is-to_collect > em { color: #147699; background: #e9f8fd; }.coverage-operation-row.is-paid > em { color: #157b56; background: #e8f8ef; }.coverage-operation-row.is-closed_no_payment > em { color: #7b8494; background: #eef1f5; }
.coverage-cycle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-top: 1px solid #edf0f4; background: #fff; }.coverage-cycle-row:first-child { border-top: 0; }
.coverage-cycle-row div { min-width: 0; flex: 1; }.coverage-cycle-row p { display: flex; justify-content: space-between; gap: 9px; margin: 0; }.coverage-cycle-row strong,.coverage-cycle-row p b { color: #303b52; font-size: 8px; }.coverage-cycle-row div > span { display: block; overflow: hidden; margin-top: 4px; color: #8891a1; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.coverage-cycle-row > button { flex: 0 0 auto; padding: 6px 8px; border: 1px solid #d9deea; border-radius: 8px; color: #4f49c4; background: #f5f4ff; font-size: 7px; font-weight: 900; }
.coverage-legacy-details { border-top: 1px solid #e9edf3; background: #fafbfc; }.coverage-legacy-details summary { padding: 13px 22px; color: #687287; font-size: 9px; font-weight: 850; cursor: pointer; }.coverage-legacy-details > aside { display: flex; gap: 10px; margin: 0 15px 15px; padding: 12px; border: 1px solid #f3d9a6; border-radius: 13px; color: #775822; background: #fff8e9; }.coverage-legacy-details > aside .app-icon { width: 19px; height: 19px; }.coverage-legacy-details > aside p { margin: 0; }.coverage-legacy-details > aside strong,.coverage-legacy-details > aside span { display: block; }.coverage-legacy-details > aside strong { font-size: 10px; }.coverage-legacy-details > aside span { margin-top: 3px; font-size: 9px; }
.data-activity-single { grid-template-columns: 1fr; }
.coverage-dialog { width: min(720px,calc(100vw - 28px)); max-height: calc(100vh - 30px); overflow: auto; padding: 0; border: 0; border-radius: 20px; color: #253047; background: #fff; box-shadow: 0 30px 90px rgba(20,27,57,.3); }.coverage-wide-dialog { width: min(900px,calc(100vw - 28px)); }.coverage-dialog::backdrop { background: rgba(18,25,49,.58); backdrop-filter: blur(4px); }
.coverage-dialog form > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 20px 22px 15px; border-bottom: 1px solid #eaedf3; }.coverage-dialog header small { color: #5a54ce; font-size: 8px; font-weight: 950; letter-spacing: .11em; }.coverage-dialog header h2 { margin: 4px 0 0; font-size: 20px; letter-spacing: -.03em; }.coverage-dialog header > button { width: 34px; height: 34px; border: 0; border-radius: 10px; color: #677186; background: #f1f3f7; font-size: 21px; }
.coverage-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; padding: 18px 22px; }.coverage-form-grid label { display: grid; gap: 6px; }.coverage-form-grid label.is-wide { grid-column: 1/-1; }.coverage-form-grid label > span,.coverage-allocation-lines label > span { color: #626d82; font-size: 8px; font-weight: 900; text-transform: uppercase; }.coverage-form-grid input,.coverage-form-grid select,.coverage-form-grid textarea,.coverage-allocation-lines input { min-height: 40px; padding: 8px 10px; border: 1px solid #d9dfeb; border-radius: 9px; color: #263149; background: #fff; font: inherit; font-size: 10px; }.coverage-form-grid textarea { resize: vertical; }
.coverage-dialog-note { margin: 0 22px 17px; padding: 11px 12px; border-radius: 10px; color: #53685c; background: #eef9f3; font-size: 9px; line-height: 1.45; }.coverage-dialog form > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px 19px; border-top: 1px solid #edf0f4; }.coverage-dialog form > footer button { min-height: 38px; padding: 8px 14px; border: 1px solid #d8deea; border-radius: 9px; color: #5f697d; background: #fff; font-size: 9px; font-weight: 900; }.coverage-dialog form > footer button[type="submit"] { border-color: #433dc3; color: #fff; background: #433dc3; }
.coverage-allocation-lines { display: grid; gap: 9px; padding: 0 22px 18px; }.coverage-allocation-lines article { padding: 13px; border: 1px solid #e1e6ef; border-radius: 12px; background: #fafbfc; }.coverage-allocation-lines article > header { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; }.coverage-allocation-lines article > header strong,.coverage-allocation-lines article > header b { font-size: 9px; }.coverage-allocation-lines article > header label { display: flex; align-items: center; gap: 8px; }.coverage-allocation-lines article > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }.coverage-allocation-lines article > div label { display: grid; gap: 5px; }.coverage-resubmit { display: flex; align-items: center; gap: 6px; margin-top: 9px; color: #697387; font-size: 8px; }

.payables-workflow > header p { color: #176f78; }
.payables-actions button:first-child { border-color: #146f78; background: #146f78; box-shadow: 0 7px 16px rgba(20,111,120,.2); }
.payables-stage-strip .is-ready > span { color: #176f78; background: #e6f6f6; }
.payables-stage-strip .is-submitted > span { color: #a96710; background: #fff1d2; }
.payables-stage-strip .is-approved > span { color: #a34e45; background: #fff0ee; }
.payables-stage-strip .is-paid > span { color: #16825a; background: #e7f8ef; }
.payables-flow-note { display: grid; grid-template-columns: minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr); align-items: center; gap: 8px; margin: 16px 22px 0; padding: 12px 15px; border: 1px solid #dce9e9; border-radius: 14px; background: linear-gradient(100deg,#f5fbfb,#fbfcfd); }
.payables-flow-note span { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 1px 9px; align-items: center; color: #768293; font-size: 8px; }
.payables-flow-note span .app-icon { grid-row: 1/3; width: 20px; height: 20px; color: #247b82; }
.payables-flow-note span b { color: #35445a; font-size: 9px; }
.payables-flow-note > i { height: 1px; background: linear-gradient(90deg,#b8d5d7,#dbe7e8); }
.payables-workflow-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; padding: 17px 22px 22px; }
.payables-list-panel { overflow: hidden; border: 1px solid #e2e7ec; border-radius: 15px; background: #fafcfc; }
.payables-list-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 15px; border-bottom: 1px solid #e7ecef; background: #fff; }
.payables-list-panel > header h3 { margin: 0; color: #2a394d; font-size: 11px; }
.payables-list-panel > header p { margin: 3px 0 0; color: #8793a1; font-size: 8px; }
.payables-list-panel > header > span { display: grid; min-width: 25px; height: 25px; place-items: center; border-radius: 99px; color: #176f78; background: #e8f6f6; font-size: 9px; font-weight: 900; }
.payables-list { max-height: 450px; overflow-y: auto; }
.payables-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 12px 14px; border-top: 1px solid #ebeff2; background: #fff; }
.payables-row:first-child { border-top: 0; }
.payables-row > div { min-width: 0; }
.payables-row p { display: flex; justify-content: space-between; gap: 10px; margin: 0; }
.payables-row strong { overflow: hidden; color: #304055; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.payables-row p b { color: #24364a; font-size: 9px; white-space: nowrap; }
.payables-row div > span { display: block; overflow: hidden; margin-top: 4px; color: #8792a0; font-size: 7px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.payables-row > em { padding: 5px 8px; border-radius: 99px; color: #176f78; background: #e8f6f6; font-size: 7px; font-style: normal; font-weight: 950; white-space: nowrap; }
.payables-row.is-overdue > em { color: #a44e43; background: #ffefec; }
.payables-row.is-paid > em { color: #16825a; background: #e7f8ef; }
.payables-row > button { padding: 7px 9px; border: 1px solid #cfe1e2; border-radius: 8px; color: #176f78; background: #eef8f8; font-size: 7px; font-weight: 900; }
.payables-legacy-details > p { margin: 0; padding: 0 22px 16px; color: #717d8c; font-size: 9px; line-height: 1.55; }
.payables-allocation-lines article > input { width: 100%; }

@media (max-width: 1200px) {
  .data-workbench { grid-template-columns: 225px minmax(0,1fr); }
  .data-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .coverage-stage-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .coverage-workflow-grid { grid-template-columns: 1fr; }
  .payables-workflow-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .data-workbench { grid-template-columns: 1fr; }
  .data-sidebar { position: static; }
  .data-sidebar nav { grid-template-columns: repeat(7,minmax(100px,1fr)); overflow-x: auto; }
  .data-sidebar nav button { grid-template-columns: 30px minmax(0,1fr); padding: 8px; }
  .data-sidebar nav button > span { width: 30px; height: 30px; }
  .data-sidebar > aside { display: none; }
  .data-secondary-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .data-metrics,.data-integrity-grid { grid-template-columns: 1fr; }
  .data-heading { display: grid; }
  .data-readonly-badge { width: max-content; }
  .data-filters,.data-custom-dates { align-items: stretch; flex-direction: column; }
  .data-custom-dates { margin-left: 0; }
  .data-period-panel > p { align-items: flex-start; flex-wrap: wrap; }.data-period-panel > p span { width: 100%; margin-left: 23px; }
  .data-chart { height: 235px; overflow-x: auto; }.data-chart svg { min-width: 690px; }
  .data-coverage-visual { grid-template-columns: 1fr; justify-items: center; }.data-coverage-visual dl { width: 100%; }
  .data-coverage-workflow > header { display: grid; }.coverage-workflow-actions { justify-content: flex-start; }
  .coverage-stage-strip { grid-template-columns: 1fr; }.coverage-form-grid { grid-template-columns: 1fr; }.coverage-form-grid label.is-wide { grid-column: auto; }
  .payables-flow-note { grid-template-columns: 1fr; }.payables-flow-note > i { width: 1px; height: 16px; margin-left: 14px; }
  .coverage-allocation-lines article > div { grid-template-columns: 1fr 1fr; }
  .coverage-operation-row { grid-template-columns: 24px minmax(0,1fr); }.coverage-operation-row > em { grid-column: 2; width: max-content; }
}

/* Identidad de facturación: componente aislado y compartido sólo por flujos de compra. */
.billing-identity-dialog { width: min(560px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 28px; color: #172744; background: #fff; box-shadow: 0 30px 90px rgb(18 39 81 / 30%); }
.billing-identity-dialog::backdrop { background: rgb(12 27 54 / 66%); backdrop-filter: blur(5px); }
.billing-identity-dialog form { display: grid; grid-template-columns: 72px 1fr; gap: 22px; padding: 34px; }
.billing-identity-dialog__icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; color: #fff; background: linear-gradient(145deg, #1677ff, #6e4ee8); }
.billing-identity-dialog__icon .app-icon { width: 34px; height: 34px; }
.billing-identity-dialog__copy p { margin: 0 0 6px; color: #5d4ed8; font-size: 13px; font-weight: 900; letter-spacing: .12em; }
.billing-identity-dialog__copy h2 { margin: 0 0 8px; font-size: 30px; line-height: 1.08; }
.billing-identity-dialog__copy span { color: #64728a; font-size: 16px; line-height: 1.45; }
.billing-identity-dialog label { grid-column: 1 / -1; display: grid; gap: 8px; color: #364764; font-size: 14px; font-weight: 800; }
.billing-identity-dialog input { box-sizing: border-box; width: 100%; min-height: 62px; padding: 0 18px; border: 2px solid #d5deec; border-radius: 16px; color: #172744; background: #f9fbff; font: 800 20px/1 system-ui, sans-serif; text-align: center; letter-spacing: .04em; }
.billing-identity-dialog input:focus { border-color: #1677ff; outline: 4px solid rgb(22 119 255 / 13%); }
.billing-identity-dialog [role="alert"] { grid-column: 1 / -1; min-height: 20px; margin: -8px 0 0; color: #bd3550; font-size: 14px; font-weight: 750; }
.billing-identity-dialog footer { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 12px; }
.billing-identity-dialog button { min-height: 52px; padding: 0 20px; border: 0; border-radius: 15px; font-size: 14px; font-weight: 900; cursor: pointer; }
.billing-identity-dialog button:first-child { color: #596a84; background: #eef2f7; }
.billing-identity-dialog button[type="submit"] { display: inline-flex; align-items: center; gap: 10px; color: #fff; background: #1677ff; box-shadow: 0 12px 26px rgb(22 119 255 / 24%); }
.billing-identity-dialog button .app-icon { width: 18px; height: 18px; }
@media (max-width: 600px) {
  .billing-identity-dialog form { grid-template-columns: 56px 1fr; gap: 16px; padding: 24px; }
  .billing-identity-dialog__icon { width: 56px; height: 56px; border-radius: 17px; }
  .billing-identity-dialog__copy h2 { font-size: 25px; }
  .billing-identity-dialog footer { flex-direction: column-reverse; }
  .billing-identity-dialog button { width: 100%; justify-content: center; }
}

/* Compra de mensajes: los importes nunca se fragmentan ni las etiquetas salen de su tarjeta. */
#messagePackDialog { container-type: inline-size; }
#messagePackDialog .message-pack-audience {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  justify-content: center;
  white-space: normal;
  text-align: center;
}
#messagePackDialog .message-pack-total > strong,
#messagePackDialog .message-pack-monthly > strong {
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#messagePackDialog .message-pack-card:not(.is-custom) .message-pack-price {
  grid-template-columns: minmax(0, 1fr);
}
#messagePackDialog .message-pack-card:not(.is-custom) .message-pack-price > div {
  min-height: 78px;
}
#messagePackDialog .message-pack-card.is-custom .message-pack-price {
  grid-template-columns: minmax(0, 1fr);
}
#messagePackDialog .message-pack-card.is-custom .message-pack-total { min-width: 0; }

@container (max-width: 760px) {
  #messagePackDialog .message-pack-catalog { grid-template-columns: minmax(0, 1fr); }
  #messagePackDialog .message-pack-card.is-custom { grid-template-columns: minmax(0, 1fr); }
  #messagePackDialog .message-pack-card.is-custom .message-pack-price {
    grid-template-columns: minmax(0, 1fr);
    padding: 19px 0 0 !important;
    border-top: 1px solid #d9ebdf !important;
    border-left: 0 !important;
  }
  #messagePackDialog .message-pack-card.is-custom .message-pack-total { min-width: 0; }
}

/* Acceso comercial: namespace exclusivo para impedir fugas visuales a otras pantallas. */
.commercial-access-view { min-height: 100dvh; color: #172843; background: radial-gradient(circle at 86% 6%, rgba(108, 87, 225, .16), transparent 27rem), linear-gradient(145deg, #f4f8ff 0%, #f8f7ff 48%, #eef6ff 100%); }
.commercial-access-view[hidden] { display: none; }
.commercial-access-view .commercial-access-view__topbar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 14px clamp(24px, 4vw, 72px); border-bottom: 1px solid rgba(45, 77, 125, .13); background: rgba(255, 255, 255, .86); backdrop-filter: blur(18px); }
.commercial-access-view .commercial-access-view__topbar > div { display: flex; align-items: center; gap: 8px; }
.commercial-access-view .commercial-access-view__brand > .burotec-monogram,
.commercial-access-view .commercial-access-view__brand > strong { font-family: 'Burotec Inter', Inter, ui-sans-serif, sans-serif; }
.commercial-access-view .commercial-access-view__brand > strong { color: #243752; font-size: 20px; letter-spacing: .02em; }
.commercial-access-view .commercial-access-view__brand > small { padding: 4px 9px; border-radius: 999px; color: #59708f; background: #edf3fb; font-size: 12px; font-weight: 800; }
.commercial-access-view .commercial-access-view__topbar > button { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px; border: 1px solid #cad6e7; border-radius: 15px; color: #32455f; background: #fff; font-size: 14px; font-weight: 800; cursor: pointer; }
.commercial-access-view .commercial-access-view__topbar > button .app-icon { width: 20px; height: 20px; }
.commercial-access-view .commercial-access-view__stage { width: min(1320px, calc(100% - 40px)); margin: 0 auto; padding: clamp(36px, 6vw, 82px) 0 64px; }
.commercial-access-view .commercial-access-view__hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .7fr); gap: clamp(28px, 5vw, 72px); padding: clamp(34px, 5vw, 68px); border: 1px solid rgba(43, 77, 132, .15); border-radius: 36px; background: rgba(255, 255, 255, .93); box-shadow: 0 28px 70px rgba(35, 61, 105, .14); }
.commercial-access-view .commercial-access-view__hero::before { content: ''; position: absolute; width: 360px; height: 360px; top: -210px; right: -70px; border-radius: 50%; background: linear-gradient(145deg, rgba(43, 129, 255, .2), rgba(117, 75, 220, .2)); pointer-events: none; }
.commercial-access-view .commercial-access-view__copy { position: relative; z-index: 1; }
.commercial-access-view .commercial-access-view__copy > p { margin: 0 0 14px; color: #5a55cc; font-size: 14px; font-weight: 900; letter-spacing: .17em; }
.commercial-access-view .commercial-access-view__copy > h1 { max-width: 760px; margin: 0; color: #142743; font-size: clamp(36px, 5vw, 64px); line-height: 1.02; letter-spacing: -.035em; }
.commercial-access-view .commercial-access-view__copy > span { display: block; max-width: 760px; margin-top: 22px; color: #5e6e84; font-size: clamp(17px, 1.7vw, 22px); line-height: 1.55; }
.commercial-access-view .commercial-access-view__copy > dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 34px 0 0; }
.commercial-access-view .commercial-access-view__copy > dl > div { min-height: 88px; padding: 17px 19px; border: 1px solid #dbe4f1; border-radius: 18px; background: #f8faff; }
.commercial-access-view .commercial-access-view__copy dt { color: #738198; font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.commercial-access-view .commercial-access-view__copy dd { overflow-wrap: anywhere; margin: 8px 0 0; color: #263b59; font-size: 17px; font-weight: 800; }
.commercial-access-view .commercial-access-view__actions { display: grid; grid-template-columns: repeat(2, max-content); align-items: center; gap: 12px; margin-top: 28px; }
.commercial-access-view .commercial-access-view__actions > button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; padding: 0 25px; border: 0; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #176ee8, #6a4cdb); box-shadow: 0 14px 28px rgba(56, 93, 205, .27); font-size: 15px; font-weight: 900; letter-spacing: .035em; cursor: pointer; }
.commercial-access-view .commercial-access-view__actions > .commercial-access-view__contact-button { border: 1px solid #ccd9ea; color: #304b6e; background: #fff; box-shadow: 0 10px 22px rgba(40, 69, 110, .1); }
.commercial-access-view .commercial-access-view__actions > button:disabled { opacity: .65; cursor: wait; }
.commercial-access-view .commercial-access-view__actions > button .app-icon { width: 22px; height: 22px; }
.commercial-access-view .commercial-access-view__actions > p { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 4px 0 0; color: #6b788c; font-size: 14px; line-height: 1.45; }
.commercial-access-view .commercial-access-view__actions > p .app-icon { flex: 0 0 auto; width: 20px; height: 20px; color: #2e9a88; }
.commercial-access-view .commercial-access-view__contact { display: grid; gap: 17px; margin-top: 24px; padding: 22px; border: 1px solid #cfdced; border-radius: 22px; background: linear-gradient(145deg, #f8fbff, #f7f5ff); box-shadow: 0 15px 35px rgba(37, 64, 107, .1); }
.commercial-access-view .commercial-access-view__contact[hidden] { display: none; }
.commercial-access-view .commercial-access-view__contact > header { display: flex; align-items: center; gap: 14px; }
.commercial-access-view .commercial-access-view__contact > header > span { display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(145deg, #2989ef, #6950db); }
.commercial-access-view .commercial-access-view__contact > header .app-icon { width: 24px; height: 24px; }
.commercial-access-view .commercial-access-view__contact > header p { margin: 0 0 4px; color: #5b52c7; font-size: 12px; font-weight: 900; letter-spacing: .11em; }
.commercial-access-view .commercial-access-view__contact > header h2 { margin: 0; color: #203754; font-size: 23px; }
.commercial-access-view .commercial-access-view__contact > header small { display: block; margin-top: 5px; color: #697990; font-size: 13px; line-height: 1.45; }
.commercial-access-view .commercial-access-view__contact > header small b { color: #324d70; }
.commercial-access-view .commercial-access-view__contact > label { display: grid; gap: 8px; color: #3f5572; font-size: 14px; font-weight: 800; }
.commercial-access-view .commercial-access-view__contact textarea { width: 100%; min-height: 112px; padding: 14px 15px; resize: vertical; border: 1px solid #c8d6e8; border-radius: 15px; outline: 0; color: #273d5b; background: #fff; font: inherit; font-size: 15px; line-height: 1.5; }
.commercial-access-view .commercial-access-view__contact textarea:focus { border-color: #4c84e7; box-shadow: 0 0 0 4px rgba(61, 121, 225, .12); }
.commercial-access-view .commercial-access-view__contact > [role="alert"] { min-height: 0; margin: 0; color: #b53650; font-size: 13px; font-weight: 750; }
.commercial-access-view .commercial-access-view__contact > footer { display: flex; justify-content: flex-end; gap: 10px; }
.commercial-access-view .commercial-access-view__contact > footer button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 9px; padding: 0 18px; border: 0; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #176ee8, #6a4cdb); font-size: 13px; font-weight: 900; cursor: pointer; }
.commercial-access-view .commercial-access-view__contact > footer button[type="button"] { color: #5e6f85; background: #e8eef6; }
.commercial-access-view .commercial-access-view__contact > footer .app-icon { width: 18px; height: 18px; }
.commercial-access-view .commercial-access-view__contact-success { display: flex; align-items: center; gap: 13px; padding: 16px; border: 1px solid #a7dfc9; border-radius: 16px; color: #165d4a; background: #effbf7; }
.commercial-access-view .commercial-access-view__contact-success[hidden] { display: none; }
.commercial-access-view .commercial-access-view__contact-success > .app-icon { flex: 0 0 auto; width: 27px; height: 27px; color: #18a778; }
.commercial-access-view .commercial-access-view__contact-success div { display: grid; gap: 3px; }
.commercial-access-view .commercial-access-view__contact-success strong { font-size: 16px; }
.commercial-access-view .commercial-access-view__contact-success span { color: #477568; font-size: 14px; line-height: 1.4; }
.commercial-access-view .commercial-access-view__contact.is-sent > label,
.commercial-access-view .commercial-access-view__contact.is-sent > [role="alert"],
.commercial-access-view .commercial-access-view__contact.is-sent > footer { display: none; }
.commercial-access-view .commercial-access-view__visual { position: relative; z-index: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 48px); border-radius: 28px; color: #fff; background: linear-gradient(150deg, #142849, #234d91 58%, #583fc1); box-shadow: 0 20px 45px rgba(31, 57, 107, .24); }
.commercial-access-view .commercial-access-view__visual > span { display: grid; width: 82px; height: 82px; place-items: center; margin-bottom: 26px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 24px; background: rgba(255, 255, 255, .13); }
.commercial-access-view .commercial-access-view__visual > span .app-icon { width: 43px; height: 43px; }
.commercial-access-view .commercial-access-view__visual > strong { font-size: 27px; line-height: 1.16; }
.commercial-access-view .commercial-access-view__visual > p { margin: 16px 0 0; color: #dce8fb; font-size: 16px; line-height: 1.55; }
.commercial-access-view .commercial-access-view__catalog { margin-top: 28px; padding: clamp(25px, 4vw, 42px); border: 1px solid rgba(46, 79, 130, .15); border-radius: 30px; background: rgba(255, 255, 255, .95); box-shadow: 0 18px 50px rgba(35, 61, 105, .1); scroll-margin-top: 24px; }
.commercial-access-view .commercial-access-view__catalog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.commercial-access-view .commercial-access-view__catalog > header p { margin: 0; color: #2974da; font-size: 13px; font-weight: 900; letter-spacing: .15em; }
.commercial-access-view .commercial-access-view__catalog > header h2 { margin: 7px 0 5px; font-size: 30px; }
.commercial-access-view .commercial-access-view__catalog > header span { color: #6d7c90; font-size: 15px; }
.commercial-access-view .commercial-access-view__catalog > header > button { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #d6dfeb; border-radius: 14px; color: #53647c; background: #fff; cursor: pointer; }
.commercial-access-view .commercial-access-view__catalog > header > button .app-icon { width: 22px; height: 22px; }
.commercial-access-view .commercial-access-view__status { margin: 30px 0 0; padding: 18px; border-radius: 16px; color: #5d6d82; background: #f2f5fa; font-size: 15px; }
.commercial-access-view .commercial-access-view__tier-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 760px; margin-top: 28px; padding: 7px; border: 1px solid #dce4f0; border-radius: 22px; background: #f3f6fb; }
.commercial-access-view .commercial-access-view__tier-tabs > button { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 13px; min-height: 78px; padding: 11px 17px; border: 1px solid transparent; border-radius: 16px; color: #50627a; background: transparent; text-align: left; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, color .18s ease, background .18s ease; }
.commercial-access-view .commercial-access-view__tier-tabs > button > span { grid-row: 1 / span 2; display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; color: #456787; background: #fff; box-shadow: 0 7px 18px rgba(42, 69, 108, .1); }
.commercial-access-view .commercial-access-view__tier-tabs > button .app-icon { width: 25px; height: 25px; }
.commercial-access-view .commercial-access-view__tier-tabs > button b { align-self: end; font-size: 17px; letter-spacing: .035em; }
.commercial-access-view .commercial-access-view__tier-tabs > button small { align-self: start; margin-top: 2px; color: inherit; font-size: 12px; font-weight: 700; }
.commercial-access-view .commercial-access-view__tier-tabs > button.is-active { color: #fff; background: linear-gradient(135deg, #503bd2, #754ee5); box-shadow: 0 12px 24px rgba(83, 58, 204, .24); }
.commercial-access-view .commercial-access-view__tier-tabs > button.is-active > span { color: #ffd742; background: rgba(255, 255, 255, .15); box-shadow: none; }
.commercial-access-view .commercial-access-view__tier-tabs > button[data-commercial-tier="PRO"].is-active { background: linear-gradient(135deg, #126fdc, #278ef3); box-shadow: 0 12px 24px rgba(25, 114, 218, .22); }
.commercial-access-view .commercial-access-view__tier-tabs > button[data-commercial-tier="PRO"].is-active > span { color: #fff; }
.commercial-access-view .commercial-access-view__tier-tabs > button[data-commercial-tier="PREMIUM"].is-active { border-color: #e8c95c; color: #3e3472; background: radial-gradient(circle at 92% 12%, rgba(255, 214, 71, .24), transparent 38%), linear-gradient(135deg, #fffdf6, #f7f2ff); box-shadow: 0 13px 28px rgba(90, 66, 173, .16), inset 0 0 0 1px rgba(248, 216, 103, .42); }
.commercial-access-view .commercial-access-view__tier-tabs > button[data-commercial-tier="PREMIUM"].is-active > span { color: #e9ae0c; background: #fff; box-shadow: 0 8px 20px rgba(185, 132, 11, .14); }
.commercial-access-view .commercial-access-view__plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.commercial-access-view .commercial-access-view__plan { padding: 23px; border: 1px solid #dce4ef; border-radius: 22px; background: #fff; }
.commercial-access-view .commercial-access-view__plan--premium { position: relative; overflow: hidden; border-color: #e5cd79; background: radial-gradient(circle at 94% 5%, rgba(255, 211, 61, .23), transparent 31%), radial-gradient(circle at 8% 100%, rgba(122, 83, 224, .12), transparent 38%), linear-gradient(150deg, #fffef9, #faf7ff); box-shadow: 0 18px 42px rgba(79, 57, 157, .15); }
.commercial-access-view .commercial-access-view__plan--premium::before { position: absolute; inset: 0 0 auto; height: 5px; content: ''; background: linear-gradient(90deg, #f2bd21, #ffe17b 42%, #8a60e8); }
.commercial-access-view .commercial-access-view__plan > header { display: flex; align-items: center; gap: 13px; }
.commercial-access-view .commercial-access-view__plan > header > span { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(145deg, #2384f2, #6552d9); }
.commercial-access-view .commercial-access-view__plan--premium > header > span { border: 1px solid #f0d576; color: #e9ad08; background: rgba(255, 255, 255, .9); box-shadow: 0 10px 24px rgba(192, 137, 16, .16); }
.commercial-access-view .commercial-access-view__plan > header .app-icon { width: 27px; height: 27px; }
.commercial-access-view .commercial-access-view__plan > header small { color: #79879a; font-size: 12px; font-weight: 900; letter-spacing: .09em; }
.commercial-access-view .commercial-access-view__plan--premium > header small { color: #8a6a0f; }
.commercial-access-view .commercial-access-view__plan > header h3 { margin: 3px 0 0; font-size: 24px; }
.commercial-access-view .commercial-access-view__plan--premium > header h3 { color: #432f83; }
.commercial-access-view .commercial-access-view__plan > strong { display: block; margin-top: 24px; color: #345175; font-size: 19px; }
.commercial-access-view .commercial-access-view__plan > p { margin: 11px 0; color: #65758b; font-size: 14px; }
.commercial-access-view .commercial-access-view__plan > p b { color: #1c3455; font-size: 18px; }
.commercial-access-view .commercial-access-view__plan-total { color: #53657e; font-size: 13px; font-weight: 700; }
.commercial-access-view .commercial-access-view__plan > button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 50px; margin-top: 20px; padding: 0 17px; border: 0; border-radius: 15px; color: #fff; background: #176ee8; font-size: 13px; font-weight: 900; cursor: pointer; }
.commercial-access-view .commercial-access-view__plan > button .app-icon { width: 18px; height: 18px; }
.commercial-access-view .commercial-access-view__plan--premium > button { background: linear-gradient(135deg, #6b45d8, #8b5bea); box-shadow: 0 11px 24px rgba(97, 65, 195, .24); }
.commercial-access-view .commercial-access-view__order,
.commercial-access-view .commercial-access-view__payment { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(260px, .8fr) minmax(260px, .8fr); align-items: end; gap: 20px; margin-top: 22px; padding: 24px; border: 1px solid #cddbed; border-radius: 22px; background: #f7faff; }
.commercial-access-view .commercial-access-view__order[hidden],
.commercial-access-view .commercial-access-view__payment[hidden] { display: none; }
.commercial-access-view .commercial-access-view__order p,
.commercial-access-view .commercial-access-view__payment p { margin: 0; color: #5d55cf; font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.commercial-access-view .commercial-access-view__order h3,
.commercial-access-view .commercial-access-view__payment h3 { margin: 6px 0; color: #1c3455; font-size: 23px; }
.commercial-access-view .commercial-access-view__order span,
.commercial-access-view .commercial-access-view__payment span { color: #63748a; font-size: 14px; }
.commercial-access-view .commercial-access-view__order label { display: grid; gap: 8px; color: #3d506b; font-size: 13px; font-weight: 800; }
.commercial-access-view .commercial-access-view__order select { min-height: 52px; padding: 0 14px; border: 1px solid #cbd8e8; border-radius: 14px; color: #263d5d; background: #fff; font-size: 15px; font-weight: 750; }
.commercial-access-view .commercial-access-view__order [role="alert"],
.commercial-access-view .commercial-access-view__payment [role="alert"] { grid-column: 1 / -1; color: #b53650; letter-spacing: 0; }
.commercial-access-view .commercial-access-view__order > button,
.commercial-access-view .commercial-access-view__payment > button { min-height: 54px; padding: 0 18px; border: 0; border-radius: 15px; color: #fff; background: linear-gradient(135deg, #176ee8, #6a4cdb); font-size: 13px; font-weight: 900; cursor: pointer; }
.commercial-access-view .commercial-access-view__order > button { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.commercial-access-view .commercial-access-view__order > button .app-icon { width: 18px; height: 18px; }
.commercial-access-view .commercial-access-view__payment { grid-template-columns: 1fr auto; align-items: center; background: linear-gradient(145deg, #f0f7ff, #f5f1ff); }
.commercial-access-view .commercial-access-view__payment [role="alert"] { grid-column: 1 / 2; }
.commercial-access-view .commercial-access-view__payment > button { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 900px) {
  .commercial-access-view .commercial-access-view__hero { grid-template-columns: 1fr; }
  .commercial-access-view .commercial-access-view__copy > dl { grid-template-columns: 1fr 1fr; }
  .commercial-access-view .commercial-access-view__actions { grid-template-columns: 1fr; }
  .commercial-access-view .commercial-access-view__plans { grid-template-columns: 1fr 1fr; }
  .commercial-access-view .commercial-access-view__order,
  .commercial-access-view .commercial-access-view__payment { grid-template-columns: 1fr; align-items: stretch; }
  .commercial-access-view .commercial-access-view__payment > button { grid-column: 1; grid-row: auto; }
}
@media (max-width: 620px) {
  .commercial-access-view .commercial-access-view__topbar { padding-inline: 12px; }
  .commercial-access-view .commercial-access-view__brand > small { display: none; }
  .commercial-access-view .commercial-access-view__topbar > button { min-height: 44px; padding-inline: 14px; }
  .commercial-access-view .commercial-access-view__stage { width: min(100% - 24px, 1320px); padding-top: 22px; }
  .commercial-access-view .commercial-access-view__hero { padding: 25px; border-radius: 25px; }
  .commercial-access-view .commercial-access-view__copy > h1 { font-size: 38px; }
  .commercial-access-view .commercial-access-view__copy > dl { grid-template-columns: 1fr; }
  .commercial-access-view .commercial-access-view__actions > button { width: 100%; }
  .commercial-access-view .commercial-access-view__tier-tabs { grid-template-columns: 1fr; max-width: none; }
  .commercial-access-view .commercial-access-view__plans { grid-template-columns: 1fr; }
}

/* Avisos globales: namespace exclusivo para conectividad y vigencia comercial. */
.system-alert-center { --system-alert-border: #d4def0; --system-alert-color: #28425f; --system-alert-icon: #397dcc; --system-alert-soft: #eef6ff; position: sticky; top: 68px; z-index: 29; display: grid; width: min(100% - 32px, 1752px); gap: 9px; margin: 10px auto 0; font-family: var(--font-family); }
.system-alert-center[hidden] { display: none; }
.system-alert-center > article { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 70px; padding: 11px 14px; border: 1px solid var(--system-alert-border); border-radius: 17px; color: var(--system-alert-color); background: linear-gradient(115deg, #fff, var(--system-alert-soft)); box-shadow: 0 10px 28px rgba(35, 58, 94, .13); }
.system-alert-center > article[hidden] { display: none; }
.system-alert-center > article[data-tone="warning"] { --system-alert-border: #efd28a; --system-alert-color: #6f5013; --system-alert-icon: #d29318; --system-alert-soft: #fff8df; }
.system-alert-center > article[data-tone="urgent"] { --system-alert-border: #edb768; --system-alert-color: #71400d; --system-alert-icon: #dc7713; --system-alert-soft: #fff1d9; }
.system-alert-center > article[data-tone="critical"] { --system-alert-border: #eba8b3; --system-alert-color: #842d3f; --system-alert-icon: #ce3e58; --system-alert-soft: #fff0f2; }
.system-alert-center > article[data-tone="service"] { --system-alert-border: #c7b8ee; --system-alert-color: #4c367b; --system-alert-icon: #7150c6; --system-alert-soft: #f4f0ff; }
.system-alert-center > article[data-tone="unknown"] { --system-alert-border: #b9d4ea; --system-alert-color: #315774; --system-alert-icon: #397fa9; --system-alert-soft: #eef8fd; }
.system-alert-center > article[data-tone="success"] { --system-alert-border: #9bd8c0; --system-alert-color: #186148; --system-alert-icon: #1a9f70; --system-alert-soft: #eafaf4; }
.system-alert-center .system-alert-center__icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; color: #fff; background: var(--system-alert-icon); box-shadow: 0 7px 17px color-mix(in srgb, var(--system-alert-icon) 28%, transparent); }
.system-alert-center .system-alert-center__icon .app-icon { width: 24px; height: 24px; }
.system-alert-center .system-alert-center__copy { min-width: 0; }
.system-alert-center .system-alert-center__copy strong { display: block; font-size: 15px; line-height: 1.3; }
.system-alert-center .system-alert-center__copy p { margin: 3px 0 0; color: color-mix(in srgb, var(--system-alert-color) 84%, #fff); font-size: 13px; font-weight: 600; line-height: 1.45; }
.system-alert-center .system-alert-center__actions { display: flex; align-items: center; gap: 7px; }
.system-alert-center .system-alert-center__actions > button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border: 1px solid color-mix(in srgb, var(--system-alert-icon) 38%, #fff); border-radius: 12px; color: #fff; background: var(--system-alert-icon); font: inherit; font-size: 13px; font-weight: 850; cursor: pointer; }
.system-alert-center .system-alert-center__actions > button .app-icon { width: 17px; height: 17px; }
.system-alert-center .system-alert-center__actions > .system-alert-center__dismiss { width: 42px; padding: 0; color: var(--system-alert-color); background: rgba(255, 255, 255, .7); }
.system-alert-compact { display: flex; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid #d8e0eb; border-radius: 999px; color: #68778b; background: #fff; font-size: 12px; }
.system-alert-compact > span { width: 8px; height: 8px; border-radius: 50%; background: #bdc3cf; }
.system-alert-compact.is-online > span { background: #20b77c; box-shadow: 0 0 0 4px rgba(32,183,124,.13); }
.system-alert-compact.is-online > strong { color: #17885f; }
.system-alert-compact.is-offline > span { background: #cf4058; box-shadow: 0 0 0 4px rgba(207,64,88,.12); }
.system-alert-compact.is-offline > strong { color: #a33046; }
@media (max-width: 760px) {
  .system-alert-center { position: relative; top: auto; width: calc(100% - 20px); }
  .system-alert-center > article { grid-template-columns: 42px minmax(0, 1fr); }
  .system-alert-center .system-alert-center__icon { width: 42px; height: 42px; }
  .system-alert-center .system-alert-center__actions { grid-column: 1 / -1; justify-content: flex-end; }
  .system-alert-center .system-alert-center__actions > button:first-child { flex: 1; }
}