:root {
    --brand-blue: #0b2b54;
    --brand-navy: #061f3d;
    --brand-blue-2: #32597a;
    --brand-gold: #d6b271;
    --brand-gold-2: #d6b273;
    --brand-white: #ffffff;
    --brand-ink: #0b1f3a;
    --brand-bg: #f6f7fb;
}

body {
    margin: 0;
    background: #f4f7fb;
    color: var(--brand-ink);
    font-family: "Montserrat", "Agrandir Wide", "Segoe UI", sans-serif;
    font-size: 14px;
}

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

.sidebar {
    width: 253px;
    background:
        radial-gradient(circle at 30% 12%, rgba(41,107,170,.22), transparent 32%),
        linear-gradient(180deg, #052542 0%, #041b35 48%, #03182f 100%);
    color: var(--brand-white);
    padding: 30px 20px 24px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.brand-lockup {
    display: flex;
    gap: 11px;
    align-items: center;
    margin-bottom: 42px;
}

.brand-symbol {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border: 0;
    background: #ffffff;
    border-radius: 8px;
    padding: 3px;
}

.brand-name {
    font-family: "Montserrat", "Agrandir Wide", "Segoe UI", sans-serif;
    font-size: 23px;
    line-height: 1;
    color: #ffffff;
    font-weight: 800;
    letter-spacing: -.02em;
}

.brand-lockup small {
    color: rgba(255,255,255,.76);
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: .08em;
}

.sidebar-nav {
    display: grid;
    gap: 10px;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 14px;
    color: rgba(255,255,255,.88);
    text-decoration: none;
    padding: 13px 14px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 9px;
    font-weight: 600;
}

.sidebar-nav a i {
    width: 24px;
    min-width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    font-size: 20px;
    line-height: 1;
}

.sidebar-nav a:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.12);
    color: var(--brand-white);
}

.sidebar-nav a.active {
    background: linear-gradient(135deg, #1d63d7 0%, #0d4cb7 100%);
    box-shadow: 0 12px 26px rgba(12,76,183,.32);
    color: #ffffff;
}

.sidebar-footer {
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,.18);
    padding-top: 20px;
    color: rgba(255,255,255,.75);
}

.sidebar-user {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.sidebar-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.94);
    color: var(--brand-blue);
    font-weight: 800;
}

.sidebar-user strong {
    display: block;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.2;
}

.sidebar-user small {
    color: rgba(255,255,255,.72);
}

.main-content {
    flex: 1;
    padding: 28px 32px;
    min-width: 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(244,247,251,.88) 28%, #f4f7fb 100%);
}

.brand-title, h1, h2, h3 {
    font-family: "Cormorant Garamond", serif;
    color: var(--brand-blue);
    font-weight: 700;
}

.brand-title {
    font-size: 42px;
}

.section-label {
    color: var(--brand-gold);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
}

.brand-hero {
    background: var(--brand-white);
    border-left: 4px solid var(--brand-gold);
    padding: 22px 24px;
    box-shadow: 0 8px 24px rgba(11,43,84,.06);
}

.clinical-card, .metric-card {
    border: 1px solid rgba(11,43,84,.08);
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(11,43,84,.055);
    overflow: hidden;
}

.metric-card {
    background: var(--brand-white);
    padding: 18px;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.metric-card-primary {
    border-left: 4px solid var(--brand-gold);
}

.panel-section-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.panel-section-title span {
    color: #667085;
    font-size: 13px;
}

.panel-work-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, .85fr);
    gap: 16px;
    align-items: start;
}

.panel-work-card {
    overflow: hidden;
}

.panel-work-card .card-header {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom-color: rgba(11,43,84,.08);
}

.panel-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
}

.panel-list-item strong {
    color: var(--brand-blue);
}

.panel-time {
    color: var(--brand-blue);
    font-weight: 700;
    white-space: nowrap;
}

.empty-state {
    min-height: 84px;
    display: flex;
    align-items: center;
    padding: 18px;
    color: #667085;
    background: rgba(11,43,84,.025);
}

.metric-card span {
    color: #5d6b7a;
    font-size: 13px;
}

.metric-card strong {
    color: var(--brand-blue);
    font-size: 34px;
    line-height: 1;
}

.module-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid rgba(11,43,84,.08);
    padding: 0 0 24px;
    margin-bottom: 18px;
}

.module-hero h1 {
    margin: 6px 0 4px;
    color: #071426;
    font-family: "Montserrat", "Agrandir Wide", "Segoe UI", sans-serif;
    font-size: 30px;
    font-weight: 800;
}

.module-hero p {
    color: #536178;
    margin: 0;
}

.module-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #14233d;
    text-decoration: none;
    font-weight: 700;
}

