/* ==========================================================
   LABORATORY SYSTEM
   Interface v0.2.0
   Instituto Avançado de Infectologia
========================================================== */

/* ==========================================================
   01. DESIGN SYSTEM
========================================================== */

:root {
  --green-dark: #082f28;
  --green-medium: #0d463b;
  --off-white: #f6f4ee;
  --white: #ffffff;

  --text-dark: #17332c;
  --text-muted: #6a7b75;
  --border-soft: rgba(23, 51, 44, 0.15);

  --shadow-soft:
    0 18px 50px rgba(0, 0, 0, 0.16);

  --shadow-strong:
    0 24px 64px rgba(0, 0, 0, 0.24);

  --transition-standard:
    220ms ease;

  --radius-large:
    20px;

  --radius-medium:
    14px;
}

/* ==========================================================
   02. RESET
========================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  color: var(--white);
  background-color: var(--green-dark);

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a,
button,
input {
  font: inherit;
}

a {
  color: inherit;
}

button {
  border: 0;
}

img {
  display: block;
  max-width: 100%;
}

/* ==========================================================
   03. FUNDO INSTITUCIONAL COMPARTILHADO
========================================================== */

.landing-page,
.login-page {
  position: relative;

  min-height: 100vh;
  min-height: 100svh;

  overflow: hidden;

  background:
    linear-gradient(
      rgba(8, 47, 40, 0.34),
      rgba(8, 47, 40, 0.48)
    ),
    url("../assets/backgrounds/Background_green.png")
    center center / cover
    no-repeat;
}

.landing-page::before,
.login-page::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.025) 0%,
      rgba(8, 47, 40, 0.08) 48%,
      rgba(8, 47, 40, 0.34) 100%
    );

  pointer-events: none;
}

/* ==========================================================
   04. LANDING PAGE
========================================================== */

.landing-page {
  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    48px
    32px
    72px;
}

.landing-content {
  position: relative;
  z-index: 1;

  width: min(920px, 100%);

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  animation:
    page-entrance
    700ms
    ease-out
    both;
}

.landing-logo {
  width: min(620px, 78vw);
  height: auto;

  margin-bottom: 42px;

  filter:
    drop-shadow(
      0 10px 22px rgba(0, 0, 0, 0.12)
    );
}

.landing-title {
  margin-bottom: 62px;

  color: var(--white);

  font-size:
    clamp(
      1.45rem,
      3.2vw,
      2.75rem
    );

  font-weight: 300;
  line-height: 1.25;

  letter-spacing:
    clamp(
      0.16rem,
      0.72vw,
      0.62rem
    );

  text-transform: uppercase;

  text-shadow:
    0 4px 18px rgba(0, 0, 0, 0.16);
}

.upload-button {
  min-width: 270px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 13px;

  padding:
    19px
    34px;

  border:
    1px solid rgba(255, 255, 255, 0.72);

  border-radius:
    var(--radius-large);

  color:
    var(--green-dark);

  background:
    rgba(255, 255, 255, 0.96);

  box-shadow:
    var(--shadow-soft);

  text-decoration: none;

  font-size:
    1rem;

  font-weight:
    700;

  letter-spacing:
    0.08rem;

  cursor:
    pointer;

  transition:
    transform var(--transition-standard),
    box-shadow var(--transition-standard),
    background-color var(--transition-standard),
    border-color var(--transition-standard);
}

.upload-button:hover {
  transform:
    translateY(-3px)
    scale(1.035);

  background:
    var(--white);

  border-color:
    var(--white);

  box-shadow:
    var(--shadow-strong);
}

.upload-button:active {
  transform:
    translateY(-1px)
    scale(1.015);
}

.upload-button:focus-visible {
  outline:
    3px solid rgba(255, 255, 255, 0.72);

  outline-offset:
    5px;
}

.upload-button__icon {
  width: 29px;
  height: 29px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  transition:
    transform var(--transition-standard);
}

.upload-button:hover .upload-button__icon {
  transform:
    translateY(-2px);
}

.upload-button__icon svg {
  width: 100%;
  height: 100%;
}

.medical-access {
  position: absolute;
  z-index: 2;

  right: 32px;
  bottom: 26px;

  padding:
    9px
    4px;

  color:
    rgba(255, 255, 255, 0.72);

  text-decoration:
    none;

  font-size:
    0.88rem;

  font-weight:
    400;

  letter-spacing:
    0.025rem;

  transition:
    color var(--transition-standard),
    transform var(--transition-standard);
}

.medical-access::after {
  content: "";

  position: absolute;

  left: 4px;
  right: 4px;
  bottom: 5px;

  height: 1px;

  background:
    currentColor;

  transform:
    scaleX(0);

  transform-origin:
    right center;

  transition:
    transform var(--transition-standard);
}

.medical-access:hover {
  color:
    var(--white);

  transform:
    translateY(-1px);
}

.medical-access:hover::after {
  transform:
    scaleX(1);

  transform-origin:
    left center;
}

.medical-access:focus-visible {
  outline:
    2px solid rgba(255, 255, 255, 0.72);

  outline-offset:
    5px;

  border-radius:
    6px;
}

/* ==========================================================
   05. LOGIN MÉDICO
========================================================== */

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    48px
    24px
    82px;
}

.login-content {
  position: relative;
  z-index: 1;

  width: min(520px, 100%);

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  animation:
    page-entrance
    700ms
    ease-out
    both;
}

.login-brand {
  display: inline-block;

  margin-bottom:
    26px;

  text-decoration:
    none;
}

.login-logo {
  width:
    min(430px, 82vw);

  height:
    auto;

  filter:
    drop-shadow(
      0 8px 18px rgba(0, 0, 0, 0.1)
    );

  transition:
    transform var(--transition-standard);
}

.login-brand:hover .login-logo {
  transform:
    scale(1.015);
}

.login-title {
  margin-bottom:
    34px;

  color:
    var(--white);

  font-size:
    clamp(
      1.15rem,
      2.7vw,
      1.8rem
    );

  font-weight:
    300;

  line-height:
    1.25;

  letter-spacing:
    clamp(
      0.12rem,
      0.5vw,
      0.36rem
    );

  text-transform:
    uppercase;

  text-shadow:
    0 4px 16px rgba(0, 0, 0, 0.14);
}

.login-card {
  width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  gap:
    22px;

  padding:
    34px;

  border:
    1px solid rgba(255, 255, 255, 0.44);

  border-radius:
    24px;

  background:
    rgba(246, 244, 238, 0.97);

  box-shadow:
    var(--shadow-strong);

  text-align:
    left;

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);
}

.form-field {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}

.form-field label {
  color:
    var(--text-dark);

  font-size:
    0.92rem;

  font-weight:
    650;

  letter-spacing:
    0.015rem;
}

