/*====================================================*/
/* 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; }]*/
    html, body { overflow-x: hidden !important; }
    .mode-container { padding: 6px 4px; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; }
    html body .mode-container { left: 0 !important; right: 0 !important; max-width: 100% !important; width: 100% !important; padding: 4px !important; }
    .workspace-body { padding: 12px 8px !important; }
    .timeline-wrapper { padding-right: 0 !important; gap: 2px !important; }
/*----------------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 {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        /* MOV3: patient-tab encima, scroll-container-wrapper debajo */
        align-items: stretch !important;
    }
/*----------------fin de s10*/
/*----------------s11-[.patient-tab {]*/
    .patient-tab {
        flex: none;
        width: 100%;
        height: auto;
        min-height: 80px;
    }
/*----------------fin de s11*/
/*----------------s12-[.scroll-container-wrapper — móvil: visible con scroll horizontal táctil]*/
    /* MOV3 FIX: mostrar las tabs de consulta en móvil con scroll horizontal */
    .scroll-container-wrapper {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        flex: 1 1 auto !important;
    }
    .scroll-container-wrapper::-webkit-scrollbar { display: none; }
    /* Track: fila horizontal de tabs sin wrap */
    .scroll-container-wrapper #track,
    .scroll-container-wrapper .tabs-track {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        padding: 0 4px !important;
        height: 100% !important;
        align-items: stretch !important;
    }
    /* consult-tab: ancho fijo para que quepan ~1.5 en pantalla (invita al scroll) */
    .consult-tab {
        flex: 0 0 220px !important;
        min-width: 220px !important;
        max-width: 260px !important;
        height: 92px !important;
        max-height: 92px !important;
        min-height: 92px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    /* Hide navigation arrows — replaced by touch scroll */
    .scroll-btn { display: none !important; }
    /* Patient tab: fixed height so it matches consult tabs */
    .patient-tab {
        height: 92px !important;
        max-height: 92px !important;
        min-height: 92px !important;
        overflow: hidden;
    }
/*----------------s13-[.user-layout {]*/
    .user-layout {
        grid-template-columns: 54px 1fr !important;
    }
    .user-layout.sidebar-expanded {
        grid-template-columns: 180px 1fr !important;
    }
/*----------------fin de s13*/
/*----------------s14-[.user-sidebar {]*/
    .user-sidebar {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden;
        padding: 8px 0;
        border-right: 1px solid var(--glass-border);
        border-bottom: none !important;
    }
    .user-layout.sidebar-expanded .user-sidebar { overflow: visible; }
    .user-layout.sidebar-expanded .user-menu-btn {
        font-size: 0.88rem !important;
        padding: 10px 14px !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        height: auto !important;
    }
    .user-layout.sidebar-expanded .user-menu-btn i { font-size: 1rem !important; }
    .user-layout.sidebar-expanded .user-menu-btn.active {
        border-left: 3px solid var(--primary) !important;
        border-bottom: none !important;
    }
    .user-layout.sidebar-expanded .sidebar-toggle-btn i { transform: rotate(0deg) !important; }
/*----------------fin de s14*/
/*----------------s15-[.user-menu-btn {]*/
    .user-menu-btn {
        font-size: 0 !important;
        padding: 10px 0 !important;
        justify-content: center;
        gap: 0;
        border-left: none !important;
        border-radius: 0;
        height: 44px;
        min-width: unset;
        display: flex;
        align-items: center;
    }
    .user-menu-btn i { font-size: 1.2rem !important; }
    .sidebar-toggle-btn i { transform: rotate(180deg); }
/*----------------fin de s15*/
/*----------------s16-[.user-menu-btn.active {]*/
    .user-menu-btn.active {
        border-left: 3px solid var(--primary) !important;
        border-bottom: none !important;
        background: rgba(255,255,255,0.08) !important;
    }
/*----------------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*/
/*----------------sidebar-toggle — global (desktop + mobile)*/
.sidebar-toggle-btn {
    padding: 8px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1rem;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 4px;
    transition: color .2s, background .2s;
    flex-shrink: 0;
}
.sidebar-toggle-btn:hover { background: rgba(255,255,255,.06); color: var(--text-main); }
.sidebar-toggle-btn i { transition: transform .3s ease; }
/* Desktop collapse state */
.user-layout.sidebar-collapsed {
    grid-template-columns: 54px 1fr;
}
.user-layout.sidebar-collapsed .user-sidebar {
    overflow: hidden;
    padding: 8px 0;
}
.user-layout.sidebar-collapsed .user-menu-btn {
    font-size: 0 !important;
    padding: 10px 0 !important;
    justify-content: center !important;
    gap: 0 !important;
}
.user-layout.sidebar-collapsed .user-menu-btn i { font-size: 1.2rem !important; }
.user-layout.sidebar-collapsed .user-menu-btn.active {
    border-left: 3px solid var(--primary) !important;
    border-bottom: none !important;
}
.user-layout.sidebar-collapsed .sidebar-toggle-btn i { transform: rotate(180deg); }
/*----------------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;
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
    }
/*----------------fin de s55*/
    /* Cadena flex para scroll en sub-tabs de consulta (iOS) */
    .main-workspace {
        height: auto;
        min-height: 0 !important;
    }
    #mode-CONSULTATION {
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
/*----------------s56-[.timeline-wrapper {]*/
    .timeline-wrapper {
        height: auto !important;
        margin-bottom: 8px !important;
    }
/*----------------fin de s56*/
    .consult-tab,
/*----------------s57-[.patient-tab {]*/
    .patient-tab {
        height: 92px !important;
        max-height: 92px !important;
        min-height: 92px;
        overflow: hidden;
    }
/*----------------fin de s57*/
}
/*----------------fin de s50*/
/*----------------badge + alert + mobile panels-------*/
/* Ensure sidebar buttons can host absolutely-positioned badge */
.user-menu-btn { position: relative; }

