:root{
  --primary:#087e85;
  --primary-dark:#075f66;
  --primary-light:#0e9aa7;
  --primary-glow:rgba(8,126,133,0.16);
  --tint:#e7f5f3;
  --tint-subtle:#f1f8f7;
  --ink:#19383d;
  --ink-secondary:#3d585c;
  --muted:#526b70;
  --muted-light:#778f92;
  --line:#e2eae9;
  --line-strong:#c5d6d4;
  --line-subtle:#edf3f2;
  --border:var(--line);
  --bg:#f3f7f6;
  --surface:#ffffff;
  --surface-2:var(--bg);
  --white:#ffffff;
  --ink-soft:var(--ink-secondary);
  --secondary:var(--muted);
  --dark:var(--ink);
  --success:#10b981;
  --success-tint:#ecfdf5;
  --success-dark:#059669;
  --warning:#f59e0b;
  --warning-tint:#fffbeb;
  --warning-dark:#d97706;
  --danger:#dc2626;
  --danger-tint:#fef2f2;
  --danger-dark:#b91c1c;
  --shadow-sm:0 1px 2px rgba(18,56,53,0.05),0 2px 6px -1px rgba(18,56,53,0.04);
  --shadow:0 2px 5px rgba(18,56,53,0.05),0 8px 20px -4px rgba(18,56,53,0.075);
  --shadow-md:0 4px 10px -2px rgba(18,56,53,0.06),0 12px 28px -6px rgba(18,56,53,0.1);
  --shadow-lg:0 12px 28px -6px rgba(18,56,53,0.1),0 28px 64px -12px rgba(14,42,46,0.18);
  --3d-bevel-top:inset 0 1px 0 rgba(255,255,255,0.92);
  --3d-bevel-lip:inset 0 -1px 0 rgba(18,56,53,0.055);
  --3d-card-shadow:inset 0 1px 0 rgba(255,255,255,0.96),0 1px 2px rgba(18,56,53,0.045),0 6px 16px -4px rgba(18,56,53,0.065);
  --3d-card-hover-shadow:inset 0 1px 0 #ffffff,0 3px 7px rgba(18,56,53,0.06),0 12px 24px -6px rgba(18,56,53,0.1);
  --3d-btn-bg:linear-gradient(180deg,#ffffff 0%,color-mix(in srgb,var(--tint-subtle) 58%,#ffffff) 100%);
  --3d-btn-hover-bg:linear-gradient(180deg,#ffffff 0%,var(--tint) 100%);
  --3d-btn-shadow:inset 0 1px 0 #ffffff,inset 0 -1.5px 0 rgba(18,56,53,0.065),0 1px 2px rgba(18,56,53,0.06),0 3px 6px -2px rgba(18,56,53,0.045);
  --3d-btn-hover-shadow:inset 0 1px 0 #ffffff,inset 0 -1.5px 0 color-mix(in srgb,var(--primary) 18%,transparent),0 3px 8px -1px rgba(18,56,53,0.09),0 1px 3px rgba(18,56,53,0.05);
  --3d-btn-active-shadow:inset 0 2px 4px rgba(18,56,53,0.12),0 1px 0 rgba(255,255,255,0.85);
  --3d-btn-primary-bg:linear-gradient(180deg,color-mix(in srgb,var(--primary) 88%,#ffffff) 0%,var(--primary) 54%,var(--primary-dark) 100%);
  --3d-btn-primary-hover-bg:linear-gradient(180deg,var(--primary) 0%,var(--primary-dark) 65%,color-mix(in srgb,var(--primary-dark) 88%,#000000) 100%);
  --3d-btn-primary-shadow:inset 0 1px 0 rgba(255,255,255,0.34),inset 0 -1.5px 0 rgba(0,0,0,0.2),0 2px 5px color-mix(in srgb,var(--primary) 30%,transparent),0 6px 14px -3px color-mix(in srgb,var(--primary) 22%,transparent);
  --3d-btn-primary-hover-shadow:inset 0 1px 0 rgba(255,255,255,0.42),inset 0 -1.5px 0 rgba(0,0,0,0.24),0 4px 10px color-mix(in srgb,var(--primary) 38%,transparent),0 8px 20px -4px color-mix(in srgb,var(--primary) 28%,transparent);
  --3d-recessed-bg:linear-gradient(180deg,color-mix(in srgb,var(--bg) 52%,#ffffff) 0%,#ffffff 38%);
  --3d-recessed-shadow:inset 0 1.5px 3px rgba(18,56,53,0.055),inset 0 0 0 1px rgba(18,56,53,0.015),0 1px 0 rgba(255,255,255,0.9);
  --3d-track-shadow:inset 0 1.5px 3.5px rgba(18,56,53,0.065),0 1px 0 rgba(255,255,255,0.88);
  --3d-pill-active-shadow:inset 0 1px 0 #ffffff,inset 0 -1px 0 rgba(18,56,53,0.05),0 2px 6px rgba(18,56,53,0.085),0 1px 2px rgba(0,0,0,0.04);
  --3d-modal-shadow:inset 0 1px 0 rgba(255,255,255,0.96),0 0 0 1px rgba(18,56,53,0.08),0 14px 32px -4px rgba(14,42,46,0.16),0 32px 72px -12px rgba(14,42,46,0.24);
  --3d-icon-box-shadow:inset 0 1px 0 rgba(255,255,255,0.85),inset 0 -1px 0 rgba(18,56,53,0.06),0 2px 5px rgba(18,56,53,0.06);
  --radius-xs:4px;
  --radius-sm:6px;
  --radius-md:8px;
  --radius:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --radius-pill:999px;
  --z-base:1;
  --z-elevated:10;
  --z-dropdown:50;
  --z-sticky:100;
  --z-drawer:500;
  --z-modal:1000;
  --z-toast:2000;
  --font-2xs:10px;
  --font-xs:11px;
  --font-sm:12px;
  --font-base:13.5px;
  --font-md:15px;
  --font-lg:18px;
  --font-xl:22px;
  --font-2xl:28px;
  --font-sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--bg);
  font-synthesis:none
}*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--primary) 58%,#aebfbc) transparent}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--primary) 58%,#aebfbc);border:3px solid transparent;border-radius:var(--radius-pill, 999px);background-clip:padding-box}*::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--primary) 78%,#809895);border:2px solid transparent;background-clip:padding-box}*::-webkit-scrollbar-corner{background:transparent}html,body{height:100%;margin:0;overflow:hidden}#app{height:100%;min-height:100vh;display:flex;flex-direction:column;overflow:hidden}button,input,textarea,select{font:inherit}button,a,input,textarea,select{outline-offset:4px}button{cursor:pointer;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;padding:9px 16px;color:var(--ink);font-weight:600;transition:all .16s ease-in-out}button:hover{background:var(--tint)}button:disabled{opacity:.55;cursor:not-allowed}a{color:var(--primary)}h1,h2,h3,p{margin-top:0}h1{font-size:30px;letter-spacing:-1px;margin-bottom:9px}h2{font-size:20px;letter-spacing:-.4px}h3{font-size:16px}p{line-height:1.6}.muted,small{color:var(--muted)}small{font-size:12px}.primary{background:var(--primary);border-color:var(--primary);color:#fff}.primary:hover{background:var(--primary-dark)}.danger{color:var(--danger)}.brand{display:flex;gap:11px;align-items:center;font-weight:700;font-size:21px;letter-spacing:-.6px}.brand-mark{display:inline-grid;place-items:center;width:38px;height:38px;background:var(--primary);border-radius:var(--radius-lg);color:#fff;font-size:32px;font-weight:400}.brand small{display:block;font-size:10px;letter-spacing:2px;font-weight:600;margin-top:4px}.shell{display:grid;grid-template-columns:240px 1fr;height:100vh;max-height:100vh;overflow:hidden}.sidebar{border-right:1px solid var(--line);background:#fff;padding:24px 16px 14px;position:fixed;inset:0 auto 0 0;width:240px;height:100vh;max-height:100vh;display:flex;flex-direction:column;overflow:hidden;z-index:20;box-sizing:border-box}.sidebar .brand{margin:0 6px 16px;flex-shrink:0}.nav-label{font-size:10px;font-weight:700;letter-spacing:1.7px;color:var(--muted);padding:0 12px;margin-bottom:8px;flex-shrink:0}.sidebar nav{display:grid;gap:5px;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:2px 4px 6px 0;margin:0 0 8px;scrollbar-gutter:stable}.sidebar nav button{border:0;text-align:left;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:12px;padding:10px 13px}.sidebar nav button.active{background:var(--tint);color:var(--primary);font-weight:600}.icon{width:19px;height:19px;display:inline-block;vertical-align:middle;flex-shrink:0}.sidebar-bottom{margin-top:auto;flex-shrink:0;padding:12px 0 0;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);position:relative;z-index:5}.sidebar .sidebar-user-card,.sidebar-user-card.userbox{flex-shrink:0;background:linear-gradient(180deg,#ffffff 0%,var(--tint-subtle) 100%);border:1px solid var(--line);border-radius:var(--radius-lg);padding:12px 10px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:var(--shadow-sm);transition:border-color .2s ease,box-shadow .2s ease}.sidebar .sidebar-user-card:hover,.sidebar-user-card.userbox:hover{border-color:color-mix(in srgb,var(--primary) 28%,var(--line));box-shadow:var(--shadow)}.sidebar-user-profile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;width:100%;min-width:0}.sidebar-avatar-wrap{position:relative;width:58px;height:58px;margin:0 auto 3px;flex-shrink:0;border-radius:50%;padding:3px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 85%,#fff) 0%,var(--primary) 50%,color-mix(in srgb,var(--primary) 70%,var(--success)) 100%);box-shadow:0 4px 14px -2px color-mix(in srgb,var(--primary) 35%,transparent),0 2px 6px rgba(0,0,0,.05);display:flex;align-items:center;justify-content:center;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s cubic-bezier(.16,1,.3,1)}.sidebar-avatar-wrap:hover{transform:translateY(-1px) scale(1.025);box-shadow:0 6px 20px -2px color-mix(in srgb,var(--primary) 48%,transparent)}.sidebar-user-card .avatar{width:100%;height:100%;min-width:0;border-radius:50%;background:#fff;border:2px solid #fff;box-shadow:inset 0 1px 2px rgba(0,0,0,.06);display:grid;place-items:center;overflow:hidden;position:relative;font-size:16px;color:var(--primary);font-weight:700}.sidebar-user-card .avatar img,.sidebar-user-card .avatar video{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.sidebar-user-card .avatar.has-photo{background:#fff}.user-status-dot{position:absolute;bottom:2px;right:2px;width:13px;height:13px;border-radius:50%;background:var(--success);border:2.5px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.16);pointer-events:none;z-index:2}.sidebar-user-card .sidebar-user-meta.user-name{width:100%;text-align:center;font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.3;margin:0;padding:0 2px;overflow-wrap:break-word;word-break:normal;display:block}.sidebar-user-card .sidebar-user-meta.user-name small{display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--primary);background:var(--tint);border:1px solid color-mix(in srgb,var(--primary) 20%,transparent);padding:2.5px 9px;border-radius:var(--radius-pill);margin-top:5px;letter-spacing:.25px;max-width:100%;white-space:normal;line-height:1.2;text-align:center}.sidebar-user-actions{width:100%;border-top:1px solid var(--line-subtle);padding-top:8px;margin-top:2px}.sidebar-logout-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:7px 10px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);color:var(--ink-secondary);font-size:11.5px;font-weight:600;cursor:pointer;box-shadow:var(--shadow-sm);transition:all .15s ease}.sidebar-logout-btn .icon{width:14px;height:14px;stroke-width:2;color:inherit}.sidebar-logout-btn:hover{background:var(--danger-tint);color:var(--danger-dark);border-color:#fecaca;box-shadow:0 2px 6px rgba(185,28,28,.1)}.sidebar-footnote{padding:2px 0 0;display:flex;align-items:center;justify-content:center}.sidebar-footnote small{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:var(--muted-light);line-height:1.3}.sidebar-footnote .icon{width:12px;height:12px;flex-shrink:0;color:var(--muted-light)}.topbar-sync{display:inline-flex;align-items:center;font-size:11px;font-weight:500;color:var(--muted);padding:4px 10px;border-radius:var(--radius-pill);background:var(--bg);border:1px solid var(--line);white-space:nowrap}.live-dot{display:inline-block;width:7px;height:7px;background:var(--success);border-radius:50%;margin-right:6px;box-shadow:0 0 0 0 rgba(16,185,129,.4);animation:nexoLivePulse 2.4s infinite cubic-bezier(.4,0,.6,1);vertical-align:middle}.live-dot.syncing{background:var(--primary);box-shadow:0 0 0 0 var(--primary-glow);animation:nexoLivePulse .8s infinite cubic-bezier(.4,0,.6,1)}.live-dot.offline{background:var(--danger);box-shadow:none;animation:none}.live-dot.pending{background:var(--warning);box-shadow:0 0 0 0 rgba(245,158,11,.5);animation:nexoLivePulse 1.2s infinite cubic-bezier(.4,0,.6,1)}@keyframes nexoLivePulse{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(16,185,129,.5)}70%{transform:scale(1.05);box-shadow:0 0 0 5px rgba(16,185,129,0)}100%{transform:scale(.95);box-shadow:0 0 0 0 rgba(16,185,129,0)}}.main{grid-column:2;min-width:0;height:100vh;max-height:100vh;display:flex;flex-direction:column;overflow:hidden}.topbar{min-height:82px;height:82px;border-bottom:1px solid var(--line);background:var(--white);display:flex;align-items:center;justify-content:space-between;padding:6px 38px;gap:20px;flex-shrink:0;position:relative;z-index:30}.topbar-context{flex:1;min-width:0}.module-heading{min-width:0}.module-eyebrow{color:var(--primary);font-size:9px;font-weight:700;letter-spacing:1.6px;margin-bottom:3px}.module-heading h1{font-size:18px;line-height:1.12;letter-spacing:-.35px;margin:0 0 3px}.module-heading p{color:var(--muted);font-size:11px;line-height:1.25;margin:0;display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap}.module-context-copy{min-width:0;overflow:hidden;text-overflow:ellipsis}.header-allergy-tag{display:inline-flex;align-items:center;gap:3px;flex-shrink:0;padding:3px 8px;border:1px solid rgba(245,158,11,.35);border-radius:var(--radius-pill);background:var(--warning-tint);color:var(--warning-dark);font-size:10px;line-height:1;font-weight:600}.header-allergy-tag strong{font-weight:700}.topbar-right{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-shrink:0}.topbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.topbar-actions button{font-size:12px;padding:8px 11px}.topbar-right .userbox{border-left:1px solid var(--line);padding-left:14px}.content>.heading{display:none}.content.patient-content{padding-top:12px}.topbar .clinic{font-size:13px;font-weight:600}.userbox{display:flex;align-items:center;gap:12px;font-size:13px}.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--tint);color:var(--primary);font-weight:700}.content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:34px 38px;max-width:100%;box-sizing:border-box}.heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}.heading p{font-size:14px;color:var(--muted);margin:0}.eyebrow{font-size:10px;color:var(--primary);letter-spacing:1.8px;font-weight:700;margin-bottom:12px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:28px}.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:23px;display:flex;justify-content:space-between;gap:12px}.stat strong{display:block;font-size:32px;letter-spacing:-1px;margin:14px 0 6px}.stat label{font-size:13px;color:var(--muted)}.stat .stat-icon{background:var(--tint);padding:12px;height:44px;border-radius:var(--radius-lg);color:var(--primary)}.grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);gap:24px}.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:22px}.card-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:22px 24px;border-bottom:1px solid var(--line)}.card-header h2{font-size:16px;margin:0}.card-body{padding:24px}.card-body p:last-child{margin-bottom:0}.empty{text-align:center;padding:42px 24px;color:var(--muted)}.empty .icon{width:28px;height:28px;color:var(--primary);margin-bottom:16px}.empty h3{color:var(--ink);font-size:16px}.empty p{font-size:13px;max-width:340px;margin:0 auto 20px}.link-button{border:0;padding:4px;background:transparent;color:var(--primary);font-size:12px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}th{background:var(--tint-subtle);color:var(--muted);font-size:10px;letter-spacing:.9px;text-transform:uppercase;padding:14px 22px;font-weight:600}td{padding:18px 22px;border-top:1px solid var(--line);vertical-align:middle}td strong{font-size:13px}td small{display:block;margin-top:5px}.badge{display:inline-flex;padding:3px 9px;border-radius:var(--radius-pill);background:var(--tint);color:var(--primary);font-size:11px;font-weight:600}.badge.neutral{background:var(--bg);color:var(--muted)}.badge.warn{background:var(--warning-tint);color:var(--warning-dark)}.toolbar{display:flex;justify-content:space-between;gap:15px;margin-bottom:22px}.search{max-width:420px;width:100%}input,textarea,select{width:100%;border:1px solid var(--line);border-radius:var(--radius-md);padding:9px 12px;color:var(--ink);background:#fff;font-size:13.5px;transition:border-color .16s ease,box-shadow .16s ease}input:focus,textarea:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);outline:none}textarea{min-height:94px;resize:vertical}label{font-size:12px;font-weight:600;display:block}label input,label select,label textarea{margin-top:8px}label small{display:block;margin-top:5px;font-weight:400}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.span-2{grid-column:1/-1}.form-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:22px;margin-top:24px;border-top:1px solid var(--line)}dialog{border:1px solid color-mix(in srgb,var(--line) 82%,transparent);padding:0;border-radius:var(--radius-xl);width:min(760px,calc(100vw - 30px));max-height:90vh;overflow:hidden;background:var(--white);box-shadow:var(--shadow-lg);color:var(--ink)}dialog[open]{display:flex;flex-direction:column}dialog::backdrop{background:#142f3c66;backdrop-filter:blur(3px)}#modal-body{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;max-height:100%;overflow:hidden}.modal-header{flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:space-between;padding:20px 28px;border-bottom:1px solid var(--line);border-radius:15px 15px 0 0;background:#fff;z-index:10}.modal-header h2{margin:0}.modal-header button[data-action="close"],.modal-header .modal-close-btn{border:0;padding:4px 9px;font-size:24px}.modal-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden;padding:0;background:var(--white);border-radius:0 0 15px 15px}.modal-scroll-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:24px 28px;scrollbar-gutter:stable}.modal-scroll-body::-webkit-scrollbar-track{margin-block:10px}.modal-content:not(:has(.modal-scroll-body)){overflow-y:auto;overflow-x:hidden;padding:24px 28px}dialog .form-actions,.modal-content .form-actions{flex-shrink:0;position:relative;display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:16px 28px;margin:0;border-top:1px solid var(--line);background:#fff;border-radius:0 0 15px 15px;z-index:10;box-shadow:0 -4px 14px rgba(18,48,44,0.04)}.notice{padding:15px 18px;background:var(--tint-subtle);border-radius:var(--radius-md);font-size:12px;line-height:1.65;color:var(--ink-secondary);margin-bottom:20px}.notice.warning{background:var(--warning-tint);color:var(--warning-dark)}.form-error{color:var(--danger);line-height:1.5;font-size:13px;margin-top:14px}.details{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.details small{display:block;margin-bottom:7px}.details p{font-size:14px;margin:0;white-space:pre-wrap}.note{border-left:3px solid var(--primary);padding:20px 22px;margin:0 24px 22px;background:var(--tint-subtle);border-radius:0 var(--radius-md) var(--radius-md) 0}.note h3{margin:10px 0}.note p{font-size:13px;white-space:pre-wrap}.note .meta{display:flex;gap:10px;justify-content:space-between}.note .meta small{font-size:11px}.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.template{padding:24px;margin:0}.template .icon{color:var(--primary);margin-bottom:22px;width:24px;height:24px}.template p{font-size:12px;color:var(--muted)}.chips{display:flex;gap:6px;flex-wrap:wrap}.chips span{background:var(--bg);font-size:10px;border-radius:var(--radius-sm);padding:6px 8px}.welcome{background:var(--primary-dark);color:#fff;padding:28px;border-radius:var(--radius-lg);margin-bottom:23px}.welcome .eyebrow{color:#99d5ce}.welcome h2{font-size:24px;line-height:1.3}.welcome p{font-size:13px;color:#cfdfdf}.welcome button{background:#ffffff18;border-color:#ffffff40;color:#fff}.step{display:flex;gap:13px;margin-bottom:23px}.step:last-child{margin-bottom:0}.step .number{background:var(--tint);color:var(--primary);width:28px;height:28px;border-radius:var(--radius-md);display:grid;place-items:center;font-size:12px;flex-shrink:0}.step strong{font-size:13px}.step p{font-size:12px;color:var(--muted);margin:5px 0 0}.login-shell{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.login-story{background:var(--primary-dark);padding:9vw 7vw;color:#fff;display:flex;flex-direction:column;justify-content:center}.login-story .brand-mark{background:#ffffff22}.login-story h1{font-size:48px;line-height:1.14;margin-top:70px;max-width:480px}.login-story p{color:#c1dcd9;max-width:410px}.login-story .eyebrow{color:#acdacf}.login-form{padding:60px;display:flex;align-items:center;justify-content:center}.login-form form{width:100%;max-width:360px}.login-form label{margin-top:22px}.login-form .primary{width:100%;margin-top:28px}.boot{padding:15vh 30px;text-align:center}.boot h1{margin-top:20px}.boot pre{white-space:pre-wrap;font-size:13px}.themes{display:flex;gap:10px;flex-wrap:wrap}.theme{border:2px solid var(--line)}.theme[data-theme=teal]{color:var(--primary, #087e85)}.theme[data-theme=blue]{color:#3269a6}.theme[data-theme=violet]{color:#7553a0}.theme[data-theme=green]{color:#39745b}.theme.active{border-color:var(--primary)!important;box-shadow:0 0 0 2px var(--primary-glow)!important;font-weight:700!important;background:var(--tint-subtle, var(--tint))!important}.appointment{display:flex;align-items:center;gap:17px;padding:20px 24px;border-bottom:1px solid var(--line)}.appointment:last-child{border:0}.appointment .time{font-size:16px;font-weight:600;min-width:50px}.appointment .info{flex:1}.appointment .info strong{font-size:13px}.appointment .info small{display:block;margin-top:5px}.actions{display:flex;gap:9px;flex-wrap:wrap}.check{display:flex;gap:10px;align-items:flex-start}.check input{width:auto;margin-top:3px}.break{overflow-wrap:anywhere}.mobile-brand{display:none}.timeline-card{overflow:hidden}.timeline-card>.card-body{padding:17px 24px;background:linear-gradient(90deg,var(--tint),#fff 38%);border-bottom:1px solid var(--line)}.timeline-card>.card-body small{font-size:12px;line-height:1.5}.notes-timeline{position:relative;padding:14px 20px 20px}.timeline-entry{position:relative;margin:0 0 8px;padding:10px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:border-color .2s ease,box-shadow .2s ease}.timeline-entry:last-child{margin-bottom:0}.timeline-entry:hover{border-color:color-mix(in srgb,var(--primary) 35%,var(--line));box-shadow:var(--shadow)}.timeline-marker{position:absolute;left:-29px;top:7px;width:22px;height:22px;border:3px solid var(--bg);border-radius:50%;background:#a9bbb8;display:grid;place-items:center}.timeline-entry.latest .timeline-marker{background:var(--primary);color:#fff;box-shadow:0 0 0 2px var(--tint)}.note-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}.note-classification{display:flex;align-items:center;gap:8px;min-width:0}.note-specialty{color:var(--muted);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.note-top time{color:var(--muted);font-size:11px;white-space:nowrap}.note-summary small{display:block;margin-bottom:3px;font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}.note-summary h3{font-size:15px;line-height:1.3;margin:0 0 4px}.note-summary p{color:var(--ink-secondary);font-size:12px;line-height:1.45;margin:0;white-space:pre-wrap}.note-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}.note-author{display:flex;align-items:center;gap:8px;min-width:0}.note-author-icon{display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;border-radius:var(--radius-md);background:var(--tint);color:var(--primary);font-size:10px;font-weight:700}.note-author strong{display:block;font-size:11px;line-height:1.3}.note-author small{display:block;margin-top:2px;font-size:10px}.note-footer .actions{justify-content:flex-end}.note-footer .link-button{padding:4px 7px;font-size:10px}@media(max-width:1150px){.template-grid{grid-template-columns:1fr 1fr}.content{padding:28px 24px}.topbar{padding:6px 24px}.grid{grid-template-columns:1fr}.stats{gap:12px}.sidebar{width:210px;padding:25px 14px}.shell{grid-template-columns:210px 1fr}}@media(max-width:760px){html,body{height:auto;overflow-y:auto}#app{height:auto;min-height:100vh;overflow:visible}.shell{display:block;height:auto;max-height:none;overflow:visible}.sidebar{position:static;width:100%;height:auto;max-height:none;overflow:visible;padding:14px;border-right:0;border-bottom:1px solid var(--line)}.main{height:auto;max-height:none;overflow:visible}.content{height:auto;min-height:0;overflow:visible}.sidebar .brand{margin:0 0 15px}.sidebar nav{display:flex;overflow:auto}.sidebar nav button{white-space:nowrap;font-size:12px;padding:10px}.nav-label{display:none}.sidebar-bottom{display:block;margin-top:10px;padding:10px 0 0;border-top:1px solid var(--line)}.sidebar-user-card,.sidebar-user-card.userbox{flex-direction:row;align-items:center;justify-content:space-between;padding:10px 14px;box-shadow:none;border-radius:var(--radius-lg)}.sidebar-user-profile{flex-direction:row;align-items:center;text-align:left;gap:11px;width:auto;flex:1;min-width:0}.sidebar-avatar-wrap{margin:0;width:44px;height:44px;padding:2px}.sidebar-user-card .avatar{width:100%;height:100%;min-width:0;font-size:13px;border-width:1.5px}.sidebar-avatar-wrap .user-status-dot{width:11px;height:11px;border-width:2px;bottom:1px;right:1px}.sidebar-user-card .sidebar-user-meta.user-name{text-align:left;width:auto;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-user-card .sidebar-user-meta.user-name small{justify-content:flex-start;margin-top:3px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-user-actions{border-top:0;padding-top:0;margin-top:0;width:auto;flex-shrink:0}.sidebar-logout-btn{width:auto;padding:7px 12px}.sidebar-footnote{display:none}.sidebar-user-card .user-name{display:block}.topbar{min-height:0;height:auto;padding:12px 18px;align-items:flex-start;gap:11px;flex-direction:column}.topbar-context,.topbar-right{width:100%}.module-heading h1{font-size:18px}.module-heading p{font-size:11px}.topbar-right{gap:10px;justify-content:space-between;flex-wrap:wrap}.topbar-actions{justify-content:flex-start;flex:1}.topbar-actions button{font-size:11px;padding:8px 10px}.topbar-right .userbox{border-left:0;padding-left:0;margin-left:auto}.content{padding:25px 18px}.heading{align-items:flex-start;flex-wrap:wrap}h1{font-size:26px}.stats{grid-template-columns:1fr}.stat{padding:17px}.stat strong{margin:8px 0;font-size:28px}.template-grid,.form-grid,.details{grid-template-columns:1fr}.span-2{grid-column:auto}.login-shell{grid-template-columns:1fr}.login-story{padding:30px}.login-story h1{margin:35px 0 15px;font-size:34px}.login-story p{margin-bottom:0}.login-form{padding:35px 25px}dialog{width:calc(100vw - 16px);max-height:94vh;border-radius:var(--radius-lg)}.modal-header{padding:14px 18px;border-radius:11px 11px 0 0}.modal-scroll-body{padding:18px 16px}.modal-content:not(:has(.modal-scroll-body)){padding:18px 16px}dialog .form-actions,.modal-content .form-actions{padding:12px 18px;border-radius:0 0 11px 11px}.userbox .user-name{display:none}.toolbar{flex-wrap:wrap}.appointment{flex-wrap:wrap}td,th{padding:15px}.note{margin:0 15px 15px}.actions button{font-size:12px}}@media(max-width:760px){.timeline-card>.card-body{padding:14px 18px}.notes-timeline{padding:16px 14px 18px 43px}.timeline-entry{padding:10px 12px}.timeline-marker{left:-29px}.note-top,.note-footer{align-items:flex-start;flex-direction:column;gap:10px}.note-footer .actions{width:100%;justify-content:flex-start}}@media print{html,body{height:auto!important;overflow:visible!important}#app,.shell,.main{height:auto!important;max-height:none!important;overflow:visible!important}.content{padding:0!important;height:auto!important;max-height:none!important;overflow:visible!important}.content>.heading{display:flex!important}.sidebar,.topbar,.heading .actions,.tabs,button,#toast{display:none!important}.shell,.main{display:block}.card,.note{break-inside:avoid;border:1px solid #ccc;box-shadow:none}body{background:white}.details{grid-template-columns:repeat(3,1fr)}}

.status-dot-svg{display:inline-block;vertical-align:middle;margin:0 2px}

/* Normalización universal para deslizadores de rango (input[type="range"]) para permitir recorrido 0% - 100% sin márgenes, paddings ni marcos parásitos */
input[type="range"]{width:100%;height:6px;padding:0!important;margin:0!important;border:none!important;background:transparent!important;border-radius:var(--radius-pill, 999px)!important;box-shadow:none!important;outline:none!important;accent-color:var(--primary);cursor:pointer;box-sizing:border-box}

/* Fondo de contenido consistente con Agenda & Google Calendar para todos los modales */
dialog .modal-content,
dialog .modal-scroll-body,
dialog .modal-content:not(:has(.modal-scroll-body)),
#modal .modal-content,
#modal .modal-scroll-body,
#modal #dialog-form,
.modal-content,
.modal-scroll-body,
.drive-modal-content,
.drive-modal-scroll {
  background: var(--bg) !important;
}

/* ==========================================================================
   Botones de Cerrar Universales (Efecto redondeado, rotación hover y pulso active)
   ========================================================================== */
.modal-close-btn,
.modal-header button[data-action="close"],
.modal-header .actions button[data-action="close"],
.agenda-modal-header-top button[data-action="close"],
.agenda-modal-header-top button.modal-close-btn,
.drive-modal-header-top button[data-action="close"],
.drive-modal-header-top button.modal-close-btn,
.catalog-modal-header-top button[data-action="close"],
.catalog-modal-header-top button.modal-close-btn,
.clinical-modal-title-row button[data-action="close"],
.clinical-modal-title-row button.modal-close-btn,
.reader-header button[data-action="close"],
.reader-header button.modal-close-btn,
.diagnosis-info-close,
.agenda-help-close,
.study-lightbox-close,
[data-maps-guide-close],
.app-toast-close {
  display: inline-grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-md, 8px) !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  user-select: none !important;
  outline: none !important;
  box-sizing: border-box !important;
  transform-origin: center center !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.16s ease,
              color 0.16s ease,
              box-shadow 0.16s ease,
              border-color 0.16s ease !important;
}

.modal-close-icon {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  margin: auto !important;
  pointer-events: none !important;
  flex-shrink: 0 !important;
  stroke: currentColor !important;
}

.modal-close-btn:hover,
.modal-header button[data-action="close"]:hover,
.modal-header .actions button[data-action="close"]:hover,
.agenda-modal-header-top button[data-action="close"]:hover,
.agenda-modal-header-top button.modal-close-btn:hover,
.drive-modal-header-top button[data-action="close"]:hover,
.drive-modal-header-top button.modal-close-btn:hover,
.catalog-modal-header-top button[data-action="close"]:hover,
.catalog-modal-header-top button.modal-close-btn:hover,
.clinical-modal-title-row button[data-action="close"]:hover,
.clinical-modal-title-row button.modal-close-btn:hover,
.reader-header button[data-action="close"]:hover,
.reader-header button.modal-close-btn:hover,
.diagnosis-info-close:hover,
.agenda-help-close:hover,
[data-maps-guide-close]:hover,
.app-toast-close:hover,
.modal-close-btn:focus-visible,
.modal-header button[data-action="close"]:focus-visible,
.agenda-modal-header-top button:focus-visible,
.drive-modal-header-top button:focus-visible,
.catalog-modal-header-top button:focus-visible,
.clinical-modal-title-row button:focus-visible,
.reader-header button[data-action="close"]:focus-visible,
.diagnosis-info-close:focus-visible,
.agenda-help-close:focus-visible,
[data-maps-guide-close]:focus-visible,
.app-toast-close:focus-visible {
  background: var(--tint) !important;
  color: var(--ink) !important;
  border-color: color-mix(in srgb, var(--primary) 18%, transparent) !important;
  transform: rotate(90deg) scale(1.08) !important;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 12%, transparent) !important;
}

.modal-close-btn:active,
.modal-header button[data-action="close"]:active,
.modal-header .actions button[data-action="close"]:active,
.agenda-modal-header-top button[data-action="close"]:active,
.agenda-modal-header-top button.modal-close-btn:active,
.drive-modal-header-top button[data-action="close"]:active,
.drive-modal-header-top button.modal-close-btn:active,
.catalog-modal-header-top button[data-action="close"]:active,
.catalog-modal-header-top button.modal-close-btn:active,
.clinical-modal-title-row button[data-action="close"]:active,
.clinical-modal-title-row button.modal-close-btn:active,
.reader-header button[data-action="close"]:active,
.reader-header button.modal-close-btn:active,
.diagnosis-info-close:active,
.agenda-help-close:active,
[data-maps-guide-close]:active,
.app-toast-close:active {
  background: color-mix(in srgb, var(--primary) 22%, var(--tint)) !important;
  color: var(--primary-dark) !important;
  transform: rotate(90deg) scale(0.86) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  transition: transform 0.08s ease, background 0.08s ease, color 0.08s ease !important;
}

/* Modal lightbox de estudios sobre fondo oscuro */
.study-lightbox-close {
  border-color: rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e6f1ef !important;
}
.study-lightbox-close:hover,
.study-lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  transform: rotate(90deg) scale(1.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}
.study-lightbox-close:active {
  background: rgba(255, 255, 255, 0.38) !important;
  color: #ffffff !important;
  transform: rotate(90deg) scale(0.86) !important;
}

/* ==========================================================================
   Pestañas / Menú Segmentado Universal (Ancho completo del contenedor y alineación izquierda)
   ========================================================================== */
.tabs,
.clinical-dialog-tabs,
.catalog-tabs,
.gcal-config-tabs {
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  padding: 5px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 62%, var(--bg)) 0%, color-mix(in srgb, var(--tint) 42%, var(--bg)) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line)) !important;
  border-top-color: color-mix(in srgb, var(--primary) 24%, var(--line-strong)) !important;
  border-radius: var(--radius-lg, 12px) !important;
  margin-bottom: 22px;
  box-shadow: var(--3d-track-shadow) !important;
  overflow-x: auto !important;
  max-width: 100% !important;
  scrollbar-width: none !important;
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  height: auto !important;
  min-height: unset !important;
}
.tabs::-webkit-scrollbar,
.clinical-dialog-tabs::-webkit-scrollbar,
.catalog-tabs::-webkit-scrollbar,
.gcal-config-tabs::-webkit-scrollbar {
  display: none !important;
}
.tabs button,
.tabs .tab,
.clinical-dialog-tabs button,
.catalog-tabs button,
.gcal-config-tabs button,
.gcal-tab-btn {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  font-size: var(--font-base, 13.5px) !important;
  font-weight: 600 !important;
  color: var(--muted, #526b70) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-md, 8px) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  line-height: 1.35 !important;
  transition: all 0.16s cubic-bezier(0.22, 1, 0.36, 1) !important;
  outline-offset: 2px !important;
}
.tabs button:hover,
.tabs .tab:hover,
.clinical-dialog-tabs button:hover,
.catalog-tabs button:hover,
.gcal-config-tabs button:hover,
.gcal-tab-btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 100%) !important;
  color: var(--ink) !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 1px 3px rgba(18, 56, 53, 0.06) !important;
}
.tabs button.active,
.tabs .tab.active,
.tabs [role="tab"].active,
.clinical-dialog-tabs button.active,
.catalog-tabs button.active,
.gcal-config-tabs button.active,
.gcal-tab-btn.active {
  background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--tint-subtle) 45%, #ffffff) 100%) !important;
  color: var(--primary-dark) !important;
  font-size: var(--font-base, 13.5px) !important;
  font-weight: 700 !important;
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--line)) !important;
  border-bottom-color: color-mix(in srgb, var(--primary) 36%, var(--line-strong)) !important;
  box-shadow: var(--3d-pill-active-shadow) !important;
}
.tabs button.active:hover,
.tabs .tab.active:hover,
.clinical-dialog-tabs button.active:hover,
.catalog-tabs button.active:hover,
.gcal-config-tabs button.active:hover,
.gcal-tab-btn.active:hover {
  background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--tint-subtle) 35%, #ffffff) 100%) !important;
  color: var(--primary-dark) !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 3px 9px rgba(18, 56, 53, 0.11), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