.form-field input {
  width:
    100%;

  min-height:
    52px;

  padding:
    14px
    16px;

  border:
    1px solid var(--border-soft);

  border-radius:
    var(--radius-medium);

  color:
    var(--text-dark);

  background:
    rgba(255, 255, 255, 0.96);

  outline:
    none;

  transition:
    border-color var(--transition-standard),
    box-shadow var(--transition-standard),
    background-color var(--transition-standard);
}

.form-field input::placeholder {
  color:
    rgba(106, 123, 117, 0.78);
}

.form-field input:hover {
  border-color:
    rgba(13, 70, 59, 0.35);
}

.form-field input:focus {
  border-color:
    var(--green-medium);

  background:
    var(--white);

  box-shadow:
    0 0 0 4px rgba(13, 70, 59, 0.12);
}

.login-button {
  min-height:
    54px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    15px
    24px;

  border-radius:
    var(--radius-medium);

  color:
    var(--white);

  background:
    var(--green-dark);

  box-shadow:
    0 12px 26px rgba(8, 47, 40, 0.2);

  font-size:
    0.98rem;

  font-weight:
    750;

  letter-spacing:
    0.09rem;

  cursor:
    pointer;

  transition:
    transform var(--transition-standard),
    box-shadow var(--transition-standard),
    background-color var(--transition-standard);
}

.login-button:hover {
  transform:
    translateY(-2px)
    scale(1.012);

  background:
    var(--green-medium);

  box-shadow:
    0 17px 36px rgba(8, 47, 40, 0.28);
}

.login-button:active {
  transform:
    translateY(0)
    scale(1);
}

.login-button:focus-visible {
  outline:
    3px solid rgba(13, 70, 59, 0.26);

  outline-offset:
    4px;
}

.login-message {
  min-height:
    20px;

  color:
    var(--text-muted);

  font-size:
    0.86rem;

  line-height:
    1.4;

  text-align:
    center;
}

.back-to-home {
  position:
    absolute;

  z-index:
    2;

  left:
    32px;

  bottom:
    26px;

  padding:
    9px
    4px;

  color:
    rgba(255, 255, 255, 0.72);

  text-decoration:
    none;

  font-size:
    0.88rem;

  transition:
    color var(--transition-standard),
    transform var(--transition-standard);
}

.back-to-home:hover {
  color:
    var(--white);

  transform:
    translateX(-2px);
}

.back-to-home:focus-visible {
  outline:
    2px solid rgba(255, 255, 255, 0.72);

  outline-offset:
    5px;

  border-radius:
    6px;
}

/* ==========================================================
   06. ANIMAÇÃO
========================================================== */

@keyframes page-entrance {
  from {
    opacity:
      0;

    transform:
      translateY(16px);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0);
  }
}

/* ==========================================================
   07. RESPONSIVIDADE
========================================================== */

@media (max-width: 720px) {
  .landing-page {
    padding:
      38px
      22px
      84px;
  }

  .landing-logo {
    width:
      min(470px, 88vw);

    margin-bottom:
      34px;
  }

  .landing-title {
    max-width:
      520px;

    margin-bottom:
      48px;

    font-size:
      clamp(
        1.3rem,
        6.2vw,
        2rem
      );

    letter-spacing:
      clamp(
        0.12rem,
        1.35vw,
        0.34rem
      );
  }

  .upload-button {
    width:
      min(330px, 88vw);

    min-width:
      0;

    padding:
      18px
      24px;

    font-size:
      0.96rem;
  }

  .medical-access {
    right:
      22px;

    bottom:
      19px;
  }

  .login-page {
    padding:
      34px
      18px
      82px;
  }

  .login-logo {
    width:
      min(390px, 88vw);
  }

  .login-title {
    margin-bottom:
      28px;
  }

  .login-card {
    padding:
      28px
      22px;

    border-radius:
      21px;
  }

  .back-to-home {
    left:
      22px;

    bottom:
      19px;
  }
}

@media (max-width: 420px) {
  .landing-logo {
    width:
      90vw;

    margin-bottom:
      30px;
  }

  .landing-title {
    margin-bottom:
      42px;

    font-size:
      1.28rem;

    letter-spacing:
      0.16rem;
  }

  .upload-button {
    border-radius:
      17px;
  }

  .medical-access,
  .back-to-home {
    font-size:
      0.82rem;
  }

  .medical-access {
    right:
      18px;
  }

  .back-to-home {
    left:
      18px;
  }

  .login-card {
    gap:
      19px;

    padding:
      25px
      18px;
  }
}

/* ==========================================================
   08. ACESSIBILIDADE
========================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }
}

/* ==========================================================
   09. BUSCA DE PACIENTE
========================================================== */

.search-page {
  position: relative;

  min-height: 100vh;
  min-height: 100svh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    48px
    24px
    82px;

  overflow: hidden;

  background:
    linear-gradient(
      rgba(8, 47, 40, 0.34),
      rgba(8, 47, 40, 0.48)
    ),
    url("../assets/backgrounds/Background_green.png")
    center center / cover
    no-repeat;
}

.search-page::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.025) 0%,
      rgba(8, 47, 40, 0.08) 48%,
      rgba(8, 47, 40, 0.34) 100%
    );

  pointer-events: none;
}

.search-content {
  position: relative;
  z-index: 1;

  width: min(650px, 100%);

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  animation:
    page-entrance
    700ms
    ease-out
    both;
}

.search-logo {
  width: min(430px, 82vw);
  height: auto;

  margin-bottom: 26px;

  filter:
    drop-shadow(
      0 8px 18px rgba(0, 0, 0, 0.1)
    );
}

.search-title {
  margin-bottom: 40px;

  color: var(--white);

  font-size:
    clamp(
      1.15rem,
      2.7vw,
      1.8rem
    );

  font-weight: 300;
  line-height: 1.25;

  letter-spacing:
    clamp(
      0.12rem,
      0.5vw,
      0.36rem
    );

  text-transform: uppercase;

  text-shadow:
    0 4px 16px rgba(0, 0, 0, 0.14);
}

.patient-search {
  width: 100%;

  padding: 34px;

  border:
    1px solid rgba(255, 255, 255, 0.44);

  border-radius: 24px;

  background:
    rgba(246, 244, 238, 0.97);

  box-shadow:
    var(--shadow-strong);

  text-align: left;

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);
}

.patient-search__label {
  display: block;

  margin-bottom: 10px;

  color: var(--text-dark);

  font-size: 0.94rem;
  font-weight: 700;

  letter-spacing: 0.015rem;
}

.patient-search__control {
  display: flex;
  align-items: stretch;

  overflow: hidden;

  border:
    1px solid var(--border-soft);

  border-radius:
    var(--radius-medium);

  background:
    rgba(255, 255, 255, 0.96);

  transition:
    border-color var(--transition-standard),
    box-shadow var(--transition-standard),
    background-color var(--transition-standard);
}

