/*====================================================*/
/* CIMA - Coordinador Inteligente de Monitoreo Avanzado */
/* Archivo: app/style/responsive.css */
/*====================================================*/
/* GLOSARIO DE ESTRUCTURA: */
/* S1 - estructura-css (Bloques y reglas del archivo) */
/*   - S1: @media (max-width: 768px) { (Regla o bloque CSS) */
/*   - S2: .global-toolbar { (Regla o bloque CSS) */
/*   - S3: .toolbar-group { (Regla o bloque CSS) */
/*   - S4: .nav-btn { (Regla o bloque CSS) */
/*   - S5: .user-profile span { display: none; } (Regla o bloque CSS) */
/*   - S6: .user-avatar { width: 32px; height: 32px; } (Regla o bloque CSS) */
/*   - S7: .mode-container { padding: 10px; } (Regla o bloque CSS) */
/*   - S8: .form-grid { (Regla o bloque CSS) */
/*   - S9: .span-1, .span-2, .span-4 { (Regla o bloque CSS) */
/*   - S10: .timeline-wrapper { (Regla o bloque CSS) */
/*   - S11: .patient-tab { (Regla o bloque CSS) */
/*   - S12: .scroll-container-wrapper { display: none; } (Regla o bloque CSS) */
/*   - S13: .user-layout { (Regla o bloque CSS) */
/*   - S14: .user-sidebar { (Regla o bloque CSS) */
/*   - S15: .user-menu-btn { (Regla o bloque CSS) */
/*   - S16: .user-menu-btn.active { (Regla o bloque CSS) */
/*   - S17: .drawer, .drawer-panel { (Regla o bloque CSS) */
/*   - S18: .global-toolbar { (Regla o bloque CSS) */
/*   - S19: .dropdown { (Regla o bloque CSS) */
/*   - S20: .drawer-overlay { (Regla o bloque CSS) */
/*   - S21: .drawer-overlay.active { (Regla o bloque CSS) */
/*   - S22: .drawer { (Regla o bloque CSS) */
/*   - S23: .drawer-right { (Regla o bloque CSS) */
/*   - S24: .drawer-left { (Regla o bloque CSS) */
/*   - S25: .drawer.show { (Regla o bloque CSS) */
/*   - S26: .drawer-header { (Regla o bloque CSS) */
/*   - S27: .drawer-header h2 { (Regla o bloque CSS) */
/*   - S28: .drawer-body { (Regla o bloque CSS) */
/*   - S29: .drawer-footer { (Regla o bloque CSS) */
/*   - S30: .btn-close { (Regla o bloque CSS) */
/*   - S31: .btn-close:hover { (Regla o bloque CSS) */
/*   - S32: .historic-item { (Regla o bloque CSS) */
/*   - S33: .historic-item:hover { (Regla o bloque CSS) */
/*   - S34: .search-result-item { (Regla o bloque CSS) */
/*   - S35: .search-result-item:hover { (Regla o bloque CSS) */
/*   - S36: .chip-group { (Regla o bloque CSS) */
/*   - S37: .chip-group-label { (Regla o bloque CSS) */
/*   - S38: .med-dropdowns { (Regla o bloque CSS) */
/*   - S39: .agenda-body { (Regla o bloque CSS) */
/*   - S40: .photo-placeholder { (Regla o bloque CSS) */
/*   - S41: .photo-placeholder:hover { (Regla o bloque CSS) */
/*   - S42: @keyframes toastIn { (Regla o bloque CSS) */
/*   - S43: from { transform: translateX(100%); opacity: 0; } (Regla o bloque CSS) */
/*   - S44: to { transform: translateX(0); opacity: 1; } (Regla o bloque CSS) */
/*   - S45: @keyframes toastOut { (Regla o bloque CSS) */
/*   - S46: from { transform: translateX(0); opacity: 1; } (Regla o bloque CSS) */
/*   - S47: to { transform: translateX(100%); opacity: 0; } (Regla o bloque CSS) */
/*   - S48: .toast { (Regla o bloque CSS) */
/*   - S49: .toast.hiding { (Regla o bloque CSS) */
/*   - S50: @media (max-width: 900px) { (Regla o bloque CSS) */
/*   - S51: body { (Regla o bloque CSS) */
/*   - S52: .app-viewport { (Regla o bloque CSS) */
/*   - S53: .mode-container { (Regla o bloque CSS) */
/*   - S54: .main-workspace { (Regla o bloque CSS) */
/*   - S55: .workspace-body { (Regla o bloque CSS) */
/*   - S56: .timeline-wrapper { (Regla o bloque CSS) */
/*   - S57: .patient-tab { (Regla o bloque CSS) */
/* V - variables-css (Custom properties detectadas) */
/*   - Sin variables CSS detectadas */
/*====================================================*/
/*----------------s1-[@media (max-width: 768px) {]*/
@media (max-width: 768px) {
/*----------------s2-[.global-toolbar {]*/
    .global-toolbar {
        height: auto;
        min-height: 60px;
        flex-wrap: wrap;
        padding: 10px;
        gap: 8px;
        justify-content: flex-start !important;
    }
/*----------------fin de s2*/
/*----------------s3-[.toolbar-group {]*/
    .toolbar-group {
        height: 40px;
        padding: 0 8px;
    }
/*----------------fin de s3*/
/*----------------s4-[.nav-btn {]*/
    .nav-btn {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
/*----------------fin de s4*/
/*----------------s5-[.user-profile span { display: none; }]*/
    .user-profile span { display: none; }
/*----------------s6-[.user-avatar { width: 32px; height: 32px; }]*/
    .user-avatar { width: 32px; height: 32px; }
/*----------------s7-[.mode-container { padding: 10px; }]*/
    .mode-container { padding: 10px; }
/*----------------s8-[.form-grid {]*/
    .form-grid {
        grid-template-columns: 1fr !important;
    }
/*----------------fin de s8*/
/*----------------s9-[.span-1, .span-2, .span-4 {]*/
    .span-1, .span-2, .span-4 {
        grid-column: span 1 !important;
    }
/*----------------fin de s9*/
/*----------------s10-[.timeline-wrapper {]*/
    .timeline-wrapper {
        flex-direction: column;
        height: auto;
    }
/*----------------fin de s10*/
/*----------------s11-[.patient-tab {]*/
    .patient-tab {
        flex: none;
        width: 100%;
        height: auto;
        min-height: 80px;
    }
/*----------------fin de s11*/
/*----------------s12-[.scroll-container-wrapper { display: none; }]*/
    .scroll-container-wrapper { display: none; }
/*----------------s13-[.user-layout {]*/
    .user-layout {
        grid-template-columns: 1fr !important;
    }
/*----------------fin de s13*/
/*----------------s14-[.user-sidebar {]*/
    .user-sidebar {
        display: flex;
        overflow-x: auto;
        border-right: none !important;
        border-bottom: 1px solid var(--glass-border);
    }
/*----------------fin de s14*/
/*----------------s15-[.user-menu-btn {]*/
    .user-menu-btn {
        white-space: nowrap;
        border-left: none !important;
    }
/*----------------fin de s15*/
/*----------------s16-[.user-menu-btn.active {]*/
    .user-menu-btn.active {
        border-bottom: 3px solid var(--primary);
    }
/*----------------fin de s16*/
/*----------------s17-[.drawer, .drawer-panel {]*/
    .drawer, .drawer-panel {
        width: 100% !important;
        max-width: 100% !important;
    }
/*----------------fin de s17*/
}
/*----------------fin de s12*/
/*----------------fin de s7*/
/*----------------fin de s6*/
/*----------------fin de s5*/
/*----------------fin de s1*/
/*----------------s18-[.global-toolbar {]*/
.global-toolbar {
    justify-content: flex-start !important;
}
/*----------------fin de s18*/
/*----------------s19-[.dropdown {]*/
.dropdown {
    left: 20px !important;
    right: auto !important;
}
/*----------------fin de s19*/
/*----------------s20-[.drawer-overlay {]*/
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
/*----------------fin de s20*/
/*----------------s21-[.drawer-overlay.active {]*/
.drawer-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
/*----------------fin de s21*/
/*----------------s22-[.drawer {]*/
.drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 450px;
    max-width: 90vw;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}