.module-date {
    color: var(--brand-blue);
    background: rgba(214,178,113,.22);
    border: 1px solid rgba(214,178,113,.5);
    padding: 8px 13px;
    font-weight: 800;
}

.module-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.module-hero-actions .btn,
.patient-topbar-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.module-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.module-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 13px 16px;
    background: #fff;
    color: var(--brand-blue);
    text-decoration: none;
    border: 1px solid rgba(11,43,84,.1);
    border-left: 4px solid var(--brand-gold);
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(11,43,84,.045);
    font-weight: 800;
}

.module-action i {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: var(--brand-blue);
    background: rgba(214,178,113,.18);
    border-radius: 8px;
    order: 2;
}

.module-action:hover {
    color: var(--brand-blue);
    border-color: rgba(11,43,84,.22);
    transform: translateY(-1px);
}

.module-search-card {
    background: #fff;
    border: 1px solid rgba(11,43,84,.08);
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(11,43,84,.055);
}

.module-metric {
    position: relative;
    min-height: 120px;
}

.module-metric i {
    position: absolute;
    right: 16px;
    top: 16px;
    color: rgba(11,43,84,.18);
    font-size: 28px;
}

.patient-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.patient-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #14233d;
    text-decoration: none;
    font-weight: 700;
}

.patient-topbar-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.patient-profile-hero {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 22px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid rgba(11,43,84,.08);
    padding: 0 0 24px;
    margin-bottom: 0;
}

.patient-profile-photo {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    overflow: hidden;
    background: #e7edf5;
    display: grid;
    place-items: center;
    color: var(--brand-blue);
    font-size: 34px;
    font-weight: 800;
    position: relative;
}

.patient-profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.patient-photo-form {
    position: absolute;
    inset: auto 0 0 0;
    margin: 0;
}

.patient-photo-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    margin: 0;
    padding: 6px 4px;
    background: rgba(11,43,84,.86);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.patient-photo-button:hover {
    background: rgba(11,43,84,.96);
}

.patient-profile-info h1 {
    margin: 0;
    color: #071426;
    font-family: "Montserrat", "Agrandir Wide", "Segoe UI", sans-serif;
    font-size: 28px;
    font-weight: 800;
}

.patient-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    color: #263550;
    font-size: 15px;
}

.patient-profile-meta span {
    border-right: 1px solid rgba(11,43,84,.22);
    padding-right: 10px;
}

.patient-profile-meta span:last-child {
    border-right: 0;
}

.patient-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.patient-section-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid rgba(11,43,84,.09);
    padding: 0 0 0 0;
    margin-bottom: 16px;
}

.patient-section-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 15px 13px;
    color: #516078;
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    background: transparent;
}

.patient-section-tabs button.active {
    color: var(--brand-blue);
    border-color: var(--brand-blue);
}

.btn-brand {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: var(--brand-white);
}

.btn-brand:hover {
    background: #082244;
    border-color: #082244;
    color: var(--brand-white);
}

.btn-gold {
    background: var(--brand-gold);
    border-color: var(--brand-gold);
    color: var(--brand-blue);
    font-weight: 700;
}

.ia-alert-item {
    border-left: 4px solid var(--brand-gold);
    padding-left: 0.9rem !important;
}

.ia-clean-list {
    margin: 0;
    padding-left: 1rem;
}

.ia-clean-list li {
    margin-bottom: 0.5rem;
}

.bg-brand-soft {
    background: rgba(214,178,113,.22);
    color: var(--brand-blue);
}

.form-control:focus, .form-select:focus {
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 .2rem rgba(214,178,113,.2);
}

@media (max-width: 768px) {
    .app-shell { display: block; }
    .sidebar { position: static; width: 100%; height: auto; }
    .main-content { padding: 18px; }
    .module-hero,
    .patient-topbar {
        display: grid;
        gap: 14px;
    }
    .module-hero-actions,
    .patient-topbar-actions {
        justify-content: flex-start;
    }
}
h4, h5, h6, .card-header strong {
    font-family: "Montserrat", "Agrandir Wide", "Segoe UI", sans-serif;
    color: var(--brand-ink);
    font-weight: 700;
}

.ll-report-page {
    max-width: 1500px;
    margin: 0 auto;
}

.ll-report-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.ll-back-link {
    color: var(--brand-blue);
    font-weight: 700;
    text-decoration: none;
}

.ll-patient-hero {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 210px;
    align-items: center;
    gap: 22px;
    background: #fff;
    border: 1px solid rgba(11,43,84,.1);
    box-shadow: 0 10px 30px rgba(11,43,84,.06);
    padding: 18px 22px;
}

.ll-patient-photo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(11,43,84,.08);
    display: grid;
    place-items: center;
    color: var(--brand-blue);
    font-family: "Cormorant Garamond", serif;
    font-size: 32px;
    font-weight: 700;
}