.patient-search__control:focus-within {
  border-color:
    var(--green-medium);

  background:
    var(--white);

  box-shadow:
    0 0 0 4px rgba(13, 70, 59, 0.12);
}

.patient-search__control input {
  min-width: 0;
  flex: 1;

  min-height: 58px;

  padding:
    15px
    18px;

  border: 0;
  outline: 0;

  color:
    var(--text-dark);

  background:
    transparent;

  font-size:
    1rem;
}

.patient-search__control input::placeholder {
  color:
    rgba(106, 123, 117, 0.78);
}

.patient-search__button {
  width: 62px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  color:
    var(--green-dark);

  background:
    transparent;

  cursor:
    pointer;

  transition:
    color var(--transition-standard),
    background-color var(--transition-standard),
    transform var(--transition-standard);
}

.patient-search__button:hover {
  color:
    var(--white);

  background:
    var(--green-medium);
}

.patient-search__button:active {
  transform:
    scale(0.96);
}

.patient-search__button:focus-visible {
  outline:
    3px solid rgba(13, 70, 59, 0.24);

  outline-offset:
    -4px;
}

.patient-search__help {
  margin-top: 12px;

  color:
    var(--text-muted);

  font-size:
    0.84rem;

  line-height:
    1.45;
}

.patient-search__results {
  display: none;

  margin-top: 18px;

  overflow: hidden;

  border:
    1px solid var(--border-soft);

  border-radius:
    var(--radius-medium);

  background:
    var(--white);
}

.patient-search__results.is-visible {
  display: block;
}

.patient-result {

  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 6px;

  padding: 16px 18px;

  border: 0;

  background:
    transparent;

  text-align: left;

  cursor: pointer;

  color:
    var(--text-dark);

  transition:
    background-color var(--transition-standard);

}


.patient-result:hover {

  background:
    rgba(13, 70, 59, 0.08);

}


.patient-result strong {

  font-size:
    0.95rem;

  font-weight:
    700;

}


.patient-result span {

  color:
    var(--text-muted);

  font-size:
    0.84rem;

}

.medical-logout {
  position: absolute;
  z-index: 2;

  right: 32px;
  bottom: 26px;

  padding:
    9px
    4px;

  color:
    rgba(255, 255, 255, 0.72);

  background:
    transparent;

  font-size:
    0.88rem;
  font-weight:
    400;

  cursor:
    pointer;

  transition:
    color var(--transition-standard),
    transform var(--transition-standard);
}

.medical-logout:hover {
  color:
    var(--white);

  transform:
    translateY(-1px);
}

.medical-logout:focus-visible {
  outline:
    2px solid rgba(255, 255, 255, 0.72);

  outline-offset:
    5px;

  border-radius:
    6px;
}

.processing-panel-link {
  position: absolute;
  z-index: 2;

  left: 32px;
  bottom: 26px;

  padding:
    9px
    4px;

  color:
    rgba(255, 255, 255, 0.72);

  background:
    transparent;

  font-size:
    0.88rem;
  font-weight:
    400;

  text-decoration:
    none;

  cursor:
    pointer;

  transition:
    color var(--transition-standard),
    transform var(--transition-standard);
}

.processing-panel-link:hover {
  color:
    var(--white);

  transform:
    translateY(-1px);
}

.processing-panel-link:focus-visible {
  outline:
    2px solid rgba(255, 255, 255, 0.72);

  outline-offset:
    5px;

  border-radius:
    6px;
}

@media (max-width: 720px) {
  .search-page {
    padding:
      34px
      18px
      82px;
  }

  .search-logo {
    width:
      min(390px, 88vw);
  }

  .search-title {
    margin-bottom:
      30px;
  }

  .patient-search {
    padding:
      28px
      22px;

    border-radius:
      21px;
  }

  .medical-logout {
    right:
      22px;

    bottom:
      19px;
  }

  .processing-panel-link {
    left:
      22px;

    bottom:
      19px;
  }
}

@media (max-width: 420px) {
  .patient-search {
    padding:
      24px
      18px;
  }

  .patient-search__control input {
    padding-left:
      15px;

    font-size:
      0.94rem;
  }

  .patient-search__button {
    width:
      56px;
  }

  .medical-logout {
    right:
      18px;

    font-size:
      0.82rem;
  }

  .processing-panel-link {
    left:
      18px;

    font-size:
      0.82rem;
  }
}
/* ==========================================================
   10. PAINEL CLÍNICO
   10.1 ESTRUTURA GERAL
========================================================== */

.clinical-page {
  min-height: 100vh;
  min-height: 100svh;

  color:
    var(--text-dark);

  background:
    linear-gradient(
      rgba(8, 47, 40, 0.44),
      rgba(8, 47, 40, 0.56)
    ),
    url("../assets/backgrounds/Background_green.png")
    center center / cover
    fixed
    no-repeat;
}

.clinical-title-bar {
  position: sticky;
  top: 0;
  z-index: 40;

  min-height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    12px
    24px;

  color:
    var(--white);

  background:
    rgba(8, 47, 40, 0.96);

  border-bottom:
    1px solid rgba(255, 255, 255, 0.08);

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.12);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}

.clinical-title-bar h1 {
  font-size:
    clamp(
      1rem,
      2vw,
      1.35rem
    );

  font-weight:
    350;

  line-height:
    1.2;

  letter-spacing:
    clamp(
      0.12rem,
      0.36vw,
      0.3rem
    );

  text-align:
    center;

  text-transform:
    uppercase;
}

.clinical-main {
  position: relative;

  width:
    min(1560px, 100%);

  margin:
    0 auto;

  padding:
    30px
    28px
    48px;
}

.clinical-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(270px, 1fr)
    );

  gap:
    22px;

  align-items:
    stretch;
}

.association-pending {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  margin-bottom:
    22px;

  padding:
    14px
    18px;

  border:
    1px solid rgba(214, 74, 91, 0.3);

  border-radius:
    var(--radius-medium);

  color:
    var(--text-dark);

  background:
    rgba(246, 244, 238, 0.94);

  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.1);

  font-size:
    0.92rem;

  font-weight:
    650;

  cursor:
    pointer;

  transition:
    transform var(--transition-standard),
    box-shadow var(--transition-standard),
    border-color var(--transition-standard);
}

.association-pending:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(214, 74, 91, 0.55);

  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.15);
}

.association-pending[hidden] {
  display:
    none;
}

.unread-files {
  border-color:
    rgba(13, 70, 59, 0.3);
}

.unread-files:hover {
  border-color:
    rgba(13, 70, 59, 0.55);
}

@media (max-width: 900px) {
  .clinical-main {
    padding:
      24px
      20px
      40px;
  }

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

    gap:
      18px;
  }
}

