/* Estils propis del projecte FLS carregats després d'Inspinia. */
/* COLORS APP */
:root {
    --app-color-base: #1c748e;
    --app-color-blue-dark: #075985;
    --app-color-blue-dark-hover: #064a72;
    --app-color-blue-dark-active: #053f61;
    --app-color-blue-medium: #4fc6d3;
    --app-color-blue-light: #c1e6ef;
    --app-color-blue-medium-hover: #35b8c8;
    --app-color-blue-medium-active: #2aa9b9;
    --ins-primary: #1c748e;
    --ins-primary-rgb: 28, 116, 142;
}

/* Defineix el gradient corporatiu del sidenav quan el layout activa el mode gradient. */
html[data-skin="modern"][data-menu-color="gradient"] {
    --ins-sidenav-bg: linear-gradient(135deg, var(--app-color-blue-dark) 0%, var(--app-color-blue-dark) 42%, var(--app-color-blue-medium) 100%);
    --ins-sidenav-border-color: rgba(255, 255, 255, .12);
    --ins-sidenav-item-color: rgba(255, 255, 255, .72);
    --ins-sidenav-item-hover-color: #ffffff;
    --ins-sidenav-item-hover-bg: rgba(255, 255, 255, .1);
    --ins-sidenav-item-active-color: #ffffff;
    --ins-sidenav-item-active-bg: rgba(255, 255, 255, .16);
}

/* Manté el sidenav condensat amb color sòlid per evitar canvis visuals massa marcats. */
html[data-skin="modern"][data-menu-color="gradient"][data-sidenav-size="condensed"] {
    --ins-sidenav-bg: var(--app-color-blue-dark);
}

.btn-primary {
    --ins-btn-bg: var(--app-color-blue-dark);
    --ins-btn-border-color: var(--app-color-blue-dark);
    --ins-btn-hover-bg: var(--app-color-blue-dark-hover);
    --ins-btn-hover-border-color: var(--app-color-blue-dark-hover);
    --ins-btn-active-bg: var(--app-color-blue-dark-active);
    --ins-btn-active-border-color: var(--app-color-blue-dark-active);
}

.btn-secondary {
    --ins-btn-bg: var(--app-color-blue-medium);
    --ins-btn-border-color: var(--app-color-blue-medium);
    --ins-btn-hover-bg: var(--app-color-blue-medium-hover);
    --ins-btn-hover-border-color: var(--app-color-blue-medium-hover);
    --ins-btn-active-bg: var(--app-color-blue-medium-active);
    --ins-btn-active-border-color: var(--app-color-blue-medium-active);
}

.app-messages,
.content-page > .content {
    padding-inline: calc(var(--ins-gutter-x) * .5);
}

.app-page-title,
.app-detail-title {
    min-height: 70px;
}

.app-detail-card {
    border: 0;
}

/* Manté completament circular el comptador de notificacions del topbar. */
.app-topbar-notification-badge {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    font-size: .625rem;
    line-height: 1;
}

.app-detail-list-item {
    padding-block: .85rem;
}

.app-detail-list-item:first-child {
    padding-top: 0;
}

.app-detail-list-item:last-child {
    padding-bottom: 0;
}

.app-detail-list dt {
    margin-bottom: .25rem;
    color: var(--ins-secondary-color);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.app-detail-list dd {
    min-height: 1.5em;
    margin-bottom: 0;
    color: var(--ins-body-color);
    font-size: .95rem;
}

/* Iguala els valors principals del resum clínic amb els valors dels blocs de detall. */
.app-clinical-summary-primary {
    font-size: .95rem;
}

/* Manté circulars i centrats els comptadors discrets de les pestanyes. */
.app-tab-count-badge {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    font-size: .7rem;
    line-height: 1;
}

.app-detail-footer {
    display: flex;
    justify-content: flex-start;
}

.app-stepper {
    display: grid;
    grid-template-columns: max-content 1fr max-content 1fr max-content;
    align-items: center;
    gap: .75rem;
}

.app-stepper-item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--ins-secondary-color);
    white-space: nowrap;
}

.app-stepper-item span {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ins-border-color);
    border-radius: 50%;
    background-color: var(--ins-secondary-bg);
    font-weight: 700;
}

.app-stepper-item.active,
.app-stepper-item.completed {
    color: var(--app-color-blue-dark);
}

.app-stepper-item.active span,
.app-stepper-item.completed span {
    color: #ffffff;
    border-color: var(--app-color-blue-dark);
    background-color: var(--app-color-blue-dark);
}

.app-stepper-line {
    height: 1px;
    background-color: var(--ins-border-color);
}