.ll-patient-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ll-patient-headline h1 {
    margin: 0;
    color: #08172d;
    font-family: "Montserrat", "Agrandir Wide", "Segoe UI", sans-serif;
    font-size: 26px;
    font-weight: 800;
}

.ll-status-pill {
    background: rgba(40,167,69,.15);
    color: #1c7c3a;
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 700;
}

.ll-patient-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    color: #25364f;
}

.ll-patient-meta span {
    border-right: 1px solid rgba(11,43,84,.2);
    padding-right: 10px;
}

.ll-patient-meta span:last-child {
    border-right: 0;
}

.ll-report-brand {
    display: grid;
    justify-items: center;
    gap: 3px;
    text-align: center;
    color: var(--brand-blue);
}

.ll-report-brand img {
    width: 82px;
    height: 82px;
    object-fit: contain;
}

.ll-report-brand strong {
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 13px;
}

.ll-report-brand small {
    color: #667085;
    text-transform: uppercase;
    font-size: 9px;
}

.ll-report-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    background: #fff;
    border: 1px solid rgba(11,43,84,.08);
    border-top: 0;
    padding: 0 18px;
    margin-bottom: 16px;
}

.ll-report-tabs span {
    padding: 14px 10px;
    color: #536178;
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}

.ll-report-tabs .active {
    color: var(--brand-blue);
    border-color: var(--brand-blue);
}

.ll-report-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 16px;
    align-items: start;
}

.ll-report-main,
.ll-report-side {
    display: grid;
    gap: 16px;
}

.ll-report-row {
    display: grid;
    grid-template-columns: minmax(260px, .85fr) minmax(360px, 1.65fr);
    gap: 16px;
}

.ll-card {
    background: #fff;
    border: 1px solid rgba(11,43,84,.1);
    box-shadow: 0 10px 28px rgba(11,43,84,.055);
    padding: 18px;
}

.ll-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.ll-card-title h2 {
    margin: 0;
    color: var(--brand-blue);
    text-transform: uppercase;
    font-family: "Montserrat", "Agrandir Wide", "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 800;
}

.ll-card-title span {
    color: #667085;
    font-size: 12px;
}

.ll-score-card {
    display: grid;
    justify-items: center;
}

.ll-score-ring {
    width: 152px;
    height: 152px;
    border-radius: 50%;
    background: conic-gradient(#3bb764 calc(var(--score) * 1%), #e4e8ee 0);
    display: grid;
    place-items: center;
    margin: 8px auto 10px;
}

.ll-score-ring > div,
.ll-empty-ring {
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(11,43,84,.05);
}

.ll-score-ring strong,
.ll-empty-ring {
    color: #08172d;
    font-size: 46px;
    line-height: 1;
    font-weight: 800;
}

.ll-score-ring span {
    display: block;
    color: #536178;
    margin-top: -18px;
}

.ll-score-label {
    background: rgba(214,178,113,.38);
    color: var(--brand-blue);
    border-radius: 8px;
    padding: 6px 14px;
    font-weight: 700;
    margin-bottom: 14px;
}

.ll-score-label.muted {
    background: #eef1f5;
    color: #667085;
}

.ll-age-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 10px;
}

.ll-age-grid div {
    border: 1px solid rgba(11,43,84,.1);
    background: #f8fafc;
    padding: 10px;
    text-align: center;
}

.ll-age-grid span,
.ll-side-text {
    color: #536178;
    font-size: 13px;
}

.ll-section-mini-title {
    margin: 12px 0 6px;
    color: var(--brand-blue);
    font-family: "Montserrat", "Agrandir Wide", "Segoe UI", sans-serif;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.ll-age-grid strong {
    display: block;
    color: #08172d;
    font-size: 18px;
}

.ll-chart-box {
    height: 275px;
}

.ll-chart-box.compact {
    height: 245px;
}

.ll-range-pills {
    display: flex;
    gap: 4px;
}

.ll-range-pills button {
    border: 1px solid rgba(11,43,84,.15);
    background: #fff;
    color: #536178;
    padding: 6px 10px;
    font-size: 12px;
}

.ll-range-pills button.active {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fff;
}

.ll-chart-stack {
    display: grid;
    gap: 16px;
}

.ll-chart-stack h3 {
    margin: 0 0 8px;
    color: #25364f;
    font-family: "Montserrat", "Agrandir Wide", "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.ll-chart-subtitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.ll-chart-subtitle h3 {
    margin: 0;
}

.ll-positive-note {
    margin-top: 12px;
    background: rgba(40,167,69,.12);
    color: #1d7b3a;
    padding: 9px 12px;
    font-weight: 700;
    text-align: center;
}

.ll-components-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
}