@media (max-width: 620px) {
  .clinical-title-bar {
    min-height:
      54px;

    padding:
      10px
      16px;
  }

  .clinical-main {
    padding:
      20px
      16px
      34px;
  }

  .clinical-grid {
    grid-template-columns:
      1fr;

    gap:
      16px;
  }
}
/* ==========================================================
   10. PAINEL CLÍNICO
   10.2 FAIXA DE IDENTIFICAÇÃO DO PACIENTE
========================================================== */

.patient-header {
  position: sticky;
  top: 58px;
  z-index: 35;

  width: 100%;

  display: grid;
  grid-template-columns:
    minmax(190px, 0.9fr)
    minmax(360px, 2fr)
    minmax(260px, 1fr);

  align-items: center;

  gap: 28px;

  padding:
    20px
    30px;

  color:
    var(--text-dark);

  background:
    rgba(246, 244, 238, 0.98);

  border-bottom:
    1px solid rgba(23, 51, 44, 0.1);

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.12);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}

.patient-header__brand {
  display: flex;
  align-items: center;
}

.patient-header__brand img {
  width:
    min(240px, 100%);

  height:
    auto;
}

.patient-header__identity {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}

.patient-header__identity strong {
  max-width: 100%;

  color:
    var(--text-dark);

  font-size:
    clamp(
      1.15rem,
      2.2vw,
      1.75rem
    );

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    0.025rem;

  text-transform:
    uppercase;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.patient-header__details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  gap:
    7px
    10px;

  margin-top:
    8px;

  color:
    var(--text-muted);

  font-size:
    0.9rem;

  line-height:
    1.4;
}

.patient-header__details span[aria-hidden="true"] {
  color:
    rgba(214, 74, 91, 0.72);
}

.patient-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;

  gap:
    12px;
}

.search-another-patient,
.tv-mode-button,
.submission-history-button {
  min-height:
    44px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  padding:
    11px
    16px;

  border-radius:
    13px;

  font-size:
    0.88rem;

  font-weight:
    700;

  letter-spacing:
    0.02rem;

  text-decoration:
    none;

  cursor:
    pointer;

  transition:
    transform var(--transition-standard),
    box-shadow var(--transition-standard),
    background-color var(--transition-standard),
    border-color var(--transition-standard),
    color var(--transition-standard);
}

.search-another-patient {
  color:
    var(--white);

  background:
    #d64a5b;

  box-shadow:
    0 10px 24px rgba(214, 74, 91, 0.24);
}

.search-another-patient:hover {
  transform:
    translateY(-2px);

  background:
    #c73e4f;

  box-shadow:
    0 14px 32px rgba(214, 74, 91, 0.32);
}

.search-another-patient:active {
  transform:
    translateY(0);
}

.search-another-patient:focus-visible {
  outline:
    3px solid rgba(214, 74, 91, 0.22);

  outline-offset:
    4px;
}

.tv-mode-button,
.submission-history-button {
  border:
    1px solid rgba(23, 51, 44, 0.15);

  color:
    var(--text-dark);

  background:
    rgba(255, 255, 255, 0.7);

  box-shadow:
    none;
}

.tv-mode-button:hover,
.submission-history-button:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(23, 51, 44, 0.28);

  background:
    var(--white);

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.08);
}

.tv-mode-button[aria-pressed="true"] {
  color:
    var(--white);

  border-color:
    var(--green-dark);

  background:
    var(--green-dark);

  box-shadow:
    0 10px 24px rgba(8, 47, 40, 0.2);
}

.tv-mode-button:focus-visible {
  outline:
    3px solid rgba(13, 70, 59, 0.18);

  outline-offset:
    4px;
}

@media (max-width: 1100px) {
  .patient-header {
    grid-template-columns:
      180px
      minmax(300px, 1fr)
      auto;

    gap:
      20px;

    padding:
      18px
      22px;
  }

  .patient-header__brand img {
    width:
      190px;
  }

  .patient-header__actions {
    flex-direction:
      column;

    align-items:
      stretch;
  }

  .search-another-patient,
  .tv-mode-button {
    width:
      100%;
  }
}

@media (max-width: 820px) {
  .patient-header {
    position:
      relative;

    top:
      auto;

    grid-template-columns:
      1fr;

    justify-items:
      center;

    gap:
      16px;

    padding:
      20px
      18px;
  }

  .patient-header__brand {
    justify-content:
      center;
  }

  .patient-header__brand img {
    width:
      min(230px, 72vw);
  }

  .patient-header__identity strong {
    white-space:
      normal;
  }

  .patient-header__actions {
    width:
      min(420px, 100%);

    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      10px;
  }
}

@media (max-width: 520px) {
  .patient-header__details {
    flex-direction:
      column;

    gap:
      3px;
  }

  .patient-header__details span[aria-hidden="true"] {
    display:
      none;
  }

  .patient-header__actions {
    grid-template-columns:
      1fr;
  }
}
/* ==========================================================
   10. PAINEL CLÍNICO
   10.3 GRID DE CARDS CLÍNICOS
========================================================== */

.clinical-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap:
    22px;

  align-items:
    stretch;
}

.clinical-card {
  position: relative;

  min-width: 0;
  min-height: 280px;

  display: flex;
  flex-direction: column;

  padding:
    22px;

  overflow: hidden;

  border:
    1px solid rgba(255, 255, 255, 0.48);

  border-radius:
    22px;

  color:
    var(--text-dark);

  background:
    rgba(255, 255, 255, 0.97);

  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.14);

  cursor:
    pointer;

  transform:
    translateZ(0);

  transition:
    transform var(--transition-standard),
    box-shadow var(--transition-standard),
    border-color var(--transition-standard),
    opacity var(--transition-standard);
}

.clinical-card:hover {
  z-index: 4;

  transform:
    translateY(-4px)
    scale(1.035);

  border-color:
    rgba(255, 255, 255, 0.9);

  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.22);
}

.clinical-card:focus-visible {
  outline:
    3px solid rgba(255, 255, 255, 0.8);

  outline-offset:
    5px;
}

.clinical-grid:has(.clinical-card:hover)
.clinical-card:not(:hover) {
  opacity:
    0.78;
}

.clinical-card__accent {
  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 5px;

  background:
    var(--green-medium);
}

.clinical-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap:
    14px;

  margin-bottom:
    18px;
}

.clinical-card__title-group {
  min-width: 0;
}

.clinical-card__title {
  color:
    var(--text-dark);

  font-size:
    0.9rem;

  font-weight:
    800;

  line-height:
    1.25;

  letter-spacing:
    0.08rem;

  text-transform:
    uppercase;
}

.clinical-card__date {
  margin-top:
    5px;

  color:
    var(--text-muted);

  font-size:
    0.78rem;

  line-height:
    1.3;
}