/* ── Badges de notificación — superíndice (inbox) y subíndice (chat) ── */
.msg-badge {
    position: absolute;
    min-width: 16px; height: 16px;
    color: #fff;
    font-size: 0.62rem; font-weight: 700;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
    pointer-events: none;
    line-height: 1;
    z-index: 10;
}
/* Superíndice: inbox (verde) — arriba-derecha */
.msg-badge-inbox {
    top: 3px; right: 3px;
    background: #22c55e;
}
/* Subíndice: chat (rojo) — abajo-izquierda */
.msg-badge-chat {
    bottom: 3px; left: 3px;
    background: #ef4444;
}

/* ── Shake workspace al recibir mensaje de chat ── */
@keyframes ws-shake {
    0%,100%  { transform: translateX(0); }
    10%,30%,50%,70%,90% { transform: translateX(-4px); }
    20%,40%,60%,80%     { transform: translateX(4px); }
}
.ws-shake { animation: ws-shake 0.45s ease; }

/* ── Franja rojiza persistente al tener chat no leído ── */
@keyframes ws-alert-pulse {
    0%, 100% { opacity: 0.75; }
    50%       { opacity: 1; }
}
#ws-msg-alert {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 38px;
    background: rgba(239, 68, 68, 0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(239, 68, 68, 0.35);
    z-index: 9900;
    cursor: pointer;
    display: flex; align-items: center;
    padding: 0 16px; gap: 10px;
    color: #fff; font-size: 0.8rem;
    animation: ws-alert-pulse 2s ease-in-out infinite;
    transition: background .2s;
}
#ws-msg-alert:hover {
    background: rgba(239, 68, 68, 0.38);
}

/* ── MOV1+MOV2 FIX: deshabilitar tooltips/labels hover en toolbar móvil ── */
/* El dock en móvil usa .dock-panel.scrollable — ya oculta labels con display:none. */
/* Las reglas siguientes neutralizan cualquier label/tooltip que escape,            */
/* y garantizan que el panel sea scroll táctil sin interferencias de pointer-events. */
@media (max-width: 768px) {
    /* Forzar que ningún .dock-label flote fuera del panel en móvil */
    .dock-panel .dock-label {
        position: static !important;
        opacity: 0 !important;
        pointer-events: none !important;
        display: none !important;
    }
    /* Salvo el ítem activo del dock scrollable — muestra texto pequeño debajo del ícono */
    .dock-panel.scrollable .dock-item.active .dock-label {
        display: block !important;
        position: static !important;
        opacity: 1 !important;
        font-size: 0.58rem !important;
        color: var(--primary) !important;
        background: none !important;
        border: none !important;
        transform: none !important;
        top: auto !important;
        bottom: auto !important;
        max-width: 50px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        margin-top: 1px !important;
    }
    /* Asegurar touch-action correcto en el panel scrollable */
    .dock-panel.scrollable {
        touch-action: pan-x !important;
        -webkit-overflow-scrolling: touch !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }
    /* Items dentro del scroll: no bloquear el swipe horizontal */
    .dock-panel.scrollable .dock-item {
        touch-action: manipulation !important;
    }
    /* Evitar que el scale hover de .dock-item cree stacking context que corte el scroll */
    .dock-panel .dock-item:hover {
        transform: none !important;
    }
}

/* ── Mobile: inbox master-detail ──────────────────── */
@media (max-width: 768px) {
    /* By default on mobile, list = full width, detail = hidden */
    .inbox-layout {
        overflow: hidden;
    }
    .inbox-list-panel {
        width: 100% !important;
        min-width: 0 !important;
    }
    .inbox-detail-panel {
        display: none !important;
    }
    /* After a message is selected */
    .inbox-list-panel.mobile-hidden {
        display: none !important;
    }
    .inbox-detail-panel.mobile-active {
        display: flex !important;
        width: 100% !important;
        flex: 1 !important;
    }
    /* ── Mobile: chat master-detail ─────────────────── */
    /* Users list always full-width on mobile; messages hidden until thread selected */
    #chat-users-panel {
        width: 100% !important;
        min-width: 0 !important;
        border-right: none !important;
    }
    #chat-messages-area {
        display: none !important;
    }
    /* After thread selected */
    #chat-users-panel.mobile-hidden {
        display: none !important;
    }
    #chat-messages-area.mobile-active {
        display: flex !important;
        width: 100% !important;
        flex: 1 !important;
    }
}
/*----------------fin de archivo----------------------*/