.ll-component {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.ll-component-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(214,178,113,.18);
    color: var(--brand-blue);
    font-weight: 800;
}

.ll-component-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #25364f;
    margin-bottom: 7px;
}

.ll-component-head strong {
    white-space: nowrap;
    color: #08172d;
}

.ll-component-track {
    height: 6px;
    border-radius: 999px;
    background: #dde3ea;
    overflow: hidden;
}

.ll-component-track span {
    display: block;
    height: 100%;
    background: #3bb764;
}

.ll-component-track span.warning {
    background: #f0a202;
}

.ll-lab-list,
.ll-next-list,
.ll-alert-list {
    display: grid;
    gap: 10px;
}

.ll-lab-list > div,
.ll-next-list > div,
.ll-alert-list > div {
    border-bottom: 1px solid rgba(11,43,84,.08);
    padding-bottom: 10px;
}

.ll-lab-list > div:last-child,
.ll-next-list > div:last-child,
.ll-alert-list > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.ll-lab-list span,
.ll-next-list span {
    color: #667085;
    font-size: 12px;
}

.ll-lab-list strong,
.ll-next-list strong {
    display: block;
    color: #08172d;
}

.ll-lab-list small,
.ll-next-list small {
    color: #536178;
}

.ll-program-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.ll-program-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--brand-gold), #ead4a3);
    color: var(--brand-blue);
    font-weight: 900;
}

.ll-program-card strong,
.ll-membership strong {
    display: block;
    color: #08172d;
    font-size: 18px;
}

.ll-program-card small {
    color: #667085;
}

.ll-membership {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.ll-membership span {
    background: rgba(40,167,69,.13);
    color: #1c7c3a;
    border-radius: 999px;
    padding: 5px 10px;
    font-weight: 700;
}

.ll-alert-list > div {
    background: rgba(214,178,113,.14);
    border: 0;
    padding: 10px 12px;
    color: #4c3a12;
}

.ll-alert-list.soft > div {
    background: rgba(11,43,84,.045);
    color: #25364f;
}

@media (max-width: 1180px) {
    .ll-report-grid,
    .ll-report-row,
    .ll-patient-hero {
        grid-template-columns: 1fr;
    }

    .ll-report-brand {
        justify-items: start;
        text-align: left;
    }
}

@media (max-width: 768px) {
    .ll-components-grid,
    .ll-age-grid {
        grid-template-columns: 1fr;
    }

    .ll-patient-headline h1 {
        font-size: 22px;
    }

    .ll-chart-box {
        height: 235px;
    }
}

@media print {
    @page {
        size: A4 landscape;
        margin: 8mm;
    }

    body {
        background: #fff;
    }

    .sidebar,
    .no-print,
    .ll-report-toolbar {
        display: none !important;
    }

    .app-shell {
        display: block;
    }

    .main-content {
        padding: 0;
    }

    .ll-report-page {
        max-width: none;
    }

    .ll-card,
    .ll-patient-hero,
    .ll-report-tabs {
        box-shadow: none;
        break-inside: avoid;
    }
}

p, td, th, label, .form-control, .form-select, .btn, .list-group-item, .text-muted {
    font-size: 14px;
}

.card {
    border-radius: 8px;
}

.table th {
    color: var(--brand-blue);
    font-weight: 700;
    font-size: 13px;
}

.table td {
    vertical-align: middle;
}

.btn {
    border-radius: 6px;
    font-weight: 600;
}

.btn-outline-brand {
    border-color: rgba(11,43,84,.35);
    color: var(--brand-blue);
    background: var(--brand-white);
}

.btn-outline-brand:hover {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: var(--brand-white);
}

.action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.patient-card img {
    border: 3px solid rgba(214,178,113,.45);
}

.patient-fact {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(11,43,84,.08);
    text-align: left;
}

.patient-fact span {
    color: #667085;
}

.patient-fact strong {
    color: var(--brand-blue);
    text-align: right;
}

.score-placeholder {
    font-size: 42px;
    line-height: 1;
    color: var(--brand-blue);
    font-weight: 700;
}

.compact-stats strong {
    display: block;
    color: var(--brand-blue);
    font-size: 24px;
}

.compact-stats span {
    display: block;
    color: #667085;
    font-size: 12px;
}

.brand-tabs .nav-link {
    color: #667085;
    font-weight: 700;
}

.brand-tabs .nav-link.active {
    color: var(--brand-blue);
    border-bottom: 2px solid var(--brand-gold);
}
.chart-box {
    position: relative;
    height: 320px;
    width: 100%;
}

@media (max-width: 768px) {
    .chart-box {
        height: 260px;
    }
}

.timeline-panel {
    position: relative;
    display: grid;
    gap: 14px;
    padding-left: 18px;
}

.timeline-panel::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: rgba(11,43,84,.14);
}