.clinical-card__icon {
  width: 38px;
  height: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border-radius:
    12px;

  color:
    var(--green-dark);

  background:
    rgba(13, 70, 59, 0.08);

  font-size:
    1.05rem;
}

.clinical-card__results {
  display: flex;
  flex-direction: column;

  gap:
    11px;

  flex: 1;
}

.clinical-card__result {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items:
    baseline;

  gap:
    16px;

  padding-bottom:
    9px;

  border-bottom:
    1px solid rgba(23, 51, 44, 0.08);
}

.clinical-card__result:last-child {
  border-bottom:
    0;
}

.clinical-card__result-name {
  min-width:
    0;

  color:
    var(--text-muted);

  font-size:
    0.86rem;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.clinical-card__result-value {
  color:
    var(--text-dark);

  font-size:
    0.98rem;

  font-weight:
    750;

  text-align:
    right;

  white-space:
    nowrap;
}

.clinical-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap:
    12px;

  margin-top:
    18px;

  padding-top:
    14px;

  border-top:
    1px solid rgba(23, 51, 44, 0.08);
}

.clinical-card__more {
  color:
    var(--text-muted);

  font-size:
    0.78rem;
}

.clinical-card__chevron {
  width: 30px;
  height: 30px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius:
    9px;

  color:
    var(--green-dark);

  background:
    rgba(13, 70, 59, 0.08);

  font-size:
    1rem;

  transition:
    transform var(--transition-standard),
    background-color var(--transition-standard);
}

.clinical-card:hover .clinical-card__chevron {
  transform:
    translateY(2px);

  background:
    rgba(13, 70, 59, 0.14);
}

.clinical-card.is-sensitive
.clinical-card__results {
  filter:
    blur(8px);

  user-select:
    none;

  pointer-events:
    none;
}

.clinical-card__privacy-label {
  position: absolute;

  left: 50%;
  top: 57%;

  z-index: 2;

  transform:
    translate(-50%, -50%);

  padding:
    9px
    13px;

  border-radius:
    10px;

  color:
    var(--white);

  background:
    rgba(8, 47, 40, 0.88);

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.18);

  font-size:
    0.78rem;

  font-weight:
    700;

  white-space:
    nowrap;
}

.clinical-card.is-revealed
.clinical-card__results {
  filter:
    none;

  user-select:
    auto;

  pointer-events:
    auto;
}

.clinical-card.is-revealed
.clinical-card__privacy-label {
  display:
    none;
}

.clinical-card.is-attention
.clinical-card__accent {
  background:
    #d8a93b;
}

.clinical-card.is-altered
.clinical-card__accent {
  background:
    #d64a5b;
}

@media (max-width: 1240px) {
  .clinical-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }
}

@media (max-width: 900px) {
  .clinical-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      18px;
  }
}

@media (max-width: 620px) {
  .clinical-grid {
    grid-template-columns:
      1fr;

    gap:
      16px;
  }

  .clinical-card {
    min-height:
      250px;

    padding:
      20px;
  }
}
/* ==========================================================
   10. PAINEL CLÍNICO
   10.4 PAINEL LATERAL
========================================================== */

.clinical-side-panel {
  position: fixed;
  top: 0;
  right: -640px;
  z-index: 90;

  width: min(620px, 100vw);
  height: 100dvh;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border-left:
    1px solid rgba(8, 47, 40, 0.10);

  background:
    #ffffff;

  box-shadow:
    -22px 0 56px rgba(8, 47, 40, 0.18);

  transition:
    right 0.30s ease;
}

.clinical-side-panel.is-open {
  right: 0;
}


/* ---------- camada de fundo ---------- */

.side-panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;

  border: 0;

  background:
    rgba(5, 26, 22, 0.38);

  cursor: pointer;

  backdrop-filter:
    blur(2px);

  -webkit-backdrop-filter:
    blur(2px);
}

.side-panel-backdrop[hidden] {
  display: none;
}


/* ---------- cabeçalho ---------- */

.side-panel__header {
  position: relative;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 22px;

  padding:
    28px
    30px
    24px;

  border-bottom:
    1px solid rgba(8, 47, 40, 0.09);

  background:
    linear-gradient(
      135deg,
      var(--off-white),
      #ffffff
    );
}

.side-panel__header::after {
  content: "";

  position: absolute;

  left: 30px;
  bottom: -1px;

  width: 64px;
  height: 3px;

  border-radius:
    3px 3px 0 0;

  background:
    var(--green-medium);
}

.side-panel__eyebrow {
  margin:
    0 0 7px;

  color:
    var(--green-medium);

  font-size:
    0.72rem;

  font-weight:
    800;

  letter-spacing:
    0.13rem;

  text-transform:
    uppercase;
}

.side-panel__header h2 {
  margin: 0;

  color:
    var(--text-dark);

  font-size:
    clamp(
      1.22rem,
      2.8vw,
      1.55rem
    );

  font-weight:
    800;

  line-height:
    1.18;

  letter-spacing:
    -0.025rem;
}

.side-panel__close {
  width: 42px;
  height: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border:
    1px solid rgba(8, 47, 40, 0.08);

  border-radius:
    12px;

  color:
    var(--text-muted);

  background:
    rgba(255, 255, 255, 0.72);

  font-size:
    1.5rem;

  line-height:
    1;

  cursor:
    pointer;

  transition:
    color 0.20s ease,
    border-color 0.20s ease,
    background-color 0.20s ease,
    transform 0.20s ease;
}

.side-panel__close:hover {
  color:
    var(--green-dark);

  border-color:
    rgba(8, 47, 40, 0.16);

  background:
    #ffffff;

  transform:
    translateY(-1px);
}

.side-panel__close:focus-visible {
  outline:
    3px solid rgba(13, 70, 59, 0.18);

  outline-offset:
    3px;
}


/* ---------- conteúdo ---------- */

.side-panel__content {
  flex: 1;

  overflow-y: auto;
  overscroll-behavior: contain;

  padding:
    28px 30px 42px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfcfb 100%
    );

  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(8, 47, 40, 0.26)
    transparent;
}

.side-panel__content::-webkit-scrollbar {
  width: 8px;
}

.side-panel__content::-webkit-scrollbar-track {
  background:
    transparent;
}

.side-panel__content::-webkit-scrollbar-thumb {
  border:
    2px solid transparent;

  border-radius:
    999px;

  background:
    rgba(8, 47, 40, 0.24);

  background-clip:
    padding-box;
}


/* ==========================================================
   EXAME ABERTO
========================================================== */

.side-panel-exam {
  display: flex;
  flex-direction: column;

  gap: 22px;
}


/* ---------- informações do exame ---------- */

.side-panel-exam__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding:
    15px 17px;

  border:
    1px solid rgba(8, 47, 40, 0.08);

  border-radius:
    16px;

  background:
    var(--off-white);
}