.tabs button[hidden],
.tabs .tab[hidden],
.tabs button.is-tab-disabled,
.tabs .tab.is-tab-disabled,
.clinical-dialog-tabs button[hidden],
.clinical-dialog-tabs button.is-tab-disabled,
.catalog-tabs button[hidden],
.catalog-tabs button.is-tab-disabled,
.gcal-config-tabs button[hidden],
.gcal-config-tabs button.is-tab-disabled {
  display: none !important;
}
.drive-tpl-toolbar-left .tabs {
  width: auto !important;
  margin: 0 !important;
}

/* ==========================================================================
   Botones de cabecera y acciones superiores (Homogéneos y consistentes)
   ========================================================================== */
.topbar-actions button,
.heading .actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  vertical-align: middle !important;
}

.topbar-actions button .icon,
.heading .actions button .icon {
  width: 15px !important;
  height: 15px !important;
}

button.danger,
.topbar-actions button.danger,
.heading .actions button.danger {
  color: var(--danger-dark, #b91c1c) !important;
}

button.danger:hover,
.topbar-actions button.danger:hover,
.heading .actions button.danger:hover {
  background: var(--danger-tint, #fef2f2) !important;
  border-color: color-mix(in srgb, var(--danger) 40%, var(--line)) !important;
  color: var(--danger-dark, #b91c1c) !important;
}

/* ==========================================================================
   Google Drive Brand Buttons & Empty State
   ========================================================================== */
.patient-drive-empty {
  padding: 44px 24px 40px !important;
  max-width: 580px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.patient-drive-icon-badge {
  display: inline-grid !important;
  place-items: center !important;
  width: 66px !important;
  height: 66px !important;
  border-radius: var(--radius-xl, 16px) !important;
  background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 50%, #e8f4fc 100%) !important;
  border: 1px solid rgba(66, 133, 244, 0.22) !important;
  box-shadow: 0 4px 16px rgba(66, 133, 244, 0.12), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  margin: 0 auto 18px !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease !important;
}

.patient-drive-icon-badge:hover {
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 8px 22px rgba(66, 133, 244, 0.2) !important;
}

.patient-drive-empty h3 {
  font-size: var(--font-xl, 18px) !important;
  font-weight: 700 !important;
  color: var(--ink, #19383d) !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.3px !important;
}

.patient-drive-desc {
  font-size: var(--font-base, 13.5px) !important;
  line-height: 1.55 !important;
  color: var(--muted, #526b70) !important;
  max-width: 470px !important;
  margin: 0 auto 22px !important;
}

.patient-drive-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
}

.btn-google-drive-connect {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  background: #ffffff !important;
  color: var(--ink, #19383d) !important;
  border: 1.5px solid #dadce0 !important;
  border-radius: var(--radius-md, 8px) !important;
  padding: 12px 26px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15px !important;
  font-family: inherit !important;
  cursor: pointer !important;
  box-shadow: 0 2px 5px rgba(60, 64, 67, 0.09), 0 1px 2px rgba(60, 64, 67, 0.06) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
  user-select: none !important;
  box-sizing: border-box !important;
}

.btn-google-drive-connect:hover {
  background: #ffffff !important;
  border-color: #4285f4 !important;
  color: #1a73e8 !important;
  box-shadow: 0 6px 18px rgba(66, 133, 244, 0.22), 0 2px 4px rgba(60, 64, 67, 0.08) !important;
  transform: translateY(-2px) !important;
}

.btn-google-drive-connect:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.15) !important;
  background: var(--bg, #f3f7f6) !important;
}

.btn-google-drive-connect:focus-visible {
  outline: 3px solid rgba(66, 133, 244, 0.35) !important;
  outline-offset: 2px !important;
}

.btn-google-drive-connect.is-loading,
.btn-google-drive-connect:disabled {
  opacity: 0.82 !important;
  pointer-events: none !important;
  cursor: wait !important;
}

.btn-google-drive-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--muted, #526b70) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  padding: 6px 14px !important;
  border-radius: var(--radius-md, 8px) !important;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease !important;
}

.btn-google-drive-secondary:hover {
  color: var(--primary, #087e85) !important;
  background: var(--tint, #e7f5f3) !important;
  border-color: color-mix(in srgb, var(--primary) 16%, transparent) !important;
}

.patient-drive-security-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  font-size: 11.5px !important;
  color: var(--muted, #526b70) !important;
  background: var(--bg, #f3f7f6) !important;
  border: 1px solid var(--line, #e2eae9) !important;
  border-radius: var(--radius-pill, 999px) !important;
  padding: 5px 14px !important;
  margin-top: 4px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.patient-drive-security-pill code {
  font-family: var(--font-mono, monospace) !important;
  background: color-mix(in srgb, var(--tint) 60%, var(--line)) !important;
  color: var(--ink, #19383d) !important;
  padding: 1px 6px !important;
  border-radius: var(--radius-xs, 4px) !important;
  font-size: var(--font-xs, 11px) !important;
  font-weight: 600 !important;
}

.btn-google-drive-compact {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #ffffff !important;
  color: var(--ink, #19383d) !important;
  border: 1.2px solid #dadce0 !important;
  border-radius: var(--radius-md, 8px) !important;
  padding: 5px 12px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-google-drive-compact:hover {
  background: var(--bg, #f3f7f6) !important;
  border-color: #4285f4 !important;
  color: #1a73e8 !important;
  box-shadow: 0 3px 8px rgba(66, 133, 244, 0.16) !important;
  transform: translateY(-1px) !important;
}

.btn-google-drive-compact:active {
  transform: translateY(0) !important;
}

/* ==========================================================================
   FASE 2: SISTEMA UNIVERSAL DE COMPONENTES KLIO.IM
   ========================================================================== */

/* 1. Botones Maestros Universales (.btn y compatibilidad con .button) */
.btn,
button.btn,
a.btn,
.button,
button.button,
a.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  font-family: inherit !important;
  font-size: var(--font-base, 13.5px) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  border-radius: var(--radius-md, 8px) !important;
  border: 1px solid var(--line, #e2eae9) !important;
  border-bottom-color: var(--line-strong, #c5d6d4) !important;
  background: var(--3d-btn-bg, linear-gradient(180deg, #ffffff 0%, #f7fbfa 100%)) !important;
  color: var(--ink, #19383d) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: var(--3d-btn-shadow) !important;
  box-sizing: border-box !important;
  user-select: none !important;
  outline-offset: 2px !important;
  transition: transform 0.14s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.16s ease,
              background 0.16s ease,
              border-color 0.16s ease,
              color 0.16s ease !important;
}

.btn:hover,
button.btn:hover,
a.btn:hover,
.button:hover,
button.button:hover,
a.button:hover {
  background: var(--3d-btn-hover-bg, linear-gradient(180deg, #ffffff 0%, var(--tint) 100%)) !important;
  border-color: color-mix(in srgb, var(--primary) 32%, var(--line)) !important;
  border-bottom-color: color-mix(in srgb, var(--primary) 44%, var(--line-strong)) !important;
  color: var(--primary-dark, #075f66) !important;
  box-shadow: var(--3d-btn-hover-shadow) !important;
  transform: translateY(-0.5px) !important;
}

.btn:active,
button.btn:active,
a.btn:active,
.button:active,
button.button:active,
a.button:active {
  transform: translateY(1px) !important;
  box-shadow: var(--3d-btn-active-shadow) !important;
}

.btn:focus-visible,
button.btn:focus-visible,
a.btn:focus-visible,
.button:focus-visible,
button.button:focus-visible,
a.button:focus-visible {
  outline: 2px solid var(--primary, #087e85) !important;
  outline-offset: 2px !important;
}

.btn:disabled,
button.btn:disabled,
a.btn:disabled,
.btn.is-disabled,
.button:disabled,
button.button:disabled,
a.button:disabled,
.button.is-disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Variantes Semánticas de Botón */
.btn.btn-primary,
.btn.primary,
button.primary,
.button.primary {
  background: var(--3d-btn-primary-bg) !important;
  border-color: var(--primary, #087e85) !important;
  border-bottom-color: color-mix(in srgb, var(--primary-dark) 82%, #000000) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.14) !important;
  box-shadow: var(--3d-btn-primary-shadow) !important;
}

.btn.btn-primary:hover,
.btn.primary:hover,
button.primary:hover,
.button.primary:hover {
  background: var(--3d-btn-primary-hover-bg) !important;
  border-color: var(--primary-dark, #075f66) !important;
  border-bottom-color: color-mix(in srgb, var(--primary-dark) 75%, #000000) !important;
  color: #ffffff !important;
  box-shadow: var(--3d-btn-primary-hover-shadow) !important;
  transform: translateY(-0.5px) !important;
}

.btn.btn-primary:active,
.btn.primary:active,
button.primary:active,
.button.primary:active {
  transform: translateY(1px) !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.28), 0 1px 2px color-mix(in srgb, var(--primary) 20%, transparent) !important;
}

.btn.btn-secondary,
.btn.secondary,
.button.secondary {
  background: var(--3d-btn-bg) !important;
  border-color: var(--line, #e2eae9) !important;
  border-bottom-color: var(--line-strong, #c5d6d4) !important;
  color: var(--ink, #19383d) !important;
}

.btn.btn-secondary:hover,
.btn.secondary:hover,
.button.secondary:hover {
  background: var(--3d-btn-hover-bg) !important;
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line)) !important;
  color: var(--primary-dark, #075f66) !important;
}

.btn.btn-subtle,
.btn.subtle,
.link-button {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--primary, #087e85) !important;
  box-shadow: none !important;
  padding: 6px 10px !important;
}

.btn.btn-subtle:hover,
.btn.subtle:hover,
.link-button:hover {
  background: linear-gradient(180deg, #ffffff 0%, var(--tint, #e7f5f3) 100%) !important;
  border-color: color-mix(in srgb, var(--primary) 20%, var(--line)) !important;
  color: var(--primary-dark, #075f66) !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 1px 3px rgba(18, 56, 53, 0.06) !important;
}

.btn.btn-danger,
.btn.danger,
button.danger,
.button.danger {
  background: linear-gradient(180deg, #ffffff 0%, #fff7f7 100%) !important;
  border-color: color-mix(in srgb, var(--danger) 30%, var(--line)) !important;
  border-bottom-color: color-mix(in srgb, var(--danger) 42%, var(--line-strong)) !important;
  color: var(--danger-dark, #b91c1c) !important;
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -1.5px 0 rgba(220, 38, 38, 0.08), 0 1px 2px rgba(185, 28, 28, 0.05) !important;
}

.btn.btn-danger:hover,
.btn.danger:hover,
button.danger:hover,
.button.danger:hover {
  background: linear-gradient(180deg, #fffafa 0%, var(--danger-tint, #fef2f2) 100%) !important;
  border-color: color-mix(in srgb, var(--danger) 50%, var(--line)) !important;
  color: var(--danger-dark, #b91c1c) !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 3px 8px rgba(220, 38, 38, 0.12) !important;
}

/* Modificadores de Tamaño para Botones */
.btn.btn-sm,
.btn-sm {
  padding: 5px 10px !important;
  font-size: var(--font-sm, 12px) !important;
  border-radius: var(--radius-sm, 6px) !important;
  gap: 5px !important;
}

.btn.btn-lg,
.btn-lg {
  padding: 12px 24px !important;
  font-size: var(--font-md, 15px) !important;
  border-radius: var(--radius-lg, 12px) !important;
  gap: 10px !important;
}

.btn.btn-icon,
.btn-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: var(--radius-md, 8px) !important;
  display: inline-grid !important;
  place-items: center !important;
}

.btn.btn-icon.btn-sm,
.btn-icon.btn-sm {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: var(--radius-sm, 6px) !important;
}

/* 2. Switch Universal Accesible (.nexo-switch) con profundidad táctil 3D */
.nexo-switch {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  user-select: none !important;
  font-size: var(--font-base, 13.5px) !important;
  color: var(--ink, #19383d) !important;
  font-weight: 500 !important;
}

.nexo-switch input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

.nexo-switch-slider {
  position: relative !important;
  display: inline-block !important;
  width: 38px !important;
  height: 22px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--muted-light) 55%, var(--line)) 0%, color-mix(in srgb, var(--muted-light) 38%, var(--line)) 100%) !important;
  border-radius: var(--radius-pill, 999px) !important;
  box-shadow: inset 0 1.5px 3px rgba(18, 56, 53, 0.18), 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease !important;
  flex-shrink: 0 !important;
}

.nexo-switch-slider::before {
  position: absolute !important;
  content: "" !important;
  height: 16px !important;
  width: 16px !important;
  left: 3px !important;
  bottom: 3px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f3f7f6 100%) !important;
  border-radius: 50% !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1px 1px rgba(0, 0, 0, 0.12) !important;
}

.nexo-switch input[type="checkbox"]:checked + .nexo-switch-slider {
  background: linear-gradient(180deg, var(--primary-dark, #075f66) 0%, var(--primary, #087e85) 100%) !important;
  box-shadow: inset 0 1.5px 3px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

.nexo-switch input[type="checkbox"]:checked + .nexo-switch-slider::before {
  transform: translateX(16px) !important;
}

.nexo-switch input[type="checkbox"]:focus-visible + .nexo-switch-slider {
  outline: 2px solid var(--primary, #087e85) !important;
  outline-offset: 2px !important;
}

.nexo-switch.nexo-switch-sm .nexo-switch-slider {
  width: 32px !important;
  height: 18px !important;
}

.nexo-switch.nexo-switch-sm .nexo-switch-slider::before {
  height: 12px !important;
  width: 12px !important;
  left: 3px !important;
  bottom: 3px !important;
}

.nexo-switch.nexo-switch-sm input[type="checkbox"]:checked + .nexo-switch-slider::before {
  transform: translateX(14px) !important;
}

/* 2.1 Switch Táctil Universal Absoluto:
   Transformación completa del 100% de checkboxes de Klio.IM en interruptores táctiles modernos */
input[type="checkbox"]:not(.nexo-switch input):not(.gcal-toggle-input):not(.editor-switch-control input):not(.agenda-day-toggle input):not(.mail-item-check input):not(.mail-header-check input) {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 32px !important;
  height: 18px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--muted-light, #d1d5db) 60%, var(--line)) 0%, color-mix(in srgb, var(--muted-light, #d1d5db) 45%, var(--line)) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--line) 80%, #000) !important;
  border-radius: var(--radius-pill, 999px) !important;
  position: relative !important;
  outline: none !important;
  cursor: pointer !important;
  transition: background 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s ease, box-shadow 0.22s ease !important;
  box-shadow: inset 0 1px 2px rgba(18, 56, 53, 0.16), 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

input[type="checkbox"]:not(.nexo-switch input):not(.gcal-toggle-input):not(.editor-switch-control input):not(.agenda-day-toggle input):not(.mail-item-check input):not(.mail-header-check input)::before {
  content: "" !important;
  position: absolute !important;
  top: 1px !important;
  left: 1px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #ffffff 0%, #f4f6f6 100%) !important;
  box-shadow: 0 1.2px 2.5px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

input[type="checkbox"]:not(.nexo-switch input):not(.gcal-toggle-input):not(.editor-switch-control input):not(.agenda-day-toggle input):not(.mail-item-check input):not(.mail-header-check input):checked {
  background: linear-gradient(180deg, var(--primary-dark, #075f66) 0%, var(--primary, #087e85) 100%) !important;
  border-color: color-mix(in srgb, var(--primary-dark) 85%, #000) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

input[type="checkbox"]:not(.nexo-switch input):not(.gcal-toggle-input):not(.editor-switch-control input):not(.agenda-day-toggle input):not(.mail-item-check input):not(.mail-header-check input):checked::before {
  transform: translateX(14px) !important;
}

input[type="checkbox"]:not(.nexo-switch input):not(.gcal-toggle-input):not(.editor-switch-control input):not(.agenda-day-toggle input):not(.mail-item-check input):not(.mail-header-check input):focus-visible {
  outline: 2px solid var(--primary, #087e85) !important;
  outline-offset: 2px !important;
}

input[type="checkbox"]:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Versión compacta para celdas de tablas, badges y listas densas */
td input[type="checkbox"],
th input[type="checkbox"],
.contact-row-check,
.gmail-candidate-check,
.mail-select-all,
.mail-item-check,
.ui-switch-sm,
.ui-switch-sm input[type="checkbox"] {
  width: 26px !important;
  height: 15px !important;
}

td input[type="checkbox"]::before,
th input[type="checkbox"]::before,
.contact-row-check::before,
.gmail-candidate-check::before,
.mail-select-all::before,
.mail-item-check::before,
.ui-switch-sm::before,
.ui-switch-sm input[type="checkbox"]::before {
  width: 11px !important;
  height: 11px !important;
}

td input[type="checkbox"]:checked::before,
th input[type="checkbox"]:checked::before,
.contact-row-check:checked::before,
.gmail-candidate-check:checked::before,
.mail-select-all:checked::before,
.mail-item-check:checked::before,
.ui-switch-sm:checked::before,
.ui-switch-sm input[type="checkbox"]:checked::before {
  transform: translateX(11px) !important;
}

/* Alineación vertical armoniosa en etiquetas con texto */
label:has(> input[type="checkbox"]),
label.check,
label.checkbox,
.agenda-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

/* Versión compacta para tarjetas densas y tablas (.ui-switch-sm) */
input[type="checkbox"].ui-switch-sm,
.ui-switch-sm input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 30px !important;
  height: 17px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--muted-light, #d1d5db) 60%, var(--line)) 0%, color-mix(in srgb, var(--muted-light, #d1d5db) 45%, var(--line)) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--line) 80%, #000) !important;
  border-radius: var(--radius-pill, 999px) !important;
  position: relative !important;
  outline: none !important;
  cursor: pointer !important;
  transition: background 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s ease, box-shadow 0.22s ease !important;
  box-shadow: inset 0 1px 2px rgba(18, 56, 53, 0.16), 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

input[type="checkbox"].ui-switch-sm::before,
.ui-switch-sm input[type="checkbox"]::before {
  content: "" !important;
  position: absolute !important;
  top: 1px !important;
  left: 1px !important;
  width: 13px !important;
  height: 13px !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #ffffff 0%, #f4f6f6 100%) !important;
  box-shadow: 0 1.2px 2.5px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

input[type="checkbox"].ui-switch-sm:checked,
.ui-switch-sm input[type="checkbox"]:checked {
  background: linear-gradient(180deg, var(--primary-dark, #075f66) 0%, var(--primary, #087e85) 100%) !important;
  border-color: color-mix(in srgb, var(--primary-dark) 85%, #000) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

input[type="checkbox"].ui-switch-sm:checked::before,
.ui-switch-sm input[type="checkbox"]:checked::before {
  transform: translateX(13px) !important;
}

input[type="checkbox"].ui-switch-sm:focus-visible,
.ui-switch-sm input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--primary, #087e85) !important;
  outline-offset: 2px !important;
}

/* 3. Badges, Chips y Pastillas Universales con micro-bisel */
.badge,
.nexo-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 3px 9px !important;
  font-size: var(--font-xs, 11px) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  border-radius: var(--radius-pill, 999px) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 70%, #ffffff) 0%, var(--tint, #e7f5f3) 100%) !important;
  color: var(--primary, #087e85) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 1px 2px rgba(18, 56, 53, 0.04) !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.badge.badge-success,
.nexo-badge.badge-success {
  background: linear-gradient(180deg, #f5fefa 0%, var(--success-tint, #ecfdf5) 100%) !important;
  color: var(--success-dark, #059669) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

.badge.badge-warning,
.badge.warn,
.nexo-badge.badge-warning {
  background: linear-gradient(180deg, #fffdf4 0%, var(--warning-tint, #fffbeb) 100%) !important;
  color: var(--warning-dark, #d97706) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

.badge.badge-danger,
.badge.danger,
.nexo-badge.badge-danger {
  background: linear-gradient(180deg, #fff8f8 0%, var(--danger-tint, #fef2f2) 100%) !important;
  color: var(--danger-dark, #b91c1c) !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
}

.badge.badge-neutral,
.badge.neutral,
.nexo-badge.badge-neutral {
  background: linear-gradient(180deg, #ffffff 0%, var(--bg, #f3f7f6) 100%) !important;
  color: var(--muted, #526b70) !important;
  border-color: var(--line, #e2eae9) !important;
}

.badge.badge-square,
.nexo-badge.badge-square {
  border-radius: var(--radius-sm, 6px) !important;
}

/* 4. Inputs Compactos y Estándar Homogéneos */
.input-compact,
input.input-compact,
select.input-compact {
  padding: 6px 10px !important;
  font-size: var(--font-sm, 12px) !important;
  border-radius: var(--radius-sm, 6px) !important;
  border: 1px solid var(--line, #e2eae9) !important;
  border-top-color: var(--line-strong, #c5d6d4) !important;
  background: var(--3d-recessed-bg, #ffffff) !important;
  color: var(--ink, #19383d) !important;
  box-shadow: var(--3d-recessed-shadow) !important;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease !important;
}

.input-compact:focus,
input.input-compact:focus,
select.input-compact:focus {
  background: #ffffff !important;
  border-color: var(--primary, #087e85) !important;
  box-shadow: inset 0 1px 1px rgba(18, 56, 53, 0.02), 0 0 0 3px var(--primary-glow, rgba(8, 126, 133, 0.16)) !important;
  outline: none !important;
}

/* ==========================================================================
   FASE 3: UTILIDADES DE LAYOUT ELÁSTICO ANCLADO AL VIEWPORT
   ========================================================================== */

/* Contenedor de módulo elástico completo anclado al viewport */
.workspace-elastic,
.elastic-viewport-module {
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
}

/* Barra superior / Toolbar fija sin scroll */
.workspace-elastic-header,
.elastic-toolbar {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  background: var(--surface, #ffffff) !important;
  border-bottom: 1px solid var(--line, #e2eae9) !important;
  padding: 12px 24px !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
}

/* Panel de desplazamiento interno dedicado (sin doble scrollbar) */
.workspace-elastic-body,
.workspace-panel-scroll,
.elastic-scroll-pane {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 24px 28px !important;
  box-sizing: border-box !important;
  scrollbar-gutter: stable !important;
}

/* Barra inferior o pie de acciones fijo (Above the fold) */
.workspace-elastic-footer,
.elastic-footer {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  background: var(--surface, #ffffff) !important;
  border-top: 1px solid var(--line, #e2eae9) !important;
  padding: 14px 28px !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
  box-shadow: 0 -4px 14px rgba(18, 56, 53, 0.04) !important;
}

/* Layout dividido elástico (Split Pane) */
.workspace-elastic-split {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.4fr) !important;
  overflow: hidden !important;
  gap: 0 !important;
}

.workspace-elastic-split > * {
  min-height: 0 !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   Modales de Selección de Medios / Imágenes / Galería (Klio.IM Design Tokens)
   ========================================================================== */
#modal.avatar-gallery-picker-dialog,
dialog.avatar-gallery-picker-dialog {
  max-width: 960px !important;
  width: min(960px, calc(100vw - 32px)) !important;
  height: min(85vh, 760px) !important;
  min-height: min(85vh, 760px) !important;
  max-height: 85vh !important;
  border-radius: var(--radius-xl, 16px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 24px 70px rgba(18, 56, 53, 0.22) !important;
}

#modal.avatar-gallery-picker-dialog #modal-body,
dialog.avatar-gallery-picker-dialog #modal-body,
#modal.avatar-gallery-picker-dialog #dialog-form,
dialog.avatar-gallery-picker-dialog #dialog-form,
#modal.avatar-gallery-picker-dialog .modal-content,
dialog.avatar-gallery-picker-dialog .modal-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

#modal.avatar-gallery-picker-dialog .modal-header,
dialog.avatar-gallery-picker-dialog .modal-header {
  flex-shrink: 0 !important;
}

#modal.avatar-gallery-picker-dialog .modal-scroll-body,
dialog.avatar-gallery-picker-dialog .modal-scroll-body {
  padding: 16px 20px 0 !important;
  overflow: hidden !important;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  scrollbar-gutter: auto !important;
}

#modal.avatar-gallery-picker-dialog .modal-scroll-body::-webkit-scrollbar,
dialog.avatar-gallery-picker-dialog .modal-scroll-body::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

#modal.avatar-gallery-picker-dialog .form-actions,
dialog.avatar-gallery-picker-dialog .form-actions {
  flex-shrink: 0 !important;
  padding: 14px 24px !important;
  margin: 0 !important;
  border-top: 1px solid var(--line, #e2eae9) !important;
  background: var(--surface, #ffffff) !important;
}

.avatar-picker-container {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  gap: 12px !important;
  overflow: hidden !important;
}

.avatar-picker-toolbar {
  flex-shrink: 0 !important;
  margin-bottom: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg, #f3f7f6);
  border: 1px solid var(--line, #e2eae9);
  border-radius: var(--radius-md, 8px);
  padding: 10px 14px;
}

.avatar-picker-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.avatar-picker-tab-btn {
  padding: 5px 12px;
  border-radius: var(--radius-sm, 6px);
  font-size: 11.5px;
  font-weight: 500;
  border: 1px solid var(--line, #e2eae9);
  background: var(--surface, #ffffff);
  color: var(--muted, #526b70);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.avatar-picker-tab-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  flex-shrink: 0;
}

.avatar-picker-tab-btn:hover {
  background: var(--tint, #e7f5f3);
  color: var(--ink, #19383d);
  border-color: var(--line, #e2eae9);
}

.avatar-picker-tab-btn.active {
  background: var(--primary, #087e85);
  border-color: var(--primary, #087e85);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.avatar-picker-tab-btn .badge-count {
  font-size: 10.5px;
  padding: 1px 5px;
  border-radius: var(--radius-pill, 999px);
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
}

.avatar-picker-tab-btn.active .badge-count {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.avatar-picker-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.avatar-picker-toolbar .gallery-type-pills {
  margin: 0;
  display: flex;
  gap: 4px;
  align-items: center;
  background: var(--tint, #e7f5f3);
  padding: 3px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--line, #e2eae9);
}

.gallery-type-btn {
  padding: 4px 10px;
  border-radius: var(--radius-xs, 4px);
  font-size: var(--font-xs, 11px);
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--muted, #526b70);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.gallery-type-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  flex-shrink: 0;
}

.gallery-type-btn:hover {
  background: rgba(255, 255, 255, 0.65);
  color: var(--ink, #19383d);
}

.gallery-type-btn.active {
  background: #ffffff;
  color: var(--primary-dark, #075f66);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

.avatar-picker-search-wrap {
  position: relative;
  flex: 1;
  max-width: 320px;
  min-width: 180px;
}

.avatar-picker-search-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted, #526b70);
  pointer-events: none;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
}

.avatar-picker-search-icon svg {
  width: 13px;
  height: 13px;
}

.avatar-picker-search-input {
  width: 100%;
  height: 32px;
  padding: 0 10px 0 28px;
  border: 1px solid var(--line, #e2eae9);
  border-radius: var(--radius-sm, 6px);
  font-size: var(--font-sm, 12px);
  color: var(--ink, #19383d);
  background: var(--surface, #ffffff);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.avatar-picker-search-input:focus {
  border-color: var(--primary, #087e85);
  box-shadow: 0 0 0 3px var(--primary-glow, rgba(8, 126, 133, 0.16));
}

.avatar-picker-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  grid-auto-rows: 258px !important;
  align-content: start !important;
  align-items: start !important;
  gap: 14px !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 4px 6px 16px 2px !important;
  scrollbar-gutter: stable !important;
  box-sizing: border-box !important;
}

.avatar-picker-no-results {
  grid-column: 1 / -1 !important;
  text-align: center !important;
  padding: 60px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--muted, #526b70) !important;
}

.avatar-picker-card {
  background: var(--surface, #ffffff) !important;
  border: 1px solid var(--line, #e2eae9) !important;
  border-radius: var(--radius-lg, 12px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 10px !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
  position: relative !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
  height: 258px !important;
  min-height: 258px !important;
  max-height: 258px !important;
}

.avatar-picker-card:hover {
  border-color: var(--primary, #087e85) !important;
  box-shadow: 0 4px 14px var(--primary-glow, rgba(8, 126, 133, 0.16)) !important;
  transform: translateY(-2px) !important;
}

.avatar-picker-card.is-active-avatar,
.avatar-picker-card.is-selected {
  border: 2px solid var(--primary, #087e85) !important;
  box-shadow: 0 0 0 1px var(--primary, #087e85), 0 4px 12px var(--primary-glow, rgba(8, 126, 133, 0.16)) !important;
}

.avatar-picker-thumb-wrap {
  position: relative !important;
  width: 100% !important;
  height: 125px !important;
  min-height: 125px !important;
  max-height: 125px !important;
  background: var(--ink, #19383d) !important;
  border-radius: var(--radius-sm, 6px) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.avatar-picker-thumb-wrap img,
.avatar-picker-thumb-wrap video {
  width: 100% !important;
  height: 125px !important;
  min-height: 125px !important;
  max-height: 125px !important;
  object-fit: cover !important;
  display: block !important;
}

.avatar-picker-badge-active {
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--primary, #087e85);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-xs, 4px);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.avatar-picker-badge-active svg {
  width: 10px;
  height: 10px;
}

.avatar-picker-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.avatar-picker-chips {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.avatar-picker-chips .media-chip {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--radius-xs, 4px);
  background: var(--tint, #e7f5f3);
  color: var(--primary, #087e85);
  font-weight: 600;
}

.avatar-picker-chips .media-chip.chip-video {
  background: #ede9fe;
  color: #6d28d9;
}

.avatar-picker-chips .media-chip.chip-drive {
  background: #e0f2fe;
  color: #0369a1;
}

.avatar-picker-name {
  font-size: var(--font-sm, 12px);
  font-weight: 700;
  color: var(--ink, #19383d);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-height: 1.3;
}

.avatar-picker-sub {
  font-size: var(--font-xs, 11px);
  color: var(--muted, #526b70);
  display: block;
}

.avatar-picker-card-action {
  margin-top: auto;
  padding-top: 4px;
}

.avatar-picker-selected-indicator {
  width: 100% !important;
  font-size: 11.5px !important;
  padding: 6px !important;
  color: var(--primary-dark, var(--primary, #087e85)) !important;
  border: 1px solid color-mix(in srgb, var(--primary, #087e85) 35%, transparent) !important;
  background: var(--tint, #e7f5f3) !important;
  cursor: default !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm, 6px) !important;
}






.sidebar-user-id-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: color-mix(in srgb, var(--primary) 8%, #ffffff) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line)) !important;
  border-radius: var(--radius-pill, 999px) !important;
  padding: 2px 4px 2px 8px !important;
  font-size: 11px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  color: var(--primary-dark) !important;
  cursor: pointer !important;
  transition: all 0.16s ease-in-out !important;
  line-height: 1.3 !important;
  user-select: none !important;
}

.sidebar-user-id-badge:hover {
  background: var(--tint) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 1px 4px rgba(8, 126, 133, 0.14) !important;
}

.sidebar-user-id-badge .sidebar-id-label {
  font-size: 9px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

.sidebar-user-id-badge .sidebar-id-val {
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: var(--ink) !important;
}

.sidebar-copy-id-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 19px !important;
  height: 19px !important;
  padding: 0 !important;
  background: #ffffff !important;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line)) !important;
  border-radius: 50% !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  transition: all 0.15s ease-in-out !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  flex-shrink: 0 !important;
  margin-left: 1px !important;
}

.sidebar-user-id-badge:hover .sidebar-copy-id-btn,
.sidebar-copy-id-btn:hover {
  background: #ffffff !important;
  border-color: var(--primary) !important;
  color: var(--primary-dark) !important;
  box-shadow: 0 2px 5px rgba(8, 126, 133, 0.16) !important;
  transform: scale(1.08) !important;
}

.sidebar-copy-id-btn:active {
  transform: scale(0.92) !important;
}

/* ==========================================================================
   FASE 4: SISTEMA UNIVERSAL DE MICRO-PROFUNDIDAD 3D TÁCTIL (KLIO.IM)
   Iluminación cenital (90°), biseles especulares superiores, labios de apoyo
   inferiores, cavidades para campos de entrada y elevación multicapa.
   ========================================================================== */

/* Modificadores de intensidad de relieve 3D (ajustables desde Apariencia) */
:root[data-depth="crisp"] {
  --3d-card-shadow: inset 0 1.5px 0 #ffffff, inset 0 -1px 0 rgba(18,56,53,0.06), 0 2px 4px rgba(18,56,53,0.065), 0 8px 20px -4px rgba(18,56,53,0.095);
  --3d-btn-shadow: inset 0 1.5px 0 #ffffff, inset 0 -2px 0 rgba(18,56,53,0.09), 0 2px 4px rgba(18,56,53,0.075), 0 4px 8px -2px rgba(18,56,53,0.06);
  --3d-btn-primary-shadow: inset 0 1.5px 0 rgba(255,255,255,0.42), inset 0 -2px 0 rgba(0,0,0,0.26), 0 3px 7px color-mix(in srgb,var(--primary) 34%,transparent), 0 8px 18px -3px color-mix(in srgb,var(--primary) 26%,transparent);
  --3d-recessed-shadow: inset 0 2px 4px rgba(18,56,53,0.075), inset 0 0 0 1px rgba(18,56,53,0.025), 0 1px 0 rgba(255,255,255,0.95);
}

:root[data-depth="minimal"] {
  --3d-card-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 1px 3px rgba(18,56,53,0.035);
  --3d-btn-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(18,56,53,0.04);
  --3d-btn-primary-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 5px color-mix(in srgb,var(--primary) 22%,transparent);
  --3d-recessed-shadow: inset 0 1px 2px rgba(18,56,53,0.035), 0 1px 0 rgba(255,255,255,0.8);
}

/* 1. Marca e Insignia Principal (.brand-mark) con acabado 3D esmaltado */
.brand-mark {
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 82%, #ffffff) 0%, var(--primary) 52%, var(--primary-dark) 100%) !important;
  box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.42),
              inset 0 -2px 2px rgba(0, 0, 0, 0.22),
              0 3px 8px color-mix(in srgb, var(--primary) 32%, transparent),
              0 1px 2px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid color-mix(in srgb, var(--primary-dark) 65%, transparent) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important;
}

/* 2. Sidebar, Navegación y Topbar con profundidad arquitectónica */
.sidebar {
  background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--tint-subtle) 28%, #ffffff) 100%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.8), 2px 0 14px -4px rgba(18, 56, 53, 0.045);
}

.sidebar nav {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  align-content: flex-start !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.sidebar .sidebar-bottom {
  flex-shrink: 0 !important;
}

.sidebar nav button {
  flex-shrink: 0 !important;
  height: auto !important;
  min-height: 40px !important;
  padding: 10px 13px !important;
  font-size: var(--font-base, 13.5px) !important;
  gap: 12px !important;
  white-space: nowrap !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 8px);
  background: transparent;
  box-shadow: none;
  transition: all 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar nav button .icon {
  width: 19px !important;
  height: 19px !important;
}

.sidebar nav button:hover:not(.active) {
  background: linear-gradient(180deg, #ffffff 0%, var(--tint-subtle) 100%);
  border-color: color-mix(in srgb, var(--primary) 16%, var(--line));
  color: var(--ink);
  box-shadow: inset 0 1px 0 #ffffff, 0 1px 3px rgba(18, 56, 53, 0.04);
  transform: translateX(1px);
}

.sidebar nav button.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 72%, #ffffff) 0%, var(--tint) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--line)) !important;
  border-bottom-color: color-mix(in srgb, var(--primary) 36%, var(--line-strong)) !important;
  color: var(--primary-dark) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88),
              inset 0 -1px 0 color-mix(in srgb, var(--primary) 10%, transparent),
              0 2px 6px color-mix(in srgb, var(--primary) 12%, transparent) !important;
}

.sidebar nav button.active .icon {
  filter: drop-shadow(0 1px 1px rgba(8, 126, 133, 0.12));
}

.sidebar .sidebar-user-card,
.sidebar-user-card.userbox {
  background: linear-gradient(180deg, #ffffff 0%, var(--tint-subtle) 100%) !important;
  border: 1px solid var(--line) !important;
  border-bottom-color: var(--line-strong) !important;
  box-shadow: var(--3d-card-shadow) !important;
}

.sidebar .sidebar-user-card:hover,
.sidebar-user-card.userbox:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line)) !important;
  box-shadow: var(--3d-card-hover-shadow) !important;
}

.topbar {
  background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--tint-subtle) 22%, #ffffff) 100%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.7), 0 2px 10px -2px rgba(18, 56, 53, 0.04);
}

.topbar-context {
  flex: 0 0 auto !important;
  min-width: fit-content !important;
  max-width: 48% !important;
}

.module-heading {
  min-width: fit-content !important;
}

.module-heading h1 {
  font-size: 18px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.35px !important;
  margin: 0 0 3px !important;
  white-space: nowrap !important;
}

.module-heading p {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.topbar-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.topbar-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.topbar-sync {
  box-shadow: var(--3d-recessed-shadow);
  background: var(--3d-recessed-bg);
}

/* 3. Botones Nativos Generales (que no llevan clase .btn) con Relieve Táctil 3D */
button:not(.modal-close-btn):not(.link-button):not(.btn-subtle):not(.subtle):not([role="tab"]):not(.tab):not(.dash-period-btn):not(.timeline-filter-pill):not(.gallery-type-btn):not(.doc-subtab-btn):not(.friends-subtab-btn):not(.reader-tab-btn):not(.catalog-table th button):not(#storage-breadcrumbs button):not(.mail-compose-btn):not(.primary):not(.active):not(.is-active) {
  border: 1px solid var(--line);
  border-bottom-color: var(--line-strong);
  background: var(--3d-btn-bg);
  box-shadow: var(--3d-btn-shadow);
  transition: transform 0.14s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.16s ease,
              background 0.16s ease,
              border-color 0.16s ease,
              color 0.16s ease;
}

button:not(.modal-close-btn):not(.link-button):not(.btn-subtle):not(.subtle):not([role="tab"]):not(.tab):not(.dash-period-btn):not(.timeline-filter-pill):not(.gallery-type-btn):not(.doc-subtab-btn):not(.friends-subtab-btn):not(.reader-tab-btn):not(.catalog-table th button):not(#storage-breadcrumbs button):not(.active):not(.is-active):hover:not(:disabled) {
  background: var(--3d-btn-hover-bg);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
  border-bottom-color: color-mix(in srgb, var(--primary) 42%, var(--line-strong));
  box-shadow: var(--3d-btn-hover-shadow);
  transform: translateY(-0.5px);
}

button:not(.modal-close-btn):not(.link-button):not(.btn-subtle):not(.subtle):not([role="tab"]):not(.tab):not(.dash-period-btn):not(.timeline-filter-pill):not(.gallery-type-btn):not(.doc-subtab-btn):not(.friends-subtab-btn):not(.reader-tab-btn):not(.catalog-table th button):not(#storage-breadcrumbs button):not(.active):not(.is-active):active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: var(--3d-btn-active-shadow);
}

/* 4. Inputs, Selects y Textareas Universales con Micro-Cavidad 3D (Recessed) */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]):not(.unit-input input),
textarea,
select {
  border: 1px solid var(--line);
  border-top-color: var(--line-strong);
  background: var(--3d-recessed-bg);
  box-shadow: var(--3d-recessed-shadow);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]):not(.unit-input input):hover:not(:disabled):not(:focus),
textarea:hover:not(:disabled):not(:focus),
select:hover:not(:disabled):not(:focus) {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line-strong));
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]):not(.unit-input input):focus,
textarea:focus,
select:focus {
  background: #ffffff;
  border-color: var(--primary);
  box-shadow: inset 0 1px 2px rgba(18, 56, 53, 0.03),
              0 0 0 3px var(--primary-glow),
              0 2px 6px rgba(18, 56, 53, 0.05);
  outline: none;
}

/* 5. Tarjetas, Contenedores y Superficies Elevadas (Nivel 1 de Profundidad) */
.card,
.stat,
.timeline-entry,
.settings-connection-card,
.backup-stat-card,
.backup-hero-card,
.backup-patients-card,
.sub-plan-card,
.support-stat-card,
.storage-metric-card,
.storage-explorer,
.profile-hero,
.profile-section-nav,
.profile-section-panel,
.profile-record,
.contacts-shell,
.mail-shell,
.reader-identity,
.reader-section,
.closed-documents-header,
.closed-doc-section,
.diagnosis-assistant,
.diagnosis-candidate,
.order-row,
.patient-form-section {
  border: 1px solid var(--line);
  border-bottom-color: var(--line-strong);
  box-shadow: var(--3d-card-shadow);
}

.card-header {
  background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--tint-subtle) 38%, #ffffff) 100%);
  box-shadow: inset 0 1px 0 #ffffff;
}

.stat {
  background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--tint-subtle) 30%, #ffffff) 100%);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease, border-color 0.18s ease;
}

.stat:hover {
  transform: translateY(-1.5px);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
  box-shadow: var(--3d-card-hover-shadow);
}

/* 6. Cajas de Iconos con Relieve 3D Tipo Tecla Esmaltada */
.stat .stat-icon,
.settings-feature-icon,
.backup-stat-icon,
.support-stat-icon,
.sub-plan-badge-icon,
.storage-card-badge,
.storage-header-icon,
.gallery-privacy-icon,
.closed-docs-main-icon,
.clinical-section legend span,
.step .number,
.note-author-icon,
.reader-patient > .icon,
.profile-social-badge {
  box-shadow: var(--3d-icon-box-shadow);
  border: 1px solid color-mix(in srgb, currentColor 16%, rgba(255, 255, 255, 0.6));
}

/* 7. Modales y Diálogos (<dialog>) con Marco Biselado 3D y Profundidad Multicapa */
dialog,
#modal,
#agenda-share-dialog,
#study-lightbox,
#patient-camera-modal {
  border: 1px solid color-mix(in srgb, var(--line-strong) 88%, var(--primary) 12%) !important;
  box-shadow: var(--3d-modal-shadow) !important;
}

dialog::backdrop {
  background: rgba(16, 42, 48, 0.42);
  backdrop-filter: blur(5px) saturate(1.1);
}

.modal-header,
#modal.clinical-dialog .clinical-modal-header,
.reader-header,
.catalog-dialog .modal-header {
  background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--tint-subtle) 35%, #ffffff) 100%) !important;
  border-bottom: 1px solid var(--line-strong) !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 2px 8px -2px rgba(18, 56, 53, 0.05) !important;
}

dialog .form-actions,
.modal-content .form-actions,
#modal.clinical-dialog .form-actions.clinical-form-actions {
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint-subtle) 25%, #ffffff) 0%, #ffffff 100%) !important;
  border-top: 1px solid var(--line-strong) !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 -4px 14px rgba(18, 56, 53, 0.045) !important;
}

/* 8. Avisos (.notice), Notas (.note) y Tablas con Micro-Bisel */
.notice {
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 3px rgba(18, 56, 53, 0.03);
}

.notice.warning {
  border-color: rgba(245, 158, 11, 0.28);
}

.note {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 6px rgba(18, 56, 53, 0.04);
}

th {
  background: linear-gradient(180deg, #ffffff 0%, var(--tint-subtle) 100%);
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 var(--line);
}

@media print {
  .card,
  .stat,
  .timeline-entry,
  dialog,
  button,
  input,
  select,
  textarea {
    box-shadow: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   FASE 5: ARQUITECTURA RESPONSIVE PROFESIONAL MÓVIL Y TABLET (KLIO.IM)
   ========================================================================== */

.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.topbar-patient-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.topbar-patient-meta {
  flex: 1;
  min-width: 0;
}

@media (max-width: 1024px) {
  .shell {
    grid-template-columns: 196px 1fr;
  }
  .sidebar {
    width: 196px;
    padding: 20px 12px;
  }
  .topbar {
    padding: 8px 20px;
    height: auto;
    min-height: 72px;
  }
  .content {
    padding: 20px;
  }
  .stats {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  .module-heading p {
    white-space: normal;
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .workspace-elastic-split {
    grid-template-columns: 1fr !important;
    height: auto !important;
    overflow: visible !important;
  }
  .workspace-elastic-split > * {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (max-width: 760px) {
  html,
  body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #app,
  .shell,
  .main {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Cabecera de aplicación móvil compacta y organizada en 2 filas */
  .sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 45 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 8px 12px 6px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line-strong) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(10px) saturate(1.1) !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 6px 10px !important;
    box-shadow: 0 2px 10px rgba(18, 56, 53, 0.06) !important;
  }

  .sidebar .brand {
    margin: 0 !important;
    font-size: 16.5px !important;
    gap: 8px !important;
  }

  .sidebar .brand-mark {
    width: 30px !important;
    height: 30px !important;
    font-size: 22px !important;
    border-radius: 8px !important;
  }

  .sidebar .brand small {
    font-size: 8px !important;
    letter-spacing: 1.1px !important;
    margin-top: 1px !important;
  }

  .sidebar-bottom {
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
  }

  .sidebar .sidebar-user-card,
  .sidebar-user-card.userbox {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 3px 6px 3px 8px !important;
    gap: 8px !important;
    border-radius: var(--radius-md) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-shadow: none !important;
    background: var(--tint-subtle) !important;
  }

  .sidebar-user-profile {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 7px !important;
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .sidebar-avatar-wrap {
    margin: 0 !important;
    width: 28px !important;
    height: 28px !important;
    padding: 1.5px !important;
  }

  .sidebar-user-card .avatar {
    font-size: 11px !important;
    border-width: 1px !important;
  }

  .sidebar-avatar-wrap .user-status-dot {
    width: 8px !important;
    height: 8px !important;
    border-width: 1.5px !important;
    bottom: 0 !important;
    right: 0 !important;
  }

  .sidebar-user-card .sidebar-user-meta.user-name {
    text-align: left !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .sidebar-user-card .sidebar-user-meta.user-name > br,
  .sidebar-user-card .sidebar-user-meta.user-name > small {
    display: none !important;
  }

  .sidebar-user-id-badge {
    padding: 1px 3px 1px 6px !important;
    font-size: 9.5px !important;
    gap: 3px !important;
  }

  .sidebar-copy-id-btn {
    width: 16px !important;
    height: 16px !important;
  }

  .sidebar-user-actions {
    border-top: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }

  .sidebar-logout-btn {
    width: auto !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
    gap: 4px !important;
  }

  .sidebar nav {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 5px 0 2px !important;
    border-top: 1px solid var(--line-subtle) !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .sidebar nav::-webkit-scrollbar {
    display: none !important;
  }

  .sidebar nav button {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
    gap: 6px !important;
    border-radius: var(--radius-md) !important;
  }

  .sidebar nav button .icon {
    width: 15px !important;
    height: 15px !important;
  }

  /* Topbar contextual móvil limpia y sin cortes */
  .topbar {
    min-height: 0 !important;
    height: auto !important;
    padding: 10px 14px !important;
    align-items: stretch !important;
    gap: 8px !important;
    flex-direction: column !important;
    z-index: 25 !important;
  }

  .topbar-context,
  .topbar-right {
    width: 100% !important;
    min-width: 0 !important;
  }

  .module-heading h1 {
    font-size: 17px !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
  }

  .module-heading p {
    font-size: 11px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }

  .module-context-copy {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .topbar-patient-profile {
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .topbar-right {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .topbar-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .topbar-actions button {
    font-size: 11.5px !important;
    padding: 7px 10px !important;
    min-width: 0 !important;
  }

  /* Contenedor principal y utilidades elásticas sin recorte en móvil */
  .content,
  .content.home-content,
  .content.patient-content,
  .content.has-elastic-chat,
  .content.agenda-content,
  .content.gallery-content,
  .content.mail-content,
  .content.contacts-content {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    padding: 14px !important;
  }

  .workspace-elastic,
  .elastic-viewport-module {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .workspace-elastic-header,
  .elastic-toolbar {
    flex-wrap: wrap !important;
    padding: 10px 14px !important;
    gap: 8px !important;
  }

  .workspace-elastic-body,
  .workspace-panel-scroll,
  .elastic-scroll-pane {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    padding: 14px !important;
  }

  .workspace-elastic-footer,
  .elastic-footer {
    flex-wrap: wrap !important;
    padding: 10px 14px !important;
    gap: 8px !important;
  }

  .workspace-elastic-split {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
    gap: 14px !important;
  }

  /* Formularios, tarjetas, grillas y tablas móviles */
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .span-2 {
    grid-column: 1 / -1 !important;
  }

  .stats,
  .grid,
  .template-grid,
  .details {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .card {
    margin-bottom: 14px;
  }

  .card-header {
    padding: 14px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .card-body {
    padding: 16px;
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .toolbar .search {
    max-width: 100%;
  }

  /* Diálogos y Modales universales adaptados a pantallas móviles */
  dialog,
  #modal,
  #agenda-share-dialog {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    max-height: 92dvh !important;
    margin: auto !important;
    border-radius: var(--radius-lg) !important;
  }

  .modal-header {
    padding: 12px 14px !important;
    gap: 8px !important;
  }

  .modal-header h2 {
    font-size: 15.5px !important;
    line-height: 1.25 !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  .modal-scroll-body,
  .modal-content:not(:has(.modal-scroll-body)) {
    padding: 14px !important;
  }

  dialog .form-actions,
  .modal-content .form-actions {
    padding: 10px 14px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Selector de avatares / galería en móvil */
  #modal.avatar-gallery-picker-dialog,
  dialog.avatar-gallery-picker-dialog {
    width: calc(100vw - 12px) !important;
    height: 90dvh !important;
    max-height: 90dvh !important;
  }

  .avatar-picker-toolbar {
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  .avatar-picker-search-wrap {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .avatar-picker-grid {
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 10px !important;
  }

  .avatar-picker-card {
    height: auto !important;
    min-height: 210px !important;
    max-height: none !important;
  }
}

@media (max-width: 480px) {
  .sidebar-logout-btn span {
    display: none !important;
  }
  .sidebar-logout-btn {
    padding: 6px !important;
  }
  .topbar-actions button {
    flex: 1 1 auto;
  }
  .tabs button,
  .tabs .tab,
  .clinical-dialog-tabs button,
  .catalog-tabs button,
  .gcal-config-tabs button,
  .gcal-tab-btn {
    padding: 7px 12px !important;
    font-size: 12px !important;
  }
}

/* ==========================================================================
   PILA UNIVERSAL DE MODALES (MODAL STACK) PARA TODA LA PLATAFORMA
   ========================================================================== */
dialog.modal-stack-dialog {
  border: 1px solid color-mix(in srgb, var(--line-strong, var(--line)) 88%, var(--primary) 12%) !important;
  box-shadow: var(--3d-modal-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.4)) !important;
  border-radius: var(--radius-xl, 16px) !important;
  background: var(--white, #ffffff) !important;
  color: var(--ink, #0f172a) !important;
  padding: 0 !important;
  width: min(760px, calc(100vw - 30px)) !important;
  max-height: 90vh !important;
  overflow: hidden !important;
  outline: none !important;
}

dialog.modal-stack-dialog[open] {
  display: flex !important;
  flex-direction: column !important;
}

dialog.modal-stack-dialog::backdrop {
  background: rgba(16, 42, 48, 0.45) !important;
  backdrop-filter: blur(4px) saturate(1.1) !important;
}

dialog.modal-stack-dialog #modal-body,
dialog.modal-stack-dialog .modal-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

dialog.modal-stack-dialog .modal-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

dialog.modal-stack-dialog .modal-scroll-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

dialog.modal-stack-dialog .form-actions {
  flex-shrink: 0 !important;
}

/* ==========================================================================
   FLUIDEZ VISUAL, ESTABILIDAD DE SCROLL Y MICRO-INTERACCIONES (HYBRID UX)
   ========================================================================== */
#content {
  scrollbar-gutter: stable;
}

@keyframes klioDialogIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

dialog[open],
dialog.modal-stack-dialog[open] {
  animation: klioDialogIn 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}

.dash-kpi-card,
.nav button,
.btn,
button.primary,
button.secondary {
  transition: transform 0.14s ease, box-shadow 0.18s ease, background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.dash-kpi-card:hover {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  dialog[open],
  dialog.modal-stack-dialog[open] {
    animation: none !important;
  }
  .dash-kpi-card,
  .nav button,
  .btn,
  button.primary,
  button.secondary {
    transition: none !important;
  }
}

/* ==========================================================================
   SISTEMA UNIFICADO DE BOTONES Y RADIOS (CONSISTENCIA GLOBAL Y CORP)
   ========================================================================== */
.topbar-actions button,
.topbar-actions .button,
.topbar-actions a.button,
.heading .actions button,
.heading .actions .button {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  font-size: 12.5px !important;
  line-height: 1.2 !important;
  border-radius: var(--radius-md, 8px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

.form-actions button,
.form-actions .button,
.settings-connection-actions button,
.settings-connection-actions .button,
.settings-connection-actions a.button,
.corp-actions button,
.corp-actions .button,
.corp-toolbar-actions button,
.corp-toolbar-actions .button {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  border-radius: var(--radius-md, 8px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  white-space: nowrap !important;
}

.btn-sm,
.button.sm,
.actions button,
.actions .button {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 11px !important;
  font-size: 12px !important;
  border-radius: var(--radius-md, 8px) !important;
}

/* Densidad óptima y aprovechamiento de pantalla en Registro / Auditoría */
#audit-results {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#audit-results .table-wrap {
  flex: 1 1 auto;
}
#audit-results table {
  width: 100%;
  table-layout: fixed;
}
#audit-results table th:nth-child(1),
#audit-results table td:nth-child(1) {
  width: 175px;
}
#audit-results table th:nth-child(2),
#audit-results table td:nth-child(2) {
  width: 24%;
}
#audit-results table th:nth-child(3),
#audit-results table td:nth-child(3) {
  width: 24%;
}
#audit-results table th,
#audit-results table td {
  padding: 7px 14px;
  font-size: 12.5px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}