.timeline-item {
    position: relative;
}

.timeline-dot {
    position: absolute;
    left: -17px;
    top: 12px;
    width: 12px;
    height: 12px;
    background: var(--brand-gold);
    border: 2px solid var(--brand-white);
    box-shadow: 0 0 0 2px rgba(11,43,84,.18);
}

.timeline-content {
    background: var(--brand-white);
    border: 1px solid rgba(11,43,84,.08);
    border-radius: 8px;
    padding: 14px 16px;
}

.form-control, .form-select {
    min-height: 42px;
}

textarea.form-control {
    min-height: 92px;
    resize: vertical;
}

.form-compact textarea.form-control,
.compact-form textarea.form-control {
    min-height: 76px;
}

.clinical-form textarea.form-control,
textarea.compact-textarea {
    min-height: 72px;
    height: 72px;
    resize: vertical;
}

.clinical-form .mb-3 {
    margin-bottom: .85rem !important;
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.choice-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid rgba(11,43,84,.14);
    border-radius: 8px;
    background: #fff;
    color: var(--brand-blue);
    font-weight: 600;
}

.choice-pill input {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin: 0;
}

.choice-inline ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.choice-inline label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--brand-blue);
}

.choice-inline input[type="radio"],
.choice-inline input[type="checkbox"],
.choice-pill input[type="radio"],
.choice-pill input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    flex: 0 0 16px;
}

.check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.check-tile {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 10px;
    border: 1px solid rgba(11,43,84,.1);
    border-radius: 8px;
    background: rgba(11,43,84,.025);
    color: var(--brand-blue);
    font-weight: 600;
}

.check-tile .form-check-input {
    margin: 0;
}

.patient-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.patient-action-group {
    background: var(--brand-white);
    border: 1px solid rgba(11,43,84,.1);
    border-left: 4px solid rgba(11,43,84,.85);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
}

.patient-action-group.primary {
    border-left-color: var(--brand-blue);
}

.patient-action-group .group-label {
    width: 100%;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.patient-action-group .btn {
    min-height: 36px;
    padding: 7px 10px;
    font-size: 13px;
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.panel-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    align-items: stretch;
}

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

.quick-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-decoration: none;
    background: var(--brand-white);
    border: 1px solid rgba(11,43,84,.12);
    border-left: 4px solid var(--brand-gold);
    border-radius: 8px;
    padding: 14px 16px;
    color: var(--brand-blue);
    font-weight: 700;
    min-height: 58px;
}

.quick-action:hover {
    background: rgba(214,178,113,.12);
    color: var(--brand-blue);
}

.protocol-card {
    border: 1px solid rgba(11,43,84,.12);
    border-radius: 8px;
    padding: 14px;
    height: 100%;
    background: var(--brand-white);
}

.protocol-score {
    font-size: 26px;
    line-height: 1;
    color: var(--brand-blue);
    font-weight: 700;
}

.alert-marker {
    border-left: 4px solid #b44b4b;
    background: rgba(180,75,75,.08);
}

.normal-marker {
    border-left: 4px solid #2f7d55;
}

@media (max-width: 768px) {
    .quick-actions {
        grid-template-columns: 1fr;
    }
}

body::after {
    content: "";
    position: fixed;
    right: 32px;
    bottom: 24px;
    width: 260px;
    height: 260px;
    background: url("/static/img/longlife-logo.svg") center/contain no-repeat;
    opacity: .035;
    pointer-events: none;
    z-index: 0;
}

.app-shell {
    position: relative;
    z-index: 1;
}

.btn-success, .btn-warning {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: var(--brand-white);
}

.btn-success:hover, .btn-warning:hover {
    background: #082244;
    border-color: #082244;
    color: var(--brand-white);
}

.btn-outline-warning {
    border-color: rgba(11,43,84,.35);
    color: var(--brand-blue);
    background: var(--brand-white);
}

.btn-outline-warning:hover {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: var(--brand-white);
}

.bio-alto {
    color: #b44b4b !important;
    font-weight: 700;
}

.bio-normal {
    color: #2f7d55 !important;
    font-weight: 700;
}

.bio-bajo {
    color: #b38600 !important;
    font-weight: 700;
}

.report-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2px solid var(--brand-gold);
    padding-bottom: 14px;
}

.report-box {
    border: 1px solid rgba(11,43,84,.12);
    border-radius: 8px;
    padding: 12px;
    background: var(--brand-white);
}

.report-box span {
    display: block;
    color: #667085;
    font-size: 12px;
}

.report-box strong {
    color: var(--brand-blue);
}