.side-panel-exam__date {
  color:
    var(--text-muted);

  font-size:
    0.85rem;

  line-height:
    1.4;
}

.side-panel-exam__date strong {
  color:
    var(--text-dark);

  font-weight:
    800;
}

.side-panel-exam__count {
  flex-shrink: 0;

  padding:
    7px 10px;

  border-radius:
    999px;

  color:
    var(--green-dark);

  background:
    rgba(13, 70, 59, 0.09);

  font-size:
    0.75rem;

  font-weight:
    800;

  white-space:
    nowrap;
}


/* ---------- lista de resultados ---------- */

.side-panel-exam__results {
  overflow: hidden;

  border:
    1px solid rgba(8, 47, 40, 0.09);

  border-radius:
    18px;

  background:
    #ffffff;

  box-shadow:
    0 10px 28px rgba(8, 47, 40, 0.05);
}

.side-panel-exam__result {
  min-height: 58px;

  display: grid;
  grid-template-columns:
    20px
    minmax(0, 1fr)
    minmax(120px, auto);

  align-items: center;

  gap: 14px;

  padding:
    14px 17px;

  border-bottom:
    1px solid rgba(8, 47, 40, 0.065);

  transition:
    background-color 0.18s ease;
}

.side-panel-exam__result:last-child {
  border-bottom: 0;
}

.side-panel-exam__result:hover {
  background:
    rgba(246, 244, 238, 0.54);
}

.summary-toggle-spacer {
  display: block;

  width: 20px;
}

.summary-toggle-label {
  display: flex;
  align-items: center;
  justify-content: center;
}

.summary-toggle {
  width: 17px;
  height: 17px;

  accent-color:
    var(--green-medium);

  cursor: pointer;
}

.side-panel-exam__result-name {
  min-width: 0;

  color:
    var(--text-muted);

  font-size:
    0.88rem;

  font-weight:
    600;

  line-height:
    1.38;
}

.side-panel-exam__result-value {
  max-width: 260px;

  color:
    var(--text-dark);

  font-size:
    0.93rem;

  font-weight:
    800;

  line-height:
    1.35;

  text-align:
    right;

  overflow-wrap:
    anywhere;
}


/* ==========================================================
   SEÇÕES COMPLEMENTARES
========================================================== */

.side-section {
  margin-bottom:
    30px;
}

.side-section:last-child {
  margin-bottom:
    0;
}

.side-section h3 {
  display: flex;
  align-items: center;

  gap: 9px;

  margin:
    0 0 13px;

  color:
    var(--green-dark);

  font-size:
    0.78rem;

  font-weight:
    800;

  letter-spacing:
    0.09rem;

  text-transform:
    uppercase;
}

.side-section h3::before {
  content: "";

  width: 4px;
  height: 16px;

  border-radius:
    999px;

  background:
    var(--green-medium);
}


/* ---------- tabela genérica ---------- */

.side-table {
  width: 100%;

  overflow: hidden;

  border:
    1px solid rgba(8, 47, 40, 0.08);

  border-collapse:
    separate;

  border-spacing:
    0;

  border-radius:
    16px;

  background:
    #ffffff;
}

.side-table tr:last-child td {
  border-bottom:
    0;
}

.side-table td {
  padding:
    13px 15px;

  border-bottom:
    1px solid rgba(8, 47, 40, 0.06);

  font-size:
    0.88rem;

  line-height:
    1.4;
}

.side-table td:first-child {
  color:
    var(--text-muted);

  font-weight:
    600;
}

.side-table td:last-child {
  color:
    var(--text-dark);

  font-weight:
    800;

  text-align:
    right;
}


/* ==========================================================
   CULTURA E ANTIBIOGRAMA
========================================================== */

.culture-exam-block {
  padding-bottom:
    22px;

  border-bottom:
    1px solid rgba(8, 47, 40, 0.10);
}

.culture-exam-block + .culture-exam-block {
  margin-top:
    22px;
}

.culture-exam-block:last-child {
  padding-bottom:
    0;

  border-bottom:
    0;
}

.culture-exam-block__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;
}

.culture-exam-block__name {
  color:
    var(--green-dark);

  font-size:
    1.02rem;
  font-weight:
    800;
}

.culture-exam-block__date {
  margin-top:
    4px;

  color:
    var(--text-muted);

  font-size:
    0.84rem;
  font-weight:
    600;
}

.culture-exam-block__status {
  flex-shrink: 0;

  padding:
    5px 14px;

  border-radius:
    999px;

  font-size:
    0.8rem;
  font-weight:
    800;
  text-transform:
    uppercase;
  letter-spacing:
    0.02em;
}

.culture-exam-block__status.is-positive {
  color:
    #7a3b12;

  background:
    rgba(214, 133, 43, 0.18);
}

.culture-exam-block__status.is-negative {
  color:
    var(--green-dark);

  background:
    rgba(13, 70, 59, 0.12);
}

.submission-history {
  display: flex;
  flex-direction: column;

  gap:
    22px;
}

.submission-block {
  padding-bottom:
    22px;

  border-bottom:
    1px solid rgba(8, 47, 40, 0.10);
}

.submission-block:last-child {
  padding-bottom:
    0;

  border-bottom:
    0;
}

.submission-block__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap:
    16px;

  margin-bottom:
    8px;
}

.submission-block__title {
  color:
    var(--green-dark);

  font-size:
    1rem;
  font-weight:
    800;
}

.submission-block__meta {
  margin-top:
    4px;

  color:
    var(--text-muted);

  font-size:
    0.84rem;
}

.submission-block__status {
  flex-shrink: 0;

  padding:
    5px 14px;

  border-radius:
    999px;

  color:
    var(--green-dark);

  background:
    rgba(13, 70, 59, 0.10);

  font-size:
    0.78rem;
  font-weight:
    700;
}

.submission-block__files {
  display: flex;
  flex-direction: column;
}

.culture-summary {
  display: grid;

  gap: 12px;

  padding:
    17px;

  border:
    1px solid rgba(8, 47, 40, 0.09);

  border-radius:
    18px;

  background:
    linear-gradient(
      135deg,
      rgba(246, 244, 238, 0.88),
      #ffffff
    );
}

.culture-summary__organism {
  color:
    var(--text-dark);

  font-size:
    1.02rem;

  font-weight:
    800;

  line-height:
    1.35;
}

.culture-summary__detail {
  color:
    var(--text-muted);

  font-size:
    0.86rem;

  line-height:
    1.45;
}


/* ---------- grupos do antibiograma ---------- */

.antibiogram-groups {
  display: grid;

  gap: 18px;
}

.antibiogram-group {
  overflow: hidden;

  border:
    1px solid rgba(8, 47, 40, 0.08);

  border-radius:
    17px;

  background:
    #ffffff;
}

