/* Indicaciones: numeración alineada con inputs del formulario */
.indicaciones-picker .indicacion-numero-avatar {
    width: 2.25rem;
    height: 2.25rem;
}

.indicaciones-picker .indicacion-numero-avatar .avatar-initial {
    font-size: 0.8125rem;
    line-height: 1;
}

/* Fixes para alineación y posicionamiento de Volgh */

/* Asegurar que el sidebar tenga el ancho correcto */
@media (min-width: 992px) {
    body.sidebar-mini .app-sidebar,
    body.app.sidebar-mini .app-sidebar {
        width: 270px !important;
        transition: width 0.45s ease;
    }

    body.sidebar-mini.sidenav-toggled .app-sidebar,
    body.app.sidebar-mini.sidenav-toggled .app-sidebar {
        width: 80px !important;
    }
}

/* Asegurar que el side-header tenga el mismo ancho que el sidebar */
@media (min-width: 992px) {
    body.sidebar-mini .side-header,
    body.app.sidebar-mini .side-header {
        width: 270px !important;
        transition: width 0.45s ease;
    }

    body.sidebar-mini.sidenav-toggled .side-header,
    body.app.sidebar-mini.sidenav-toggled .side-header {
        width: 80px !important;
    }
}

/* Asegurar que el header tenga el padding correcto para alinearse con el sidebar */
@media (min-width: 992px) {
    body.sidebar-mini .app-header,
    body.app.sidebar-mini .app-header {
        padding-inline-start: 285px !important; /* 270px sidebar + 15px espacio */
        transition: padding-inline-start 0.45s ease;
    }

    body.sidebar-mini.sidenav-toggled .app-header,
    body.app.sidebar-mini.sidenav-toggled .app-header {
        padding-inline-start: 95px !important; /* 80px sidebar + 15px espacio */
    }
}

/* Agregar padding-top al contenido para que no quede tapado por el header fijo */
.app-content {
    padding-block-start: 70px !important; /* Altura del header fijo */
}

.side-app {
    padding-block-start: 0 !important;
}

/* Asegurar que el contenido tenga el margen correcto para el sidebar (sidenav-toggled está en body) */
@media (min-width: 992px) {
    body.sidebar-mini .app-content,
    body.app.sidebar-mini .app-content {
        margin-inline-start: 270px !important;
    }

    body.sidebar-mini.sidenav-toggled .app-content,
    body.app.sidebar-mini.sidenav-toggled .app-content {
        margin-inline-start: 80px !important;
    }
}

/* Área de contenido principal: ancho según sidebar expandido/colapsado */
@media (min-width: 992px) {
    body.sidebar-mini .page .page-main .app-content.main-content,
    body.app.sidebar-mini .page .page-main .app-content.main-content {
        margin-inline-start: 270px !important;
        width: auto !important;
        min-width: 0;
        max-width: calc(100vw - 270px);
        transition: margin-inline-start 0.45s ease, max-width 0.45s ease;
    }

    body.sidebar-mini.sidenav-toggled .page .page-main .app-content.main-content,
    body.app.sidebar-mini.sidenav-toggled .page .page-main .app-content.main-content {
        margin-inline-start: 80px !important;
        max-width: calc(100vw - 80px);
    }
}

/* Página detalle imagenología: contenido dentro del recuadro */
.main-container .order-detail-page {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Agregar padding-top al sidebar para que el contenido del menú no quede tapado por el header fijo */
@media (min-width: 992px) {
    .app-sidebar {
        padding-block-start: 70px !important; /* Altura del header fijo (68px aproximadamente) */
    }
    
    /* Asegurar que el main-sidemenu comience después del header */
    .main-sidemenu {
        margin-block-start: 0 !important;
    }
}

/* Espacio al final del menú lateral para que el último ítem no quede pegado abajo */
.main-sidemenu .side-menu {
    padding-bottom: 4rem;
}

/* Estilos para el logo de texto SIGEME */
.header-brand-text {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: #4a5568 !important;
    white-space: nowrap;
    line-height: 1.2 !important;
}

.header-brand-subtitle {
    font-size: 0.75rem !important;
    color: #718096 !important;
    line-height: 1.2 !important;
    white-space: nowrap;
}

.side-header .header-brand1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
}