.report-plan {
    white-space: pre-wrap;
    font-family: "Montserrat", sans-serif;
    background: rgba(11,43,84,.04);
    border: 1px solid rgba(11,43,84,.08);
    border-radius: 8px;
    padding: 12px;
}

@media print {
    .sidebar, .no-print, .action-bar, .brand-tabs { display: none !important; }
    .app-shell { display: block; }
    .main-content { padding: 0; }
    body { background: #fff; }
    body::after { display: none; }
    .clinical-card { box-shadow: none; break-inside: avoid; }
    .invoice-sheet { border: 0; }
    .invoice-sheet .card-body { padding: 0; }
}

.agenda-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border: 1px solid rgba(11,43,84,.1);
    border-radius: 8px;
    overflow: hidden;
    background: var(--brand-white);
}

.agenda-weekday {
    background: rgba(11,43,84,.04);
    color: var(--brand-blue);
    font-size: 12px;
    font-weight: 700;
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid rgba(11,43,84,.1);
}

.agenda-day {
    min-height: 112px;
    padding: 10px;
    color: var(--brand-blue);
    text-decoration: none;
    border-right: 1px solid rgba(11,43,84,.08);
    border-bottom: 1px solid rgba(11,43,84,.08);
    background: var(--brand-white);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.agenda-day:hover {
    background: rgba(214,178,113,.12);
    color: var(--brand-blue);
}

.agenda-day.muted {
    opacity: .45;
    background: #f8fafc;
}

.agenda-day.selected {
    box-shadow: inset 0 0 0 2px var(--brand-gold);
}

.agenda-day.has-appointments {
    background: rgba(50,89,122,.16);
}

.agenda-day.partial-block {
    background: linear-gradient(135deg, rgba(50,89,122,.16) 0 55%, rgba(214,178,113,.28) 55% 100%);
}

.agenda-day.closed {
    background: repeating-linear-gradient(135deg, rgba(11,43,84,.08), rgba(11,43,84,.08) 8px, rgba(11,43,84,.14) 8px, rgba(11,43,84,.14) 16px);
}

.agenda-day-number {
    font-weight: 800;
}

.agenda-pill,
.agenda-block-label {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
}

.agenda-pill {
    background: var(--brand-blue);
    color: var(--brand-white);
}

.agenda-block-label {
    background: var(--brand-gold);
    color: var(--brand-blue);
}

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: #667085;
    font-size: 12px;
}

.legend-box {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid rgba(11,43,84,.14);
    vertical-align: -2px;
    margin-right: 5px;
}

.legend-box.has-appointments { background: rgba(50,89,122,.16); }
.legend-box.free { background: var(--brand-white); }
.legend-box.partial-block { background: rgba(214,178,113,.35); }
.legend-box.closed { background: rgba(11,43,84,.14); }

.agenda-block-row {
    border-left: 4px solid var(--brand-gold);
}

.followup-danger {
    border-left: 4px solid #b44b4b;
    background: rgba(180,75,75,.08);
}

.followup-warning {
    border-left: 4px solid #b38600;
    background: rgba(179,134,0,.08);
}

.followup-gold {
    border-left: 4px solid var(--brand-gold);
    background: rgba(214,178,113,.12);
}

.followup-normal {
    border-left: 4px solid var(--brand-blue-2);
}

.report-menu {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.report-action {
    min-height: 172px;
    text-decoration: none;
    color: var(--brand-blue);
    background: var(--brand-white);
    border: 1px solid rgba(11,43,84,.12);
    border-left: 4px solid var(--brand-gold);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 8px 24px rgba(11,43,84,.06);
}

.report-action:hover {
    color: var(--brand-blue);
    background: rgba(214,178,113,.12);
    border-color: rgba(214,178,113,.65);
}

.report-action span {
    font-weight: 800;
    font-size: 16px;
}

.report-action small {
    color: #667085;
}

.report-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border-radius: 6px;
    background: var(--brand-blue);
    color: var(--brand-white);
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

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

    .patient-actions-grid {
        grid-template-columns: 1fr;
    }

    .panel-work-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .report-menu {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .agenda-calendar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .agenda-weekday {
        display: none;
    }

    .agenda-day {
        min-height: 88px;
    }
}

.camera-modal-open {
    overflow: hidden;
}

.camera-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(7, 20, 38, .58);
    backdrop-filter: blur(4px);
}

.camera-modal-card {
    width: min(560px, 100%);
    overflow: hidden;
    border: 1px solid rgba(11,43,84,.12);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 28px 70px rgba(7,20,38,.28);
}

.camera-modal-header,
.camera-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
}

.camera-modal-header {
    border-bottom: 1px solid rgba(11,43,84,.08);
}

.camera-modal-header h5 {
    margin: 0;
    color: var(--brand-blue);
    font-weight: 800;
}

.camera-modal-body {
    padding: 18px;
}