.antibiogram-group__title {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding:
    12px 15px;

  border-bottom:
    1px solid rgba(8, 47, 40, 0.06);

  color:
    var(--text-dark);

  background:
    var(--off-white);

  font-size:
    0.80rem;

  font-weight:
    800;

  letter-spacing:
    0.045rem;

  text-transform:
    uppercase;
}

.antibiogram-group__count {
  padding:
    4px 8px;

  border-radius:
    999px;

  background:
    rgba(8, 47, 40, 0.08);

  font-size:
    0.70rem;
}

.antibiogram-group__item {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  padding:
    12px 15px;

  border-bottom:
    1px solid rgba(8, 47, 40, 0.055);
}

.antibiogram-group__item:last-child {
  border-bottom:
    0;
}

.antibiogram-group__name {
  color:
    var(--text-muted);

  font-size:
    0.86rem;

  font-weight:
    600;
}

.antibiogram-group__profile {
  min-width: 34px;

  padding:
    5px 8px;

  border-radius:
    8px;

  font-size:
    0.74rem;

  font-weight:
    900;

  text-align:
    center;
}


/* ---------- tabela tradicional do antibiograma ---------- */

.antibiogram {
  width: 100%;

  overflow: hidden;

  border:
    1px solid rgba(8, 47, 40, 0.08);

  border-collapse:
    separate;

  border-spacing:
    0;

  border-radius:
    16px;

  background:
    #ffffff;
}

.antibiogram th {
  padding:
    11px 13px;

  color:
    #ffffff;

  background:
    var(--green-dark);

  font-size:
    0.75rem;

  font-weight:
    800;

  letter-spacing:
    0.045rem;

  text-align:
    left;

  text-transform:
    uppercase;
}

.antibiogram th:last-child {
  text-align:
    center;
}

.antibiogram td {
  padding:
    11px 13px;

  border-bottom:
    1px solid rgba(8, 47, 40, 0.06);

  color:
    var(--text-muted);

  font-size:
    0.86rem;
}

.antibiogram tr:last-child td {
  border-bottom:
    0;
}

.antibiogram td:last-child {
  text-align:
    center;
}


/* ---------- perfis microbiológicos ---------- */

.profile-S {
  color:
    #187743;

  background:
    rgba(24, 119, 67, 0.10);

  font-weight:
    800;
}

.profile-I {
  color:
    #9b6a00;

  background:
    rgba(197, 139, 11, 0.12);

  font-weight:
    800;
}

.profile-R {
  color:
    #a93636;

  background:
    rgba(201, 63, 63, 0.10);

  font-weight:
    800;
}


/* ==========================================================
   HISTÓRICO
========================================================== */

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding:
    13px 3px;

  border-bottom:
    1px solid rgba(8, 47, 40, 0.06);
}

.history-item:last-child {
  border-bottom:
    0;
}

.history-date {
  color:
    var(--text-muted);

  font-size:
    0.84rem;

  font-weight:
    600;
}

.history-link {
  color:
    var(--green-dark);

  font-size:
    0.84rem;

  font-weight:
    800;

  text-decoration:
    none;
}

.history-link:hover {
  text-decoration:
    underline;
}


/* ==========================================================
   EXAME ORIGINAL
========================================================== */

.original-file {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  min-height: 46px;

  padding:
    12px 17px;

  border:
    1px solid rgba(8, 47, 40, 0.10);

  border-radius:
    13px;

  color:
    var(--green-dark);

  background:
    var(--off-white);

  font-size:
    0.86rem;

  font-weight:
    800;

  text-decoration:
    none;

  transition:
    background-color 0.20s ease,
    border-color 0.20s ease,
    box-shadow 0.20s ease,
    transform 0.20s ease;
}

.original-file:hover {
  border-color:
    rgba(8, 47, 40, 0.18);

  background:
    #ffffff;

  box-shadow:
    0 9px 22px rgba(8, 47, 40, 0.08);

  transform:
    translateY(-1px);
}


/* ==========================================================
   PENDÊNCIAS DE ASSOCIAÇÃO
========================================================== */

.clinical-grid__empty {
  grid-column: 1 / -1;

  padding:
    28px;

  border:
    1px dashed var(--border-soft);

  border-radius:
    var(--radius-medium);

  color:
    rgba(255, 255, 255, 0.75);

  font-size:
    0.94rem;

  text-align:
    center;
}

.pending-loading,
.pending-empty {
  padding:
    18px 3px;

  color:
    var(--text-muted);

  font-size:
    0.9rem;
}

.pending-list {
  display: flex;
  flex-direction: column;

  gap:
    18px;
}

.pending-item {
  padding:
    16px;

  border:
    1px solid rgba(8, 47, 40, 0.10);

  border-radius:
    var(--radius-medium);

  background:
    var(--off-white);
}

.pending-item__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap:
    12px;

  margin-bottom:
    12px;
}

.pending-item__name {
  color:
    var(--green-dark);

  font-size:
    0.96rem;
  font-weight:
    800;
  text-transform:
    capitalize;
}

.pending-item__meta {
  margin-top:
    4px;

  color:
    var(--text-muted);

  font-size:
    0.82rem;
}

.pending-item__count {
  flex-shrink: 0;

  min-width: 26px;

  padding:
    2px 8px;

  border-radius:
    999px;

  background:
    var(--green-medium);

  color:
    var(--white);

  font-size:
    0.78rem;
  font-weight:
    700;
  text-align:
    center;
}

.pending-item__form {
  display: flex;
  flex-direction: column;

  gap:
    10px;
}

.pending-item__select,
.pending-item__input {
  width: 100%;

  padding:
    10px 12px;

  border:
    1px solid rgba(8, 47, 40, 0.16);

  border-radius:
    10px;

  color:
    var(--text-dark);

  background:
    var(--white);

  font-size:
    0.86rem;
}

.pending-item__new-fields {
  display: flex;
  flex-direction: column;

  gap:
    10px;

  padding:
    12px;

  border-left:
    3px solid var(--green-medium);

  border-radius:
    8px;

  background:
    rgba(13, 70, 59, 0.05);
}

.pending-item__new-fields[hidden],
.pending-item__new-category[hidden] {
  display: none;
}

.pending-item__error {
  color:
    #b3261e;

  font-size:
    0.82rem;
}

.pending-item__error[hidden] {
  display: none;
}

.pending-item__actions {
  display: flex;
  justify-content: flex-end;

  gap:
    10px;
}

.pending-item__ignore,
.pending-item__associate,
.unread-item__associate {
  padding:
    9px 16px;

  border-radius:
    999px;

  font-size:
    0.84rem;
  font-weight:
    700;

  cursor: pointer;

  transition:
    transform var(--transition-standard),
    opacity var(--transition-standard);
}

.pending-item__ignore {
  border:
    1px solid rgba(8, 47, 40, 0.18);

  color:
    var(--green-dark);

  background:
    transparent;
}

