/* KineCheck · Entorno clínico premium · 2026-09-24
   Shared, presentation-only theme. Do not change form behavior, routing, entitlements
   or the appearance of light-mode content panels. All imagery is first-party. */
:root {
  --kc-clinical-photo: url("/assets/clinical-room-no-people-20260924.png");
  --kc-clinical-edge: rgba(114,220,225,.27);
  --kc-clinical-shadow: 0 18px 54px rgba(0,0,0,.25);
}
/* Keep the reference photo understated behind complete pages: text sits on opaque panels. */
html body {
  background-color: #041218;
  background-image:
    linear-gradient(110deg,rgba(3,16,24,.82) 0%,rgba(4,22,32,.74) 49%,rgba(3,18,29,.68) 100%),
    var(--kc-clinical-photo);
  background-position: center, center right;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
/* Academy keeps a plain canvas behind lessons, quizzes and forms. Its entry
   showcase and dashboard hero use the shared photograph separately. */
html body[data-kc-view] {
  background-color: #06151f;
  background-image: none;
}
/* Home and public product headers: allow a little more of the photograph to show. */
html body .hero.home-hero,
html body .page-hero,
html body .guide-hero,
html body .resource-page .resource-hero {
  background-color: #061c28;
  background-image:
    linear-gradient(95deg,rgba(3,18,29,.86) 0%,rgba(5,29,40,.78) 43%,rgba(6,31,43,.57) 100%),
    var(--kc-clinical-photo);
  background-position: center, center right;
  background-size: cover;
  background-repeat: no-repeat;
  color: #f4fcfd;
}
html body .hero.home-hero,
html body .page-hero,
html body .guide-hero,
html body .resource-page .resource-hero {
  border-color: var(--kc-clinical-edge);
  box-shadow: 0 12px 48px rgba(0,0,0,.15);
}
html body .hero.home-hero p,
html body .page-hero p,
html body .guide-hero p,
html body .resource-page .resource-hero p {
  color: #e1eeee;
}
/* Maintain readable dark glass cards while preserving the typography and grid layouts. */
html body .home-hero .hero-card,
html body .page-hero .hero-card,
html body .audience-card,
html body .evidence-card,
html body .kc-route-card,
html body .product-grid > .product,
html body .feature-grid > .feature,
html body .guide-hero .hero-card,
html body .path-card,
html body .step-card,
html body .resource-page .resource-hero .resource-note {
  border-color: var(--kc-clinical-edge);
  background: linear-gradient(140deg,rgba(13,47,61,.94),rgba(5,27,40,.92));
  box-shadow: var(--kc-clinical-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* Footer and header stay legible above the site-wide image. */
html body .site-header,
html body .guide-header {
  background: rgba(3,17,25,.93);
  border-bottom-color: rgba(122,218,222,.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html body .site-footer,
html body .guide-footer {
  background: rgba(2,13,20,.95);
  color: #c7dcdf;
}
/* Extend the existing Privacy page style to Terms and Refunds, without
   removing the standalone Privacy-specific adjustments. */
html body .policy-section {
  border-color: rgba(120,215,229,.30);
  background: linear-gradient(135deg,rgba(14,48,64,.95),rgba(7,29,42,.93));
  box-shadow: var(--kc-clinical-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html body .policy-section p,
html body .policy-section li { color: #e0edef; }
html body .policy-section h2,
html body .policy-section h3 { color: #fff; }
html body .toc {
  border-color: var(--kc-clinical-edge);
  background: rgba(7,31,43,.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html body .toc a { color: #dcecee; }
html body .hero:has(+ .layout) {
  background-image:
    linear-gradient(95deg,rgba(3,18,29,.96),rgba(6,30,43,.77)),
    var(--kc-clinical-photo);
  background-position: center right;
  background-size: cover;
}
/* Beta: preserve its layout and field readability; add image to the introductory area. */
html body .hero-copy,
html body .beta-form,
html body .form-copy {
  border-color: var(--kc-clinical-edge);
  background: linear-gradient(135deg,rgba(13,48,60,.96),rgba(6,28,42,.95));
  box-shadow: var(--kc-clinical-shadow);
}
html body .hero-copy p { color: #e0eeee; }
/* Support has light form cards with dark text. Only the surrounding shell turns dark. */
html body:has(.support-card) .intro h1 { color: #f4fcfd; }
html body:has(.support-card) .intro p { color: #d5e7e9; }
html body:has(.support-card) > footer { color: #d6eaeb; border-color: var(--kc-clinical-edge); }
html body:has(.support-card) .topbar {
  background: rgba(248,253,253,.96);
  border-bottom-color: rgba(10,66,76,.24);
}
/* Academy entry: protect settings, high-contrast, light mode and course surfaces.
   Only the login showcase gains the image; existing dashboard themes remain intact. */
html body .login-layout {
  background-image:
    linear-gradient(105deg,rgba(3,17,25,.86),rgba(4,26,37,.83)),
    var(--kc-clinical-photo);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  border-radius: 24px;
}
html body .login-layout .login-showcase,
html body .login-layout .login-card {
  border-color: var(--kc-clinical-edge);
  box-shadow: var(--kc-clinical-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* Protected-course entry cards; never change their functional states. */
html body .access-card {
  border-color: var(--kc-clinical-edge);
  box-shadow: var(--kc-clinical-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@media (max-width: 820px) {
  html body { background-attachment: scroll; background-position: center, 65% center; }
  html body .hero.home-hero,
  html body .page-hero,
  html body .guide-hero,
  html body .resource-page .resource-hero {
    background-position: center, 65% center;
  }
  html body .login-layout { background-position: 65% center; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html body .policy-section,
  html body .login-layout .login-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
}