.camera-preview {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    background: #071426;
    object-fit: cover;
}

.camera-modal-footer {
    border-top: 1px solid rgba(11,43,84,.08);
}

.camera-close-button {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(11,43,84,.18);
    border-radius: 999px;
    background: #fff;
    color: var(--brand-blue);
    display: grid;
    place-items: center;
}

.camera-close-button:hover {
    background: #f4f7fb;
}

.photo-history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}

.photo-history-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(11,43,84,.1);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(11,43,84,.045);
}

.photo-history-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: #eef2f7;
}

.photo-select {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.94);
    color: var(--brand-blue);
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(7,20,38,.14);
}

.photo-history-meta {
    padding: 12px;
}

.photo-history-meta strong,
.photo-history-meta span {
    display: block;
}

.photo-history-meta strong {
    color: var(--brand-blue);
    font-weight: 800;
}

.photo-history-meta span {
    color: #667085;
    font-size: 12px;
}

.photo-history-meta p {
    margin: 8px 0 0;
    color: #374151;
    font-size: 13px;
}

.photo-compare-board {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.photo-compare-slot {
    border: 1px solid rgba(11,43,84,.1);
    border-radius: 12px;
    overflow: hidden;
    background: #f8fafc;
}

.photo-compare-slot > span {
    display: block;
    padding: 8px 12px;
    background: rgba(214,178,113,.18);
    color: var(--brand-blue);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.photo-compare-empty {
    min-height: 160px;
    display: grid;
    place-items: center;
    color: #667085;
    font-weight: 700;
}

.photo-compare-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.photo-compare-image strong,
.photo-compare-image span,
.photo-compare-image p {
    display: block;
    margin: 0;
    padding: 0 12px;
}

.photo-compare-image strong {
    padding-top: 10px;
    color: var(--brand-blue);
}

.photo-compare-image span {
    color: #667085;
    font-size: 12px;
}

.photo-compare-image p {
    padding-bottom: 12px;
    color: #374151;
    font-size: 13px;
}

.photo-workspace-hero {
    margin-bottom: 14px;
}

.photo-explorer-shell {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.photo-explorer-sidebar,
.photo-explorer-main {
    display: grid;
    gap: 14px;
}

.photo-panel,
.photo-window,
.photo-compare-workbench {
    overflow: hidden;
    border: 1px solid rgba(11,43,84,.11);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(11,43,84,.055);
}

.photo-panel-header,
.photo-window-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(11,43,84,.1);
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}

.photo-panel-header strong,
.photo-window-toolbar strong {
    color: var(--brand-blue);
    font-weight: 800;
}

.photo-panel-header span,
.photo-window-toolbar span {
    display: block;
    color: #667085;
    font-size: 12px;
}

.photo-capture-form {
    padding: 16px;
}

.photo-folder-list {
    display: grid;
    gap: 4px;
    padding: 10px;
}

.photo-folder {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 9px 10px;
    background: transparent;
    color: #25364f;
    text-align: left;
}

.photo-folder:hover {
    background: rgba(11,43,84,.045);
}

.photo-folder.active {
    border-color: rgba(214,178,113,.65);
    background: rgba(214,178,113,.18);
    color: var(--brand-blue);
}

.photo-folder i {
    color: var(--brand-gold);
    font-size: 18px;
}

.photo-folder span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.photo-folder strong {
    color: var(--brand-blue);
    font-size: 12px;
}

.photo-empty-folder {
    padding: 14px;
    color: #667085;
}

.photo-window-content {
    max-height: 560px;
    overflow: auto;
    padding: 16px;
    background: #f8fafc;
}

.photo-date-group + .photo-date-group {
    margin-top: 18px;
}

.photo-date-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--brand-blue);
}

.photo-date-heading i {
    color: var(--brand-gold);
}

.photo-date-heading span {
    color: #667085;
    font-size: 12px;
}

.photo-thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 128px));
    gap: 10px;
    align-items: start;
}

.photo-thumb-card {
    border: 1px solid rgba(11,43,84,.12);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(11,43,84,.045);
}

.photo-thumb-button {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(11,43,84,.08);
    border-radius: 10px 10px 0 0;
    padding: 0;
    background: #eef2f7;
    overflow: hidden;
    cursor: zoom-in;
}

.photo-thumb-button img {
    width: 100%;
    height: 92px;
    object-fit: cover;
    display: block;
    transition: transform .18s ease;
}

.photo-thumb-button:hover img {
    transform: scale(1.04);
}

.photo-thumb-meta {
    display: grid;
    gap: 4px;
    padding: 8px;
}

.photo-thumb-meta .photo-select {
    position: static;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 12px;
}

.photo-thumb-meta strong {
    color: var(--brand-blue);
    font-size: 12px;
}

