:root {
  --om-demo-ink: #10231f;
  --om-demo-muted: #6b7d74;
  --om-demo-line: #dfe9e4;
  --om-demo-bg: #f3f8f5;
  --om-demo-panel: #ffffff;
  --om-demo-mint: #0b8f71;
  --om-demo-teal: #0d5f66;
  --om-demo-shadow: 0 18px 46px rgba(16, 33, 59, .08);
}

body {
  background: var(--om-demo-bg);
  color: var(--om-demo-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.login {
  align-items: center;
  justify-items: center;
  padding: 24px 14px;
  background: linear-gradient(90deg, rgba(232, 249, 241, .95) 0%, rgba(255, 255, 255, .96) 52%, rgba(245, 253, 249, .95) 100%);
}

.login-card {
  width: min(390px, 100%);
  padding: 24px 18px;
  border: 1px solid #e8edf3;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--om-demo-shadow);
  text-align: left;
}

.login-logo {
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border-radius: 14px;
  background: linear-gradient(155deg, #0fc098, #08947e);
  box-shadow: 0 12px 24px rgba(7, 138, 118, .22);
}

.login-eyebrow {
  color: #5f6b7a;
  font-size: 13px;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}

.login-title {
  color: #079477;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
}

.login-sub {
  color: #5f6b7a;
  font-size: 16px;
  text-align: center;
  margin-bottom: 24px;
}

.login-card::before {
  content: "ACCESO SEGURO";
  min-height: 70px;
  display: grid;
  grid-template-rows: auto auto;
  place-items: center;
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid #f6c444;
  border-radius: 8px;
  background: #fffaf0;
  color: #d65f00;
  font-size: 14px;
  font-weight: 800;
}

.mobile-menu-toggle,
.mobile-nav-overlay {
  display: none;
}

input[type=text],
input[type=email],
input[type=password],
input[type=search],
input[type=datetime-local],
input[type=date],
select,
textarea {
  min-height: 50px;
  border-color: #d9e1ea;
  border-radius: 11px;
  background: #fff;
  box-shadow: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #0fa88e;
  box-shadow: 0 0 0 4px rgba(15, 168, 142, .12);
}

.btn,
.module-tab,
.connect-btn {
  border-radius: 8px;
}

.btn-primary,
.demo-action,
.connect-btn {
  background: linear-gradient(90deg, #16bd8d, #099681);
  box-shadow: 0 12px 20px rgba(13, 159, 135, .24);
}

header {
  background: rgba(247, 251, 249, .96);
  border-bottom: 1px solid var(--om-demo-line);
}

.brand-mark {
  border-radius: 8px;
  background: var(--om-demo-teal);
}

.brand-title,
.page-title,
.card-title {
  letter-spacing: 0;
}

.module-tab {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--om-demo-muted);
}

.module-tab::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background: currentColor;
  -webkit-mask: var(--module-icon) center / contain no-repeat;
  mask: var(--module-icon) center / contain no-repeat;
}

.module-tab[data-module="dashboard"] { --module-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/g%3E%3C/svg%3E"); }
.module-tab[data-module="historia-clinica"] { --module-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3h8l2 3v15H6V6l2-3Z'/%3E%3Cpath d='M9 13h6M12 10v6'/%3E%3C/g%3E%3C/svg%3E"); }
.module-tab[data-module="calidad-clinica"] { --module-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 4v5c0 4.5-2.8 7.5-7 9-4.2-1.5-7-4.5-7-9V7l7-4Z'/%3E%3Cpath d='m9 12 2 2 4-5'/%3E%3C/g%3E%3C/svg%3E"); }
.module-tab[data-module="cloud-data"] { --module-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18h10a4 4 0 0 0 0-8h-.5A6 6 0 0 0 5 11.5 3.5 3.5 0 0 0 7 18Z'/%3E%3Cpath d='M12 12v5M9.5 14.5 12 12l2.5 2.5'/%3E%3C/g%3E%3C/svg%3E"); }
.module-tab[data-module="omwellness"] { --module-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13h4l3-7 4 12 2-5h3'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/g%3E%3C/svg%3E"); }
.module-tab[data-module="rips-json"] { --module-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4H6a2 2 0 0 0-2 2v2M16 4h2a2 2 0 0 1 2 2v2M8 20H6a2 2 0 0 1-2-2v-2M16 20h2a2 2 0 0 0 2-2v-2'/%3E%3Cpath d='m9 9-2 3 2 3M15 9l2 3-2 3'/%3E%3C/g%3E%3C/svg%3E"); }
.module-tab[data-module="rips-dian"] { --module-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h8l4 4v14H7V3Z'/%3E%3Cpath d='M15 3v5h4M9 13h6M9 17h4'/%3E%3C/g%3E%3C/svg%3E"); }
.module-tab[data-module="finanzas"] { --module-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M17 6.5c-.8-1-2.2-1.5-4-1.5-2.4 0-4 1.1-4 3 0 4 8 2 8 6 0 1.9-1.6 3-4 3-1.9 0-3.4-.6-4.5-1.8'/%3E%3C/g%3E%3C/svg%3E"); }
.module-tab[data-module="register-clinic"] { --module-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v16'/%3E%3Cpath d='M9 21v-5h3v5M8 7h1M12 7h1M8 11h1M12 11h1M17 10h3v11'/%3E%3C/g%3E%3C/svg%3E"); }
.module-tab[data-module="billing"] { --module-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/g%3E%3C/svg%3E"); }
.module-tab[data-module="import-data"] { --module-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M8 11l4 4 4-4'/%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3C/g%3E%3C/svg%3E"); }
.module-tab[data-module="super-admin"] { --module-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0M18 4l2 2M20 4l-2 2'/%3E%3C/g%3E%3C/svg%3E"); }

.module-tab.active,
.module-tab:hover {
  background: linear-gradient(90deg, #15b98f, #0c957f);
  color: #fff;
}

main {
  background: var(--om-demo-bg);
}

.card,
.stat-card,
.kanban-card,
.stage,
.clinical-card,
.rips-json-preview,
.modal {
  border: 1px solid var(--om-demo-line);
  border-radius: 8px;
  background: var(--om-demo-panel);
  box-shadow: var(--om-demo-shadow);
}

.stat-value {
  font-size: 30px;
  letter-spacing: 0;
}

.stat-trend,
.badge.confirmada,
.pill {
  border-radius: 999px;
  background: #e7f5ef;
  color: var(--om-demo-mint);
}

.lead-card,
.appt-item,
.task-row,
.ops-item,
.compact-item,
.status-item,
.clinical-list-item {
  border-color: var(--om-demo-line);
  border-radius: 8px;
  background: #fbfdfc;
}

.rips-json-grid {
  gap: 14px;
}

#ripsJsonPreview {
  border-radius: 8px;
  background: #0f1f1b;
}

.stat-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 9px;
  color: #fff;
  font-size: 0;
}

.stat-icon::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--stat-icon) center / contain no-repeat;
  mask: var(--stat-icon) center / contain no-repeat;
}

.stat-icon.green { --stat-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-8 0v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/g%3E%3C/svg%3E"); }
.stat-icon.gold { --stat-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M17 6.5c-.8-1-2.2-1.5-4-1.5-2.4 0-4 1.1-4 3 0 4 8 2 8 6 0 1.9-1.6 3-4 3-1.9 0-3.4-.6-4.5-1.8'/%3E%3C/g%3E%3C/svg%3E"); }
.stat-icon.teal { --stat-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/g%3E%3C/svg%3E"); }
.stat-icon.purple { --stat-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/%3E%3C/g%3E%3C/svg%3E"); }

.clinical-side-link {
  display: flex;
  align-items: center;
  gap: 10px;
}

.clinical-side-link::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M9 15h6M9 11h3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M9 15h6M9 11h3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 900px) {
  body {
    background: #eef6f2;
  }

  .shell:not(.hidden) {
    min-height: 100vh;
    background: #f7fbf9;
  }

  header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(247, 251, 249, .96);
  }

  .topbar {
    min-height: 58px;
    height: 58px;
    padding: 0 12px;
    background: #fff;
    border-bottom: 1px solid #e6ebf0;
  }

  .mobile-menu-toggle {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    gap: 4px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #536174;
  }

  .mobile-menu-toggle span,
  .mobile-menu-toggle::before,
  .mobile-menu-toggle::after {
    content: "";
    width: 20px;
    height: 2px;
    display: block;
    border-radius: 999px;
    background: currentColor;
  }

  .header-actions {
    gap: 8px;
    margin-left: auto;
  }

  .header-actions .btn,
  .header-actions .role-pill {
    min-height: 36px;
    border-radius: 9px;
  }

  .header-actions .btn-ghost {
    width: 36px;
    height: 36px;
    padding: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #536174;
    background: transparent;
    border: 0;
    font-size: 0;
  }

  #logoutBtn::before,
  #editModeBtn::before {
    content: "";
    width: 21px;
    height: 21px;
    background: currentColor;
    -webkit-mask: var(--top-action-icon) center / contain no-repeat;
    mask: var(--top-action-icon) center / contain no-repeat;
  }

  #logoutBtn { --top-action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17 15 12 10 7'/%3E%3Cpath d='M15 12H3'/%3E%3Cpath d='M21 3v18'/%3E%3C/g%3E%3C/svg%3E"); }
  #editModeBtn { --top-action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/g%3E%3C/svg%3E"); }

  .role-pill {
    padding: 0 10px;
    border-left: 1px solid #e6ebf0;
    background: transparent;
    color: #111827;
    font-size: 12px;
    font-weight: 800;
  }

  .module-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    width: min(248px, 84vw);
    margin: 0;
    padding: 16px 16px 16px 8px;
    display: grid;
    align-content: start;
    gap: 8px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .18s ease;
    border-right: 1px solid #e6ebf0;
    background: #fff;
    box-shadow: 10px 0 28px rgba(15, 23, 42, .10);
  }

  .shell.mobile-nav-open .module-nav {
    transform: translateX(0);
  }

  .mobile-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(17, 24, 39, .48);
  }

  .shell.mobile-nav-open .mobile-nav-overlay {
    display: block;
  }

  .module-tab {
    min-height: 44px;
    padding: 0 16px;
    justify-content: flex-start;
    border-radius: 9px;
    background: transparent;
    color: var(--om-demo-muted);
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
  }

  .module-tab.active {
    background: linear-gradient(90deg, #15b98f, #0c957f);
    color: #fff;
    box-shadow: 0 8px 16px rgba(12, 149, 127, .22);
  }

  main {
    padding: 18px 12px;
    background: #f7faf9;
  }

  .page-head {
    margin-bottom: 14px;
  }

  .page-title {
    font-size: 24px;
    line-height: 1.1;
  }

  .page-sub {
    font-size: 13px;
  }

  .stats,
  .module-grid,
  .module-grid.two,
  .finance-kpi,
  .three-col,
  .info-grid,
  .ai-grid,
  .form-grid {
    gap: 14px;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .stat-card {
    position: relative;
    min-height: 142px;
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .04);
  }

  .stat-value {
    margin-top: 10px;
    font-size: 27px;
    line-height: 1;
  }

  .stat-trend {
    width: fit-content;
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 800;
  }

  .card,
  .kanban-card,
  .stage,
  .clinical-card,
  .rips-json-preview {
    border-radius: 12px;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .04);
  }

  .info-grid,
  .ai-grid,
  .three-col,
  .module-grid,
  .module-grid.two,
  .finance-kpi,
  .form-grid,
  .patient-workspace,
  .rips-workspace,
  .clinical-grid,
  .rips-json-grid {
    grid-template-columns: 1fr !important;
  }

  .clinical-shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .clinical-sidebar {
    position: static;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px;
    border: 1px solid #e0e9e5;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .04);
  }

  .clinical-sidebar-head {
    margin-bottom: 4px;
  }

  .clinical-side-link {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #d9e7e2;
    border-radius: 8px;
    background: #fff;
    color: #536174;
    font-size: 13px;
    font-weight: 800;
  }

  .clinical-side-link.active {
    border-color: #83d8c3;
    background: #eefaf6;
    color: #087b66;
  }

  .rips-json-preview {
    min-width: 0;
    max-width: none;
  }

  .rips-json-resizer {
    display: none;
  }

  #ripsJsonPreview {
    max-height: 45vh;
    overflow: auto;
    border-radius: 10px;
    font-size: 12px;
  }

  .compact-item,
  .lead-card,
  .appt-item,
  .task-row,
  .ops-item,
  .status-item,
  .clinical-list-item,
  .rips-validation-card {
    border-radius: 8px;
    background: #fbfdfc;
  }
}

@media (max-width: 480px) {
  .login {
    padding: 0 24px 28px;
  }

  .login-card { padding: 24px 18px; }
  .login-title { font-size: 27px; }
}

/* Strong demo shell parity: visual-only layout mapping to the OM demo app. */
.shell:not(.hidden) {
  background: #f7faf9;
  color: #111827;
}

.shell:not(.hidden) header {
  min-height: 58px;
  border-bottom: 1px solid #e6ebf0;
  background: #fff;
  box-shadow: none;
}

.shell:not(.hidden) .topbar {
  max-width: none;
  height: 58px;
  min-height: 58px;
  padding: 0 24px;
}

.shell:not(.hidden) .brand {
  display: none;
}

.shell:not(.hidden) .header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.shell:not(.hidden) .role-pill {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding-left: 14px;
  border-left: 1px solid #e6ebf0;
  border-radius: 0;
  background: transparent;
  color: #111827;
  font-size: 14px;
  font-weight: 800;
}

.shell:not(.hidden) .header-actions .btn-ghost {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #536174;
  font-size: 0;
}

.shell:not(.hidden) #editModeBtn::before,
.shell:not(.hidden) #logoutBtn::before {
  content: "";
  width: 21px;
  height: 21px;
  display: block;
  background: currentColor;
  -webkit-mask: var(--top-action-icon) center / contain no-repeat;
  mask: var(--top-action-icon) center / contain no-repeat;
}

.shell:not(.hidden) #editModeBtn { --top-action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/g%3E%3C/svg%3E"); }
.shell:not(.hidden) #logoutBtn { --top-action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17 15 12 10 7'/%3E%3Cpath d='M15 12H3'/%3E%3Cpath d='M21 3v18'/%3E%3C/g%3E%3C/svg%3E"); }

.shell:not(.hidden) main {
  max-width: none;
  background: #f7faf9;
}

.shell:not(.hidden) .page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.shell:not(.hidden) .page-eyebrow,
.shell:not(.hidden) .section-label {
  color: #079477;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.shell:not(.hidden) .page-title {
  margin: 2px 0 0;
  color: #111827;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: 0;
}

.shell:not(.hidden) .page-sub,
.shell:not(.hidden) .card-sub {
  color: #536174;
}

.shell:not(.hidden) .card,
.shell:not(.hidden) .stat-card,
.shell:not(.hidden) .kanban-card,
.shell:not(.hidden) .stage,
.shell:not(.hidden) .clinical-card,
.shell:not(.hidden) .rips-json-preview,
.shell:not(.hidden) .modal {
  border: 1px solid #e5ebef;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(15, 23, 42, .04);
}

.shell:not(.hidden) .stat-card {
  position: relative;
  min-height: 142px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 20px;
}

.shell:not(.hidden) .stat-value {
  margin-top: 10px;
  color: #111827 !important;
  font-size: 27px;
  line-height: 1;
}

.shell:not(.hidden) .stat-label {
  color: #424f60;
}

.shell:not(.hidden) .stat-trend {
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eef7f4;
  color: #079477;
  font-size: 12px;
  font-weight: 800;
}

.shell:not(.hidden) .compact-item,
.shell:not(.hidden) .lead-card,
.shell:not(.hidden) .appt-item,
.shell:not(.hidden) .task-row,
.shell:not(.hidden) .ops-item,
.shell:not(.hidden) .status-item,
.shell:not(.hidden) .clinical-list-item,
.shell:not(.hidden) .rips-validation-card {
  border: 1px solid #e8eef2;
  border-radius: 8px;
  background: #fbfdfc;
}

@media (min-width: 901px) {
  .shell:not(.hidden) {
    min-height: 100vh;
  }

  .shell:not(.hidden) header {
    position: fixed;
    top: 0;
    right: 0;
    left: 248px;
    z-index: 30;
  }

  .shell:not(.hidden) .module-nav {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: 248px;
    min-height: 100vh;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 74px 16px 132px 8px;
    border-right: 1px solid #e6ebf0;
    background: #fff;
    box-shadow: 10px 0 28px rgba(15, 23, 42, .05);
    overflow-y: auto;
  }

  .shell:not(.hidden) .module-nav::before {
    content: "OM Wellness";
    position: fixed;
    top: 0;
    left: 0;
    width: 248px;
    height: 58px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 8px;
    border-bottom: 1px solid #edf1f5;
    background: #fff;
    color: #079477;
    font-size: 20px;
    font-weight: 800;
  }

  .shell:not(.hidden) .module-nav::after {
    content: none;
  }

  .shell:not(.hidden) .module-tab {
    width: 100%;
    min-height: 44px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    justify-content: start;
    padding: 0 16px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #536174;
    text-align: left;
    font-weight: 650;
  }

  .shell:not(.hidden) .module-tab.active {
    background: linear-gradient(90deg, #15b98f, #0c957f);
    color: #fff;
    box-shadow: 0 8px 16px rgba(12, 149, 127, .22);
  }

  .shell:not(.hidden) main {
    margin-left: 248px;
    padding: 86px 24px 28px;
  }

  .shell:not(.hidden) .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .shell:not(.hidden) .info-grid,
  .shell:not(.hidden) .ai-grid,
  .shell:not(.hidden) .three-col,
  .shell:not(.hidden) .module-grid,
  .shell:not(.hidden) .module-grid.two,
  .shell:not(.hidden) .finance-kpi {
    gap: 16px;
  }
}

@media (max-width: 900px) {
  .shell:not(.hidden) .module-nav::before {
    content: "OM Wellness";
    min-height: 58px;
    display: flex;
    align-items: center;
    padding: 8px 8px 14px;
    color: #079477;
    font-size: 20px;
    font-weight: 800;
  }

  .shell:not(.hidden) .module-nav::after {
    content: none;
  }

  .shell:not(.hidden) .page-head {
    align-items: stretch;
    flex-direction: column;
  }

  .shell:not(.hidden) .stats,
  .shell:not(.hidden) .info-grid,
  .shell:not(.hidden) .ai-grid,
  .shell:not(.hidden) .three-col,
  .shell:not(.hidden) .module-grid,
  .shell:not(.hidden) .module-grid.two,
  .shell:not(.hidden) .finance-kpi,
  .shell:not(.hidden) .form-grid,
  .shell:not(.hidden) .patient-workspace,
  .shell:not(.hidden) .rips-workspace,
  .shell:not(.hidden) .clinical-grid,
  .shell:not(.hidden) .rips-json-grid {
    grid-template-columns: 1fr !important;
  }

  .shell:not(.hidden) .clinical-shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .shell:not(.hidden) .clinical-sidebar {
    position: static;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px;
    border: 1px solid #e0e9e5;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .04);
  }

  .shell:not(.hidden) .clinical-side-link {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #d9e7e2;
    border-radius: 8px;
    background: #fff;
    color: #536174;
    font-size: 13px;
    font-weight: 800;
  }

  .shell:not(.hidden) .clinical-side-link.active {
    border-color: #83d8c3;
    background: #eefaf6;
    color: #087b66;
  }

  .shell:not(.hidden) .rips-json-preview {
    min-width: 0;
    max-width: none;
  }

  .shell:not(.hidden) .rips-json-resizer {
    display: none;
  }

  .shell:not(.hidden) #ripsJsonPreview {
    max-height: 45vh;
    overflow: auto;
    border-radius: 10px;
    font-size: 12px;
  }
}

/* Colapso visual del menu lateral; no cambia rutas ni datos. */
@media (min-width: 901px) {
  .shell:not(.hidden) { --sidebar-width: 240px; }
  .shell:not(.hidden).sidebar-collapsed { --sidebar-width: 72px; }
  .shell:not(.hidden) header { left: var(--sidebar-width); transition: left .24s ease; }
  .shell:not(.hidden) .module-nav { width: var(--sidebar-width); transition: width .24s ease, transform .24s ease, box-shadow .24s ease; }
  .shell:not(.hidden) .module-nav::before { width: var(--sidebar-width); overflow: hidden; white-space: nowrap; transition: width .24s ease, padding .24s ease, font-size .24s ease; }
  .shell:not(.hidden).sidebar-collapsed .module-nav::before { justify-content: center; padding-right: 8px; font-size: 13px; }
  .shell:not(.hidden).sidebar-collapsed .module-tab { grid-template-columns: 22px; justify-content: center; padding: 0; gap: 0; font-size: 0; }
  .shell:not(.hidden).sidebar-collapsed .module-tab::before { margin: 0 auto; }
  .shell:not(.hidden) main { margin-left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); transition: margin-left .24s ease, width .24s ease; }
}

@media (max-width: 900px) {
  .shell:not(.hidden) { --sidebar-width: 0px; }
  .shell:not(.hidden) main { margin-left: 0; width: 100%; }
}