/*----------------fin de s22*/
/*----------------s23-[.drawer-right {]*/
.drawer-right {
    right: 0;
    transform: translateX(100%);
    border-left: 2px solid var(--primary);
}
/*----------------fin de s23*/
/*----------------s24-[.drawer-left {]*/
.drawer-left {
    left: 0;
    transform: translateX(-100%);
    border-right: 2px solid var(--primary);
}
/*----------------fin de s24*/
/*----------------s25-[.drawer.show {]*/
.drawer.show {
    transform: translateX(0);
}
/*----------------fin de s25*/
/*----------------s26-[.drawer-header {]*/
.drawer-header {
    padding: 20px;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/*----------------fin de s26*/
/*----------------s27-[.drawer-header h2 {]*/
.drawer-header h2 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--primary);
}
/*----------------fin de s27*/
/*----------------s28-[.drawer-body {]*/
.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}
/*----------------fin de s28*/
/*----------------s29-[.drawer-footer {]*/
.drawer-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--glass-border);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
/*----------------fin de s29*/
/*----------------s30-[.btn-close {]*/
.btn-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 5px;
    border-radius: 6px;
}
/*----------------fin de s30*/
/*----------------s31-[.btn-close:hover {]*/
.btn-close:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
/*----------------fin de s31*/
/*----------------s32-[.historic-item {]*/
.historic-item {
    padding: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
/*----------------fin de s32*/
/*----------------s33-[.historic-item:hover {]*/
.historic-item:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--primary);
}
/*----------------fin de s33*/
/*----------------s34-[.search-result-item {]*/
.search-result-item {
    padding: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
}
/*----------------fin de s34*/
/*----------------s35-[.search-result-item:hover {]*/
.search-result-item:hover {
    background: rgba(56, 189, 248, 0.1);
    border-color: var(--primary);
}
/*----------------fin de s35*/
/*----------------s36-[.chip-group {]*/
.chip-group {
    margin-bottom: 10px;
}
/*----------------fin de s36*/
/*----------------s37-[.chip-group-label {]*/
.chip-group-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    display: block;
}
/*----------------fin de s37*/
/*----------------s38-[.med-dropdowns {]*/
.med-dropdowns {
    background: rgba(0,0,0,0.1);
    padding: 8px;
    border-radius: 6px;
    border-left: 2px solid var(--primary);
}
/*----------------fin de s38*/
/*----------------s39-[.agenda-body {]*/
.agenda-body {
    overflow-y: auto !important;
    max-height: calc(100vh - 280px);
}
/*----------------fin de s39*/
/*----------------s40-[.photo-placeholder {]*/
.photo-placeholder {
    cursor: pointer;
    transition: all 0.2s;
}
/*----------------fin de s40*/
/*----------------s41-[.photo-placeholder:hover {]*/
.photo-placeholder:hover {
    opacity: 0.8;
    border-color: var(--primary) !important;
}
/*----------------fin de s41*/
/*----------------s42-[@keyframes toastIn {]*/
@keyframes toastIn {
/*----------------s43-[from { transform: translateX(100%); opacity: 0; }]*/
    from { transform: translateX(100%); opacity: 0; }
/*----------------s44-[to { transform: translateX(0); opacity: 1; }]*/
    to { transform: translateX(0); opacity: 1; }
}
/*----------------fin de s44*/
/*----------------fin de s43*/
/*----------------fin de s42*/
/*----------------s45-[@keyframes toastOut {]*/
@keyframes toastOut {
/*----------------s46-[from { transform: translateX(0); opacity: 1; }]*/
    from { transform: translateX(0); opacity: 1; }
/*----------------s47-[to { transform: translateX(100%); opacity: 0; }]*/
    to { transform: translateX(100%); opacity: 0; }
}
/*----------------fin de s47*/
/*----------------fin de s46*/
/*----------------fin de s45*/
/*----------------s48-[.toast {]*/
.toast {
    animation: toastIn 0.3s ease;
}
/*----------------fin de s48*/
/*----------------s49-[.toast.hiding {]*/
.toast.hiding {
    animation: toastOut 0.3s ease forwards;
}
/*----------------fin de s49*/
/*----------------s50-[@media (max-width: 900px) {]*/
@media (max-width: 900px) {
/*----------------s51-[body {]*/
    body {
        overflow: auto !important;
        height: auto !important;
        min-height: 100vh;
    }
/*----------------fin de s51*/
/*----------------s52-[.app-viewport {]*/
    .app-viewport {
        overflow: auto !important;
        min-height: calc(100vh - 70px);
    }
/*----------------fin de s52*/
/*----------------s53-[.mode-container {]*/
    .mode-container {
        padding: 8px !important;
    }
/*----------------fin de s53*/
/*----------------s54-[.main-workspace {]*/
    .main-workspace {
        border-radius: 12px !important;
        min-height: 70vh;
    }
/*----------------fin de s54*/
/*----------------s55-[.workspace-body {]*/
    .workspace-body {
        padding: 12px !important;
    }
/*----------------fin de s55*/
/*----------------s56-[.timeline-wrapper {]*/
    .timeline-wrapper {
        height: auto !important;
        margin-bottom: 8px !important;
    }
/*----------------fin de s56*/
    .consult-tab,
/*----------------s57-[.patient-tab {]*/
    .patient-tab {
        height: auto !important;
        min-height: 90px;
    }
/*----------------fin de s57*/
}
/*----------------fin de s50*/
/*----------------fin de archivo----------------------*/