.photo-thumb-meta span {
    color: #667085;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.photo-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 16px;
}

.photo-compare-editor {
    overflow: hidden;
    border: 1px solid rgba(11,43,84,.12);
    border-radius: 10px;
    background: #fff;
}

.photo-compare-title {
    padding: 10px 12px;
    background: rgba(11,43,84,.06);
    color: var(--brand-blue);
    font-weight: 800;
}

.photo-compare-canvas {
    position: relative;
    height: 360px;
    overflow: hidden;
    display: grid;
    place-items: center;
    cursor: grab;
    background:
        linear-gradient(45deg, rgba(11,43,84,.04) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(11,43,84,.04) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(11,43,84,.04) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(11,43,84,.04) 75%);
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    background-size: 20px 20px;
}

.photo-compare-canvas img {
    max-width: 92%;
    max-height: 92%;
    object-fit: contain;
    transform-origin: center center;
    transition: transform .08s linear;
    user-select: none;
    -webkit-user-drag: none;
    cursor: grab;
}

.photo-compare-canvas.dragging,
.photo-compare-canvas.dragging img {
    cursor: grabbing;
}

.photo-compare-meta {
    min-height: 54px;
    padding: 10px 12px 0;
}

.photo-compare-meta strong,
.photo-compare-meta span {
    display: block;
}

.photo-compare-meta strong {
    color: var(--brand-blue);
}

.photo-compare-meta span,
.photo-compare-meta p {
    color: #667085;
    font-size: 12px;
    margin: 0;
}

.photo-compare-controls {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px 12px;
}

.photo-compare-controls label {
    color: var(--brand-blue);
    font-size: 12px;
    font-weight: 800;
}

.photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(7,20,38,.72);
    backdrop-filter: blur(4px);
}

.photo-lightbox-card {
    width: min(1120px, 100%);
    max-height: 92vh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(7,20,38,.34);
}

.photo-lightbox-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(11,43,84,.1);
}

.photo-lightbox-header strong,
.photo-lightbox-header span {
    display: block;
}

.photo-lightbox-header strong {
    color: var(--brand-blue);
}

.photo-lightbox-header span {
    color: #667085;
    font-size: 12px;
}

.photo-lightbox-body {
    min-height: 0;
    overflow: auto;
    display: grid;
    place-items: center;
    background: #071426;
}

.photo-lightbox-body img {
    max-width: 100%;
    height: auto;
    display: block;
}

.photo-lightbox-note {
    padding: 12px 16px;
    color: #374151;
    background: #fff;
}

.photo-compare-modal {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(7,20,38,.72);
    backdrop-filter: blur(4px);
}

.photo-compare-modal-card {
    width: min(1320px, 100%);
    max-height: 94vh;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 30px 86px rgba(7,20,38,.36);
}

.photo-compare-grid.modal-grid {
    height: calc(94vh - 74px);
    overflow: auto;
    padding: 16px;
}

.photo-compare-grid.modal-grid .photo-compare-canvas {
    height: min(62vh, 620px);
}

.photo-window-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.ll-protocol-block {
    padding: 12px;
    border: 1px solid rgba(11,43,84,.12);
    border-radius: 10px;
    background: #fff;
}

.ll-protocol-number {
    width: 26px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 26px;
    border-radius: 50%;
    color: var(--brand-blue);
    background: rgba(214,178,113,.22);
    font-weight: 800;
    font-size: 12px;
}

.ll-rule-box {
    padding: 8px;
    border: 1px solid rgba(11,43,84,.08);
    border-radius: 8px;
    background: #f9fbfd;
}

.ll-rule-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.ll-rule-status.status-obligatoria {
    color: #0b2b54;
    background: rgba(214,178,113,.32);
}

.ll-rule-status.status-sugerida {
    color: #0b2b54;
    background: rgba(50,89,122,.16);
}

.ll-rule-status.status-recomendada {
    color: #0b2b54;
    background: rgba(50,89,122,.16);
}

.ll-rule-status.status-opcional {
    color: #32597a;
    background: #eef3f8;
}

.ll-rule-status.status-contraindicada {
    color: #991b1b;
    background: #fee2e2;
}

.ll-rule-decision {
    max-width: 126px;
}

.ll-matrix-box {
    padding: 12px;
    border: 1px solid rgba(11,43,84,.12);
    border-radius: 10px;
    background: #fff;
}

.ll-matrix-box table th {
    color: var(--brand-blue);
    font-size: 12px;
    white-space: nowrap;
}

.ll-matrix-box table td {
    font-size: 12px;
}

@media (max-width: 1200px) {
    .photo-explorer-shell {
        grid-template-columns: 1fr;
    }

    .photo-compare-grid {
        grid-template-columns: 1fr;
    }
}