.pending-item__associate,
.unread-item__associate {
  border:
    none;

  color:
    var(--white);

  background:
    var(--green-medium);
}

.pending-item__ignore:hover,
.pending-item__associate:hover,
.unread-item__associate:hover {
  transform:
    translateY(-1px);
}

.pending-item__ignore:disabled,
.pending-item__associate:disabled,
.unread-item__associate:disabled {
  cursor: default;

  opacity: 0.6;

  transform: none;
}

.document-item {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap:
    16px;

  padding:
    14px 3px;

  border-bottom:
    1px solid rgba(8, 47, 40, 0.065);
}

.document-item:last-child {
  border-bottom: 0;
}

.document-item__name {
  color:
    var(--green-dark);

  font-size:
    0.94rem;
  font-weight:
    700;
}

.document-item__date {
  margin-top:
    3px;

  color:
    var(--text-muted);

  font-size:
    0.82rem;
}

.document-item__open {
  flex-shrink: 0;

  font-size:
    0.8rem;

  min-height: auto;

  padding:
    9px 14px;
}


/* ==========================================================
   RESPONSIVIDADE
========================================================== */

@media (max-width: 680px) {

  .clinical-side-panel {
    right: -100%;

    width: 100%;
  }

  .side-panel__header {
    padding:
      22px 20px
      20px;
  }

  .side-panel__header::after {
    left: 20px;
  }

  .side-panel__content {
    padding:
      22px 18px
      34px;
  }

  .side-panel-exam__meta {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .side-panel-exam__result {
    grid-template-columns:
      1fr;

    gap:
      6px;
  }

  .side-panel-exam__result-value {
    max-width:
      none;

    text-align:
      left;
  }

  .antibiogram-group__item {
    align-items:
      flex-start;
  }

}
/* ==========================================================
   10. PAINEL CLÍNICO
   10.5 MODO TV
========================================================== */

/*
  O JavaScript ativará este modo adicionando a classe
  "is-tv-mode" ao elemento .clinical-page.
*/

.clinical-page.is-tv-mode .clinical-main {
  width:
    min(1800px, 100%);

  padding:
    36px
    34px
    56px;
}

.clinical-page.is-tv-mode .clinical-grid {
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    28px;
}

.clinical-page.is-tv-mode .clinical-card {
  min-height:
    340px;

  padding:
    28px;

  border-radius:
    26px;
}

.clinical-page.is-tv-mode .clinical-card:hover {
  transform:
    translateY(-5px)
    scale(1.045);
}

.clinical-page.is-tv-mode .clinical-card__accent {
  height:
    6px;
}

.clinical-page.is-tv-mode .clinical-card__header {
  margin-bottom:
    24px;
}

.clinical-page.is-tv-mode .clinical-card__title {
  font-size:
    1.08rem;

  letter-spacing:
    0.1rem;
}

.clinical-page.is-tv-mode .clinical-card__date {
  margin-top:
    7px;

  font-size:
    0.9rem;
}

.clinical-page.is-tv-mode .clinical-card__icon {
  width:
    46px;

  height:
    46px;

  border-radius:
    14px;

  font-size:
    1.22rem;
}

.clinical-page.is-tv-mode .clinical-card__results {
  gap:
    15px;
}

.clinical-page.is-tv-mode .clinical-card__result {
  gap:
    20px;

  padding-bottom:
    12px;
}

.clinical-page.is-tv-mode .clinical-card__result-name {
  font-size:
    1rem;
}

.clinical-page.is-tv-mode .clinical-card__result-value {
  font-size:
    1.18rem;
}

.clinical-page.is-tv-mode .clinical-card__footer {
  margin-top:
    22px;

  padding-top:
    18px;
}

.clinical-page.is-tv-mode .clinical-card__more {
  font-size:
    0.9rem;
}

.clinical-page.is-tv-mode .clinical-card__chevron {
  width:
    38px;

  height:
    38px;

  border-radius:
    11px;

  font-size:
    1.18rem;
}

/* Faixa de identificação no Modo TV */

.clinical-page.is-tv-mode .patient-header {
  grid-template-columns:
    minmax(220px, 0.8fr)
    minmax(440px, 2fr)
    minmax(300px, 1fr);

  gap:
    34px;

  padding:
    24px
    36px;
}

.clinical-page.is-tv-mode
.patient-header__brand img {
  width:
    min(270px, 100%);
}

.clinical-page.is-tv-mode
.patient-header__identity strong {
  font-size:
    clamp(
      1.45rem,
      2.5vw,
      2.05rem
    );
}

.clinical-page.is-tv-mode
.patient-header__details {
  margin-top:
    10px;

  font-size:
    1.02rem;
}

/* Painel lateral ocupando aproximadamente metade da tela */

.clinical-page.is-tv-mode
.clinical-side-panel {
  right:
    -52vw;

  width:
    min(
      52vw,
      920px
    );
}

.clinical-page.is-tv-mode
.clinical-side-panel.is-open {
  right:
    0;
}

.clinical-page.is-tv-mode
.side-panel__header {
  padding:
    30px
    34px;
}

.clinical-page.is-tv-mode
.side-panel__header h2 {
  font-size:
    1.62rem;
}

.clinical-page.is-tv-mode
.side-panel__eyebrow {
  font-size:
    0.86rem;
}

.clinical-page.is-tv-mode
.side-panel__content {
  padding:
    34px;
}

.clinical-page.is-tv-mode
.side-table td {
  padding:
    15px
    6px;

  font-size:
    1.05rem;
}

.clinical-page.is-tv-mode
.antibiogram th,
.clinical-page.is-tv-mode
.antibiogram td {
  padding:
    14px;

  font-size:
    1rem;
}

/* Indicação visual de que o modo está ativo */

.clinical-page.is-tv-mode
.tv-mode-button {
  color:
    var(--white);

  border-color:
    var(--green-dark);

  background:
    var(--green-dark);

  box-shadow:
    0 10px 24px rgba(8, 47, 40, 0.22);
}

/* Em telas menores, o Modo TV não força três colunas */

@media (max-width: 1100px) {
  .clinical-page.is-tv-mode .clinical-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .clinical-page.is-tv-mode
  .clinical-side-panel {
    right:
      -70vw;

    width:
      min(
        70vw,
        760px
      );
  }

  .clinical-page.is-tv-mode
  .clinical-side-panel.is-open {
    right:
      0;
  }
}

@media (max-width: 700px) {
  .clinical-page.is-tv-mode .clinical-grid {
    grid-template-columns:
      1fr;
  }

  .clinical-page.is-tv-mode
  .clinical-side-panel {
    right:
      -100vw;

    width:
      100vw;
  }

  .clinical-page.is-tv-mode
  .clinical-side-panel.is-open {
    right:
      0;
  }
}