.app-transfer-panel,
.app-transfer-summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--ins-border-color);
    border-radius: var(--ins-border-radius);
    background-color: var(--ins-secondary-bg);
}

.app-transfer-icon,
.app-transfer-count {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    border-radius: var(--ins-border-radius);
    color: var(--app-color-blue-dark);
    background-color: var(--app-color-blue-light);
    font-size: 1.55rem;
    font-weight: 700;
}

.app-transfer-summary {
    justify-content: space-between;
}

.app-transfer-summary > div {
    min-width: 0;
}

.app-transfer-summary strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-transfer-summary > i {
    color: var(--app-color-blue-dark);
    font-size: 1.5rem;
}

/* Assegura que els desplegables Select2 dins modals quedin per sobre del modal. */
.modal .select2-container {
    width: 100% !important;
}

.select2-container--open,
.select2-dropdown {
    z-index: 1065;
}

/* Iguala l'alçada dels Select2 dels filtres i de visites amb els selects d'Inspinia. */
[data-app-datatable-filters] .select2-container .select2-selection--single,
[data-app-datatable-filters] .select2-container .select2-selection--multiple,
#visit-start-modal .select2-container .select2-selection--single {
    min-height: calc(1.5em + .9064rem + calc(var(--ins-border-width) * 2));
}

[data-app-datatable-filters] .select2-selection--single .select2-selection__rendered,
#visit-start-modal .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5em + .9064rem);
}

[data-app-datatable-filters] .select2-selection--single .select2-selection__clear {
    align-items: center;
    display: inline-flex;
    height: calc(1.5em + .9064rem);
    line-height: 1;
}

[data-app-datatable-filters] .select2-selection--single .select2-selection__arrow,
#visit-start-modal .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + .9064rem);
}

.sidenav-menu .logo-lg .app-sidenav-brand-lg {
    display: inline-grid;
    grid-template-columns: auto auto;
    grid-template-areas:
        "icon name"
        ". tenant";
    align-items: start;
    justify-content: center;
    margin-block: 1rem;
    padding: 0;
    column-gap: 0;
    row-gap: 0;
    overflow: hidden;
    border-radius: var(--ins-border-radius);
    vertical-align: middle;
}

/* Uneix les dues parts del logotip sense cap separació visual. */
.sidenav-menu .logo-lg .app-sidenav-logo-lg-part {
    display: block;
    width: auto;
    height: 64px;
    margin: 0;
    padding: 0;
}

.sidenav-menu .logo-lg .app-sidenav-logo-icon {
    grid-area: icon;
    margin-right: .25rem;
}

.sidenav-menu .logo-lg .app-sidenav-logo-name {
    grid-area: name;
}

.app-sidenav-logo-sm {
    height: 30px;
}

html[data-sidenav-size="condensed"] .app-sidenav-logo-sm {
    height: 45px;
}

.app-sidenav-tenant {
    grid-area: tenant;
    margin-top: .25rem;
    padding: 0;
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: .04em;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sidenav-avatar {
    background-color: var(--app-color-blue-medium) !important;
}

.app-topbar-avatar {
    width: 32px;
    height: 32px;
    background-color: var(--app-color-blue-dark) !important;
}

.app-auth-body {
    background-color: var(--ins-body-bg);
}

.app-auth-card {
    border: 0;
    border-radius: var(--ins-border-radius-lg);
}

.app-auth-form-panel {
    background-color: var(--ins-secondary-bg);
}

.app-auth-form-panel h1,
.app-auth-form-panel .form-label {
    color: var(--ins-heading-color);
}

.app-auth-form-panel .text-muted {
    color: var(--ins-secondary-color) !important;
}

.app-auth-logo {
    max-height: 78px;
    max-width: 330px;
    padding: .4rem .65rem;
    background-color: var(--app-color-blue-dark);
    border-radius: var(--ins-border-radius);
}

.app-auth-visual {
    position: relative;
    min-height: 520px;
    background-color: var(--ins-dark);
}

.app-auth-visual::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(to top, rgba(49, 58, 70, .55), rgba(49, 58, 70, .12));
}

.app-auth-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-auth-client-image {
    object-fit: cover;
    padding: 0;
}

/* Presenta els errors del servidor amb una composició autònoma i corporativa. */
.app-error-body {
    min-height: 100vh;
    background-color: var(--ins-body-bg);
}

.app-error-wrapper {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 20%, rgba(var(--ins-primary-rgb), .18), transparent 32%),
        radial-gradient(circle at 85% 80%, rgba(79, 198, 211, .2), transparent 34%),
        linear-gradient(135deg, var(--ins-body-bg) 0%, rgba(193, 230, 239, .45) 100%);
}