.side-header-brand-expanded {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
}

.side-header .header-brand-text {
    font-size: 1.25rem !important;
    font-weight: 600;
    color: #4a5568;
    line-height: 1.2;
}

.side-header .header-brand-subtitle {
    font-size: 0.65rem !important;
    color: #718096;
    line-height: 1.2;
    margin-top: 2px;
}

.side-header-brand-collapsed {
    display: none;
}

.side-header-brand-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

/* Sidebar colapsado: icono de la app (como landing), sin texto ni subtítulo */
@media (min-width: 992px) {
    body.sidebar-mini.sidenav-toggled .side-header,
    body.app.sidebar-mini.sidenav-toggled .side-header {
        padding: 10px 4px !important;
        text-align: center;
    }

    body.sidebar-mini.sidenav-toggled .side-header .header-brand1,
    body.app.sidebar-mini.sidenav-toggled .side-header .header-brand1 {
        padding: 6px 2px !important;
    }

    body.sidebar-mini.sidenav-toggled .side-header-brand-expanded,
    body.app.sidebar-mini.sidenav-toggled .side-header-brand-expanded {
        display: none !important;
    }

    body.sidebar-mini.sidenav-toggled .side-header-brand-collapsed,
    body.app.sidebar-mini.sidenav-toggled .side-header-brand-collapsed {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* Ocultar etiquetas de texto cuando el sidebar está colapsado */
@media (min-width: 992px) {
    .sidebar-mini.sidenav-toggled .side-menu__label,
    .sidenav-toggled .side-menu__label {
        display: none !important;
    }
    
    /* Ocultar categorías cuando está colapsado */
    .sidebar-mini.sidenav-toggled .sub-category,
    .sidenav-toggled .sub-category {
        display: none !important;
    }
    
    /* Centrar iconos cuando está colapsado */
    .sidebar-mini.sidenav-toggled .side-menu__icon,
    .sidenav-toggled .side-menu__icon {
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* Centrar items del menú cuando está colapsado */
    .sidebar-mini.sidenav-toggled .side-menu__item,
    .sidenav-toggled .side-menu__item {
        justify-content: center !important;
        padding: 10px !important;
    }

    /* Colapsado: sin flyouts ni expansión al pasar el mouse */
    body.sidebar-mini.sidenav-toggled:not(.sidenav-toggled-open) .app-sidebar,
    body.app.sidebar-mini.sidenav-toggled:not(.sidenav-toggled-open) .app-sidebar {
        overflow: hidden !important;
    }

    body.sidebar-mini.sidenav-toggled:not(.sidenav-toggled-open) .app-sidebar:hover,
    body.app.sidebar-mini.sidenav-toggled:not(.sidenav-toggled-open) .app-sidebar:hover {
        overflow: hidden !important;
    }

    body.sidebar-mini.sidenav-toggled:not(.sidenav-toggled-open) .app-sidebar .slide-menu,
    body.app.sidebar-mini.sidenav-toggled:not(.sidenav-toggled-open) .app-sidebar .slide-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Hover visual solo sobre el icono / fila del menú */
    body.sidebar-mini.sidenav-toggled:not(.sidenav-toggled-open) .side-menu > li > a.side-menu__item {
        border-radius: 0.5rem;
        transition: background-color 0.15s ease;
    }

    body.sidebar-mini.sidenav-toggled:not(.sidenav-toggled-open) .side-menu > li > a.side-menu__item:hover,
    body.sidebar-mini.sidenav-toggled:not(.sidenav-toggled-open) .side-menu > li > a.side-menu__item:focus-visible,
    body.app.sidebar-mini.sidenav-toggled:not(.sidenav-toggled-open) .side-menu > li > a.side-menu__item:hover,
    body.app.sidebar-mini.sidenav-toggled:not(.sidenav-toggled-open) .side-menu > li > a.side-menu__item:focus-visible {
        background-color: rgba(98, 89, 202, 0.12);
    }

    body.sidebar-mini.sidenav-toggled:not(.sidenav-toggled-open) .side-menu > li > a.side-menu__item.active:hover,
    body.app.sidebar-mini.sidenav-toggled:not(.sidenav-toggled-open) .side-menu > li > a.side-menu__item.active:hover {
        background-color: rgba(98, 89, 202, 0.2);
    }

    /* Evitar que Volgh expanda el ancho al hover (sidenav-toggled-open) */
    body.sidebar-mini.sidenav-toggled.sidenav-toggled-open .app-sidebar,
    body.app.sidebar-mini.sidenav-toggled.sidenav-toggled-open .app-sidebar,
    body.sidebar-mini.sidenav-toggled.sidenav-toggled-open .side-header,
    body.app.sidebar-mini.sidenav-toggled.sidenav-toggled-open .side-header {
        width: 80px !important;
    }
}

/* Ocultar el pseudo-elemento ::before del toggle que crea un segundo icono visual */
.app-sidebar__toggle::before {
    display: none !important;
    content: none !important;
}

/* Asegurar que solo el icono fe-menu sea visible */
.app-sidebar__toggle i {
    display: inline-block !important;
    font-size: 21px !important;
}

/* Corregir la foto de perfil en el header para mantener relación de aspecto */
.profile-1 .avatar.profile-user.cover-image,
.header-right-icons .profile-1 .avatar.profile-user.cover-image {
    object-fit: cover !important;
    object-position: center !important;
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    min-height: 2rem !important;
    max-width: 2rem !important;
    max-height: 2rem !important;
    border-radius: 50% !important;
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* Toggle Debug UI (header): color normal vs seleccionado */
.header-right-icons .nav-link.icon.sigeme-debug-ui-toggle i {
    color: rgb(var(--volgh-muted-rgb)) !important;
    transition: color 0.15s ease;
}
.header-right-icons .nav-link.icon.sigeme-debug-ui-toggle.is-active i,
.header-right-icons .nav-link.icon.sigeme-debug-ui-toggle.is-active:hover i {
    color: rgb(var(--volgh-primary-rgb)) !important;
}
.header-right-icons .nav-link.icon.sigeme-debug-ui-toggle:hover i {
    color: rgb(var(--volgh-primary-rgb)) !important;
    opacity: 0.85;
}
.header-right-icons .nav-link.icon.sigeme-debug-ui-toggle.is-active:hover i {
    opacity: 1;
}

/* Pantalla completa: ocultar en móvil (refuerzo a d-none d-lg-flex) */
@media (max-width: 991.98px) {
    #sigeme-fullscreen-wrap,
    .header-right-icons .full-screen-link {
        display: none !important;
    }
}
.header-right-icons .nav-link.icon.full-screen-link.is-active i {
    color: rgb(var(--volgh-primary-rgb)) !important;
}

/* Estilos para el icono de tipo de suscripción */
.profile-1 .subscription-icon {
    font-size: 0.875rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.profile-1 .subscription-icon i {
    font-size: 0.875rem !important;
}

/* Aumentar el ancho del dropdown del perfil para que todo el contenido esté en una línea */
.profile-1 .profile-dropdown {
    min-width: 220px !important;
    width: auto !important;
}

.profile-1 .dropdown-item {
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
}

.profile-1 .dropdown-item span {
    white-space: nowrap !important;
    overflow: visible !important;
}

/* Botón verde WhatsApp (#25D366). Solo cuando está habilitado (no disabled). */
.btn-whatsapp:not(:disabled),
.btn-icon.btn-whatsapp:not(:disabled) {
    background-color: #25D366 !important;
    border-color: #25D366 !important;
    color: #fff !important;
}
.btn-whatsapp:not(:disabled):hover,
.btn-icon.btn-whatsapp:not(:disabled):hover {
    background-color: #20bd5a !important;
    border-color: #20bd5a !important;
    color: #fff !important;
}

/* Landing pública: sin espacio lateral del layout con sidebar */
@media (min-width: 992px) {
    body.landing-volgh-page .app-content,
    body.landing-volgh-page .page .page-main .app-content.main-content {
        margin-inline-start: 0 !important;
        margin-left: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

body.landing-volgh-page .app-content,
body.landing-volgh-page .page .page-main .app-content.main-content,
body.landing-volgh-page .side-app,
body.landing-volgh-page .main-container {
    margin-inline-start: 0 !important;
    margin-left: 0 !important;
    padding-inline-start: 0 !important;
    padding-block-start: 0 !important;
}

body.landing-volgh-page .side-app {
    padding: 0 !important;
}

/* Barra global del paciente seleccionado (fija bajo el header principal) */
.paciente-context-bar-wrap {
    position: fixed;
    inset-block-start: 70px;
    inset-inline-start: 0;
    inset-inline-end: 0;
    z-index: 9998;
    padding: 0.65rem 1.25rem 0;
    background: #fff;
    border-bottom: 1px solid #e9edf4;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
    transition: padding-inline-start 0.45s ease;
}

@media (min-width: 992px) {
    .paciente-context-bar-wrap {
        z-index: 98;
    }

    body.sidebar-mini .paciente-context-bar-wrap,
    body.app.sidebar-mini .paciente-context-bar-wrap {
        padding-inline-start: 285px;
    }

    body.sidebar-mini.sidenav-toggled .paciente-context-bar-wrap,
    body.app.sidebar-mini.sidenav-toggled .paciente-context-bar-wrap {
        padding-inline-start: 95px;
    }
}

body.has-paciente-context-bar .app-content {
    padding-block-start: calc(70px + var(--sigeme-paciente-bar-height, 130px)) !important;
}

.paciente-context-bar {
    background: transparent;
}

.paciente-context-bar-inner {
    padding: 0;
}

.paciente-context-identity {
    align-items: flex-start;
}

.paciente-context-avatar {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    margin-top: 0.1rem;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
    line-height: 1;
}

.paciente-context-name {
    font-size: 1.05rem;
    line-height: 1.3;
}

.paciente-context-name-row {
    gap: 0.5rem 0.75rem;
}

.paciente-context-meta {
    margin-top: 0.15rem;
    line-height: 1.35;
}

.paciente-context-actions {
    margin-inline-start: auto;
    flex-shrink: 0;
}

.paciente-context-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    border-top: 1px solid #e9edf4;
    margin-top: 0.65rem;
}

.paciente-context-tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: #6c757d;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.55rem 0.15rem;
    margin-bottom: -1px;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.paciente-context-tab:hover {
    color: var(--primary-bg-color, #6c5ffc);
}

.paciente-context-tab.active {
    color: var(--primary-bg-color, #6c5ffc);
    border-bottom-color: var(--primary-bg-color, #6c5ffc);
}

.paciente-context-tab.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.paciente-context-tab i {
    font-size: 0.95rem;
    vertical-align: -1px;
}

@media (max-width: 767.98px) {
    .paciente-context-bar-wrap {
        padding-inline: 0.85rem;
    }

    .paciente-context-name-row {
        align-items: flex-start;
    }

    .paciente-context-actions {
        width: 100%;
        margin-inline-start: 0;
    }

    .paciente-context-actions .btn {
        flex: 1 1 auto;
    }
}

/* Volgh anula el SVG de Bootstrap en .btn-close; restaurar la X visible en modales */
.modal-header .btn-close {
    --bs-btn-close-color: #000;
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    box-sizing: content-box;
    width: 0.75rem;
    height: 0.75rem;
    padding: 0.375rem !important;
    margin-block-start: -0.375rem !important;
    margin-inline-end: -0.375rem !important;
    margin-block-end: -0.375rem !important;
    background: transparent var(--bs-btn-close-bg) center / 0.75rem 0.75rem no-repeat !important;
    background-image: var(--bs-btn-close-bg) !important;
    opacity: 0.75;
    filter: none;
}

.modal-header .btn-close:hover,
.modal-header .btn-close:focus {
    opacity: 1;
    filter: none;
}