.app-error-card {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 0;
    border-radius: var(--ins-border-radius-lg);
    background-color: rgba(255, 255, 255, .94);
    box-shadow: 0 1.5rem 4rem rgba(7, 89, 133, .14);
}

.app-error-card::before {
    position: absolute;
    inset: 0 0 auto;
    height: .35rem;
    content: "";
    background: linear-gradient(90deg, var(--app-color-blue-dark), var(--app-color-blue-medium));
}

.app-error-logo {
    width: min(100%, 280px);
    height: auto;
    border-radius: var(--ins-border-radius);
}

.app-error-code {
    color: var(--app-color-blue-dark);
    font-size: clamp(5.5rem, 18vw, 8.5rem);
    font-weight: 800;
    letter-spacing: -.06em;
    line-height: .9;
}

.app-error-card h1 {
    color: var(--ins-heading-color);
}

.app-error-message {
    max-width: 28rem;
    margin-inline: auto;
    color: var(--ins-secondary-color);
    font-size: 1rem;
    line-height: 1.6;
}

.invalid-feedback .errorlist {
    margin-bottom: 0;
    padding-left: 1rem;
}

.app-form-field:has(.invalid-feedback) .form-control,
.app-form-field:has(.invalid-feedback) .form-select {
    border-color: var(--ins-form-invalid-border-color);
}

.app-datatable-search-hit {
    position: relative;
    color: #664d03 !important;
    background-color: #fff3cd !important;
    font-weight: 700;
    box-shadow: inset 3px 0 0 #ffc107;
}

.app-datatable-search-hit a,
.app-datatable-search-hit span {
    color: inherit !important;
}

.app-question-type-info {
    color: #4c4c5c;
    background-color: #eef2f7;
}

.app-question-type-free-text {
    color: var(--app-color-blue-dark);
    background-color: var(--app-color-blue-light);
}

.app-question-type-date {
    color: #8a5a00;
    background-color: #fff2d8;
}

.app-question-type-single-select {
    color: #0f6b57;
    background-color: #dff7ef;
}

.app-question-type-multiple-select {
    color: #126b75;
    background-color: #dff7fa;
}

.app-question-type-numeric {
    color: #8f2f3b;
    background-color: #fde4e7;
}

.app-question-type-default {
    color: var(--ins-body-color);
    background-color: var(--ins-light);
}

.app-dashboard-section h5 {
    color: var(--ins-heading-color);
}

.app-metric-card,
.app-overview-card {
    border: 0;
}

.app-metric-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    border-radius: var(--ins-border-radius);
    font-size: 1.45rem;
}

.app-metric-icon-primary {
    color: var(--app-color-blue-dark);
    background-color: var(--app-color-blue-light);
}

.app-metric-icon-success {
    color: #157347;
    background-color: #dff5e8;
}

.app-metric-icon-info {
    color: #0f6b75;
    background-color: #dff7fa;
}

.app-metric-icon-warning {
    color: #8a5a00;
    background-color: #fff2d8;
}

.app-metric-icon-danger {
    color: var(--ins-danger-text-emphasis);
    background-color: var(--ins-danger-bg-subtle);
}

.app-scope-item {
    padding: .85rem;
    border: 1px solid var(--ins-border-color);
    border-radius: var(--ins-border-radius);
    background-color: var(--ins-secondary-bg);
}

.app-scope-progress {
    height: .4rem;
    margin-bottom: .35rem;
    background-color: var(--ins-tertiary-bg);
}

.app-scope-progress .progress-bar {
    background-color: var(--app-color-blue-dark);
}

/* Reserva una alçada estable per al donut de distribució dels pacients. */
.app-patient-scope-chart {
    width: 100%;
    min-height: 320px;
}

/* Mostra el recorregut assistencial agrupant les alternatives inicials i finals. */
.app-patient-substatus-progress-scroll {
    overflow-x: auto;
    padding: .25rem .25rem .5rem;
}

.app-patient-substatus-progress {
    min-width: 720px;
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-patient-substatus-step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: .55rem;
    color: var(--ins-secondary-color);
    text-align: center;
}

.app-patient-substatus-step:not(:first-child)::before {
    position: absolute;
    top: 14px;
    right: 50%;
    width: 100%;
    height: 3px;
    content: "";
    background-color: var(--ins-border-color);
}

.app-patient-substatus-step.is-completed::before,
.app-patient-substatus-step.is-current::before {
    background-color: var(--app-color-blue-dark);
}

.app-patient-substatus-label.app-patient-substatus-combined-label {
    max-width: none;
    display: grid;
    gap: .2rem;
}

.app-patient-substatus-combined-option {
    display: block;
    color: var(--ins-secondary-color);
    font-weight: 400;
    white-space: nowrap;
}

.app-patient-substatus-combined-option.is-current {
    color: var(--app-color-blue-dark);
    font-weight: 700;
}

.app-patient-substatus-marker {
    z-index: 1;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--ins-border-color);
    border-radius: 50%;
    background-color: var(--ins-body-bg);
    font-size: .75rem;
    font-weight: 700;
}

.app-patient-substatus-step.is-completed .app-patient-substatus-marker,
.app-patient-substatus-step.is-current .app-patient-substatus-marker {
    border-color: var(--app-color-blue-dark);
    color: #ffffff;
    background-color: var(--app-color-blue-dark);
}

.app-patient-substatus-step.is-current .app-patient-substatus-marker {
    box-shadow: 0 0 0 4px rgba(var(--ins-primary-rgb), .16);
}

.app-patient-substatus-step.is-current .app-patient-substatus-label {
    color: var(--app-color-blue-dark);
    font-weight: 700;
}

.app-patient-substatus-label {
    max-width: 120px;
    font-size: .78rem;
    line-height: 1.25;
}

.app-focus-list {
    display: grid;
    gap: .65rem;
}

.app-focus-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--ins-border-color);
}

.app-focus-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.app-visit-type-chart {
    width: min(280px, 100%);
    height: 280px;
}

@media (max-width: 575.98px) {
    .app-visit-type-chart {
        height: 240px;
    }
}

.app-chart-legend {
    display: grid;
    gap: .75rem;
}

.app-chart-legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem;
    border: 1px solid var(--ins-border-color);
    border-radius: var(--ins-border-radius);
    background-color: var(--ins-secondary-bg);
}

.app-chart-dot {
    width: .75rem;
    height: .75rem;
    display: inline-block;
    flex: 0 0 .75rem;
    border-radius: 50%;
}

.app-chart-dot-primary {
    background-color: var(--app-color-blue-dark);
}

.app-chart-dot-info {
    background-color: var(--app-color-blue-medium);
}

.app-patient-form-card,
.app-professional-form-card,
.app-form-definition-card,
.app-document-card {
    border: 0;
}

.app-patient-form-card:not(:last-child),
.app-professional-form-card:not(:last-child),
.app-form-definition-card:not(:last-child),
.app-document-card:not(:last-child) {
    margin-bottom: 1rem;
}

/* Destaca suaument les capçaleres dels blocs interns de les pestanyes de pacient. */
.app-patient-tab-card > .card-header {
    background-color: rgba(var(--ins-primary-rgb), .08);
}

.filepond--root {
    margin-bottom: 0;
    font-family: var(--ins-font-sans-serif);
}

.filepond--panel-root {
    background-color: var(--ins-tertiary-bg);
}

.filepond--drop-label {
    color: var(--ins-body-color);
}

.app-section-icon,
.app-form-summary-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    border-radius: var(--ins-border-radius);
    color: var(--app-color-blue-dark);
    background-color: var(--app-color-blue-light);
}

.app-form-toggle {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .75rem;
    border: 1px solid var(--ins-border-color);
    border-radius: var(--ins-border-radius);
    background-color: var(--ins-secondary-bg);
}

.app-form-toggle .form-check-input {
    margin-top: 0;
}

.app-patient-form-sidebar,
.app-professional-form-sidebar,
.app-form-definition-sidebar {
    position: sticky;
    top: calc(var(--ins-topbar-height) + 1rem);
    display: grid;
    gap: 1rem;
}

.app-form-summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--ins-border-color);
}

.app-form-summary-item > .d-flex {
    width: 100%;
    min-width: 0;
}

.app-form-summary-item > .d-flex > .min-w-0 {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}

.app-form-summary-item .text-truncate {
    display: -webkit-box !important;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.app-form-summary-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.app-form-action-code-menu {
    width: min(24rem, calc(100vw - 2rem));
}

.app-form-action-code-options {
    max-height: 24rem;
    overflow-y: auto;
}

@media (min-width: 576px) {
    .w-sm-auto {
        width: auto !important;
    }
}

@media (max-width: 1199.98px) {
    .app-patient-form-sidebar,
    .app-professional-form-sidebar,
    .app-form-definition-sidebar {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .app-stepper {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .app-stepper-line {
        display: none;
    }

    .app-transfer-summary {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Aplica el color corporatiu i les cantonades de les targetes als reproductors Plyr. */
.plyr {
    --plyr-color-main: var(--app-color-base);
    border-radius: var(--ins-border-radius, .375rem);
}