/** * Innar — Responsive global (carga al final del ) * Complementa style.css + innar-mobile.css en todos los módulos. */ /* ── Base: evitar scroll horizontal en toda la app ─────────────────────── */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { overflow-x: clip; max-width: 100%; } .view-module, .view-menu, #view-monitor-equipos, .view-soporte { max-width: 100%; overflow-x: clip; } img, video, svg { max-width: 100%; height: auto; } /* Modales anchos (sustituyen width inline en HTML) */ .modal-box--wide { width: min(1200px, 95vw); max-width: 95vw; } .modal-box--lg { width: min(900px, 95vw); max-width: 95vw; } .modal-box--select-doctor { width: min(100%, 400px); max-width: min(92vw, 400px); padding: 0; overflow: hidden; } .modal-select-doctor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 12px; border-bottom: 1px solid #e5e7eb; } .modal-select-doctor-head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: #1e293b; line-height: 1.3; } .medicos-list { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; max-height: min(55vh, 420px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .medico-select-btn { display: block; width: 100%; box-sizing: border-box; padding: 12px 14px; text-align: left; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; color: #334155; font-weight: 600; font-size: 0.92rem; line-height: 1.35; cursor: pointer; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; box-shadow: none !important; } .medico-select-btn:hover { background: #f0f7f6; border-color: #8aa6a1; } .medico-select-btn:active { background: #e8f2f1; } .modal-select-doctor-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid #f1f5f9; } /* Modales centrados (por defecto en móvil) */ .modal-overlay--center { align-items: center !important; justify-content: center !important; padding: 16px; } /* Bottom-sheet solo en modales explícitamente anchos */ .modal-overlay--sheet { align-items: flex-end !important; justify-content: center !important; padding: 10px 10px 0 !important; } /* ── Diálogos .modal (electro, confirmaciones en HTML) ───────────────── */ .innar-modal-backdrop, .modal:not(.hidden) { position: fixed !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 16px !important; box-sizing: border-box !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; background: rgba(0, 0, 0, 0.55) !important; z-index: 1000; } .modal-dialog-panel, .modal:not(.hidden) > .modal-content, .modal:not(.hidden) > div:not(.cita-modal-card) { width: min(100%, 520px); max-width: min(92vw, 520px); margin: auto; box-sizing: border-box; background: #fff; border-radius: 14px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18); } .modal-dialog-panel--sm { max-width: min(92vw, 420px); } .modal-dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; } .modal-dialog-actions--end { justify-content: flex-end; } .modal-dialog-actions .btn-secondary, .modal-dialog-actions .btn-danger, .modal-dialog-actions .btn-warning, .modal-dialog-actions .btn-info, .modal-dialog-actions .btn-primary, .modal:not(.hidden) .modal-dialog-actions .btn-secondary, .modal:not(.hidden) .modal-dialog-actions .btn-danger { width: auto !important; flex: 1 1 8.5rem; min-width: 0; max-width: 100%; } .modal .cita-modal-card { width: min(100%, 580px); max-width: min(92vw, 580px); max-height: calc(100dvh - 32px); margin: auto; } /* Confirmaciones dinámicas (app.js) */ .confirm-backdrop { position: fixed !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 16px !important; box-sizing: border-box; background: rgba(0, 0, 0, 0.45) !important; z-index: 10050; overflow-y: auto; } .confirm-box { width: min(100%, 520px) !important; max-width: min(92vw, 520px) !important; margin: auto; box-sizing: border-box; } .confirm-actions { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; justify-content: stretch !important; } .confirm-actions .btn-cancel, .confirm-actions .btn-ok { width: auto !important; flex: 1 1 calc(50% - 5px) !important; min-width: 0 !important; max-width: 100% !important; } #modalEditarServicio { display: none; position: fixed; inset: 0; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.5); z-index: 10000; box-sizing: border-box; overflow-y: auto; } #modalEditarServicio[style*="display: flex"], #modalEditarServicio[style*="display:flex"] { display: flex !important; } #modalEditarServicio > div { width: min(100%, 460px); max-width: min(92vw, 460px); box-sizing: border-box; } /* Tablas sin wrapper heredan scroll */ .card .table-wrapper--auto, .table-scroll-host { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 12px; } /* ═══════════════════════════════════════════════════════════════════════ TABLET Y MÓVIL ≤ 1024px ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .view-module .main-content .container, html.innar-shell-light .view-module .main-content .container { max-width: 100% !important; width: 100% !important; padding-left: 0; padding-right: 0; } .col { min-width: 0 !important; flex: 1 1 100%; max-width: 100%; } .row { flex-wrap: wrap; gap: 10px; } .modal-box--wide, .modal-box--lg, .modal-box[style*="1200"], .modal-box[style*="900px"] { width: 100% !important; max-width: min(95vw, 100%) !important; } .menu-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ═══════════════════════════════════════════════════════════════════════ MÓVIL ≤ 768px ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Contenedor módulos (anula max-width 80% de style.css) */ .view-module .main-content .container, html.innar-shell-light .view-module .main-content .container { max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } html.innar-shell-light .view-module .main-layout > .main-content { padding-top: 52px !important; padding-left: 12px !important; padding-right: 12px !important; padding-bottom: 24px !important; overflow-x: clip; } html.innar-shell-light .view-module header { flex-direction: column; align-items: stretch; gap: 10px; } html.innar-shell-light .view-module header h2 { font-size: 1.15rem; line-height: 1.35; } /* Filas / columnas formulario */ .row { flex-direction: column !important; align-items: stretch !important; } .col, html.innar-shell-light .view-module .card .col { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; } html.innar-shell-light .view-module .card > div[style*="display:flex"], html.innar-shell-light .view-module .card > div[style*="display: flex"] { flex-wrap: wrap !important; gap: 10px !important; } /* Anula style.css legacy: `button { width: 100% }` en móvil */ button { width: auto !important; max-width: 100%; box-sizing: border-box; } /* Botones que SÍ deben ir a ancho completo (formularios / CTAs) */ html.innar-shell-light .view-module .card .btn-primary:not(.btn-sm), html.innar-shell-light .view-module .card .btn-secondary:not(.btn-sm), html.innar-shell-light .view-module .card .btn-danger:not(.btn-sm), html.innar-shell-light .view-module .card .btn-success:not(.btn-sm), .modal-footer button, .cita-modal-footer button, .card > .row > .col > button.btn-primary, .card > .row > .col > button.btn-secondary, #crearTurnoMedica, #crearUsuario, #resetAll, .cal-btn-save, .cal-choice-btn, #generate, #btnLogin, .btn-login { width: 100% !important; } /* Excepciones: menú, listas, iconos, tablas */ .menu-card, .btn-logout, .btn-close-x, .btn-close-modal, .medico-select-btn, #medicosListContainer button, .btn-cancel, .btn-ok, .btn-warning, .btn-info, .confirm-actions button, .modal-dialog-actions button, .modal:not(.hidden) .btn-secondary, .modal:not(.hidden) .btn-danger, .modal:not(.hidden) .btn-warning, .modal:not(.hidden) .btn-info, .btn-sm, .btn-editar, .btn-eliminar, .btn-estado, .btn-estado-small, .sidebar-btn, .agenda-page-btn, .electro-page-btn, .cita-modal-icon-btn, .cita-modal-footer-btn, .meq-date-nav, .meq-refresh-btn, .meq-date-hoy, .ccal-nav-btn, .cal-nav-btn, .ms-trigger, .servicio-item button, .table-actions button, .pg-nav, .pg-page, .pg-active { width: auto !important; } .medico-select-btn { width: 100% !important; } /* Tablas: min-width razonables + scroll */ html.innar-shell-light .view-module .table-wrapper, .table-wrapper--auto, .table-scroll-host { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; max-width: 100%; } #tablaSavedItems { min-width: 520px !important; } #usuariosTable { min-width: 480px !important; } #diagnosticosTable { min-width: 420px !important; } #citasElectroTable { min-width: 400px !important; } #tablaCitasAuditoria { min-width: 500px !important; } html.innar-shell-light .view-module .modern-table, .table-wrapper table { font-size: 0.8rem; } html.innar-shell-light .view-module .modern-table th, html.innar-shell-light .view-module .modern-table td { padding: 8px 6px; } /* Agenda médica */ #turnosTableMedica .col-mobile-hide, .medica-turnos-table .col-mobile-hide { display: none !important; } .medica-agenda-block-activos .table-wrapper, .medica-agenda-block-completados .table-wrapper { max-height: min(55vh, 480px); } /* Electro */ .electro-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } .electro-kanban { grid-template-columns: 1fr !important; } .electro-kanban-col { max-height: min(50vh, 420px); } .electro-toolbar, .electro-filtros-row, #electroFiltrosBar { flex-direction: column !important; align-items: stretch !important; } .electro-filtros-bar .ms-wrap, .electro-toolbar .col { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* Permisos */ .permisos-page-layout { grid-template-columns: 1fr !important; } .permisos-user-list, .permisos-def-list { max-height: 38vh; } /* Modales overlay: por defecto centrados en todos los módulos */ .modal-overlay { padding: 16px !important; align-items: center !important; justify-content: center !important; } .modal-overlay .modal-box, .modal-overlay .modal-content { width: min(100%, 520px) !important; max-width: min(92vw, 520px) !important; margin: auto !important; max-height: calc(100dvh - 32px) !important; border-radius: 14px !important; overflow-y: auto; box-sizing: border-box; } .modal-overlay .modal-box--select-doctor { width: min(100%, 400px) !important; max-width: min(92vw, 400px) !important; } .modal-select-doctor-foot .btn-secondary { width: auto !important; min-width: 7rem; } /* Solo modales anchos (Excel, auditoría): bottom-sheet */ .modal-overlay--sheet { padding: 10px 10px 0 !important; align-items: flex-end !important; } .modal-overlay--sheet .modal-box, .modal-overlay--sheet .modal-content, .modal-overlay--sheet .modal-box--wide, .modal-overlay--sheet .modal-box--lg { width: 100% !important; max-width: 100% !important; margin: 0 !important; max-height: calc(100dvh - 20px) !important; border-radius: 16px 16px 0 0 !important; } /* Diálogos .modal (electro, etc.) */ .innar-modal-backdrop, .modal:not(.hidden) { padding: 12px !important; align-items: center !important; } .modal:not(.hidden) > .modal-content, .modal:not(.hidden) > .modal-dialog-panel, .modal:not(.hidden) > div:not(.cita-modal-card) { width: min(100%, 520px) !important; max-width: min(92vw, 520px) !important; padding: 20px 18px !important; } .modal:not(.hidden) .cita-modal-card, #modalDetallesCitaElectro:not(.hidden) .cita-modal-card, #modalEstadoCitaMedica:not(.hidden) .cita-modal-card { width: 100% !important; max-width: 100% !important; max-height: calc(100dvh - 16px) !important; border-radius: 16px 16px 0 0 !important; } #modalDetallesCitaElectro:not(.hidden), #modalEstadoCitaMedica:not(.hidden) { align-items: flex-end !important; padding: 12px 12px 0 !important; } .modal-dialog-actions, .modal:not(.hidden) div[style*="justify-content:center"], .modal:not(.hidden) div[style*="justify-content: flex-end"], .modal:not(.hidden) div[style*="justify-content:flex-end"] { flex-direction: column !important; align-items: stretch !important; } .modal-dialog-actions .btn-secondary, .modal-dialog-actions .btn-danger, .modal-dialog-actions .btn-warning, .modal-dialog-actions .btn-info, .modal:not(.hidden) .btn-secondary, .modal:not(.hidden) .btn-danger, .modal:not(.hidden) .btn-warning, .modal:not(.hidden) .btn-info { width: 100% !important; flex: 1 1 auto !important; } .confirm-actions { flex-direction: column !important; } .confirm-actions .btn-cancel, .confirm-actions .btn-ok { width: 100% !important; flex: 1 1 auto !important; } #modalDuracionEstudio .modal-content > div[style*="grid-template-columns: 1fr 1fr"], #modalDuracionEstudio .modal-content > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; } .cita-modal-info-grid { grid-template-columns: 1fr !important; gap: 10px !important; } .cita-modal-footer { flex-direction: column; align-items: stretch; } .cita-modal-footer button { width: 100% !important; } /* Calendario programar agenda */ .cal-modal { width: min(100%, 100vw - 24px) !important; max-height: calc(100dvh - 24px); margin: 12px auto; } .cal-grid { gap: 3px; } .cal-day { min-height: 58px; font-size: 0.85rem; } /* Monitor equipos */ #view-monitor-equipos { overflow-x: clip; } .meq-page-body { padding: 12px !important; } .meq-topbar { flex-wrap: wrap; height: auto; min-height: 52px; padding: 8px 12px !important; gap: 8px; } .meq-stats-bar, .meq-date-bar { flex-wrap: wrap; gap: 6px; } .meq-timeline-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; } .meq-timeline-head, .meq-timeline-row { min-width: min(100%, 640px) !important; } /* Menú principal */ .menu-content { padding: 24px 16px 40px; } .menu-cards { grid-template-columns: 1fr !important; gap: 12px; } .menu-card { padding: 20px 16px; } /* Banner actualización */ #updateBanner > div { max-width: 100% !important; padding: 0 8px; } /* Inputs táctiles (iOS) */ input, select, textarea, .form-input { font-size: max(16px, 1rem); } input[type="date"], input[type="time"], input[type="month"] { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; } /* Recibos header */ .receipt-header { flex-direction: column; align-items: stretch; } /* Tabs electro / agenda */ .tabs-row, .electro-tabs, .agenda-tabs { flex-wrap: wrap; gap: 6px; } /* UCQN / gestión — grids genéricos en cards */ .card .row + .table-wrapper, #view-ucqn .card, #view-gestion-datos .card { overflow-x: visible; } /* ══ Login ══════════════════════════════════════════════════════════════ */ #view-login { padding: 16px; align-items: flex-start; overflow-y: auto; } .login-box { width: min(100%, 420px) !important; max-width: 100%; margin: 0 auto; box-sizing: border-box; } .login-header h1 { font-size: 1.05rem; line-height: 1.35; } .login-logo { max-width: min(280px, 85vw); height: auto; } /* ══ Menú principal ═══════════════════════════════════════════════════ */ .menu-header { flex-wrap: wrap; gap: 10px 12px; padding: 10px 14px; height: auto; min-height: 56px; align-items: center; } .menu-logo { max-height: 42px; width: auto; max-width: min(52vw, 200px); object-fit: contain; } .menu-user { width: auto; max-width: 100%; margin-left: auto; justify-content: flex-end; flex-wrap: wrap; gap: 8px; align-items: center; } #view-menu .btn-logout { width: auto !important; flex: 0 0 auto; padding: 8px 14px !important; font-size: 0.82rem !important; white-space: nowrap; } #menuUserName { font-size: 0.85rem; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .doctor-greeting { margin: 0 16px; font-size: 0.9rem; } /* ══ Recibos ══════════════════════════════════════════════════════════ */ #view-recibos header, #view-recibos .card > div[style*="justify-content:space-between"] { flex-direction: column !important; align-items: stretch !important; } #view-recibos #recibosCountInfo { margin-left: 0 !important; width: 100%; } #generate { min-width: 0 !important; width: 100% !important; } .recibo-form-grid-2 { grid-template-columns: 1fr !important; } #itemsTable, #r_table { min-width: 360px !important; } /* ══ Agenda médica ════════════════════════════════════════════════════ */ #agendaCalDoctorSelector { display: flex !important; flex-direction: column; align-items: stretch; gap: 8px; } #agendaCalDoctorSelector label { margin-right: 0 !important; } .agenda-cal-doctor-select, #agendaCalDoctorSelect { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } .ccal-header { flex-wrap: wrap; justify-content: center; gap: 8px; } .ccal-legend { flex-wrap: wrap; gap: 6px 10px; justify-content: center; } .citas-cal-grid { gap: 4px; } #view-agenda-medica .card > div[style*="text-align:right"] { text-align: left !important; } /* ══ Electrodiagnóstico ═══════════════════════════════════════════════ */ #view-electro header { flex-direction: column; align-items: stretch; } #view-electro .card > div[style*="justify-content:space-between"] { flex-direction: column !important; align-items: flex-start !important; } #view-electro .card > div[style*="text-align:right"] { text-align: left !important; } #esperaTable { min-width: 640px !important; } #buscarEstudioResultadosSection .modern-table { min-width: 480px !important; } /* ══ UCQN ═════════════════════════════════════════════════════════════ */ #ucqnTable { min-width: 520px !important; } #ucqnTable .col-mobile-hide { display: none !important; } /* ══ Auditoría de citas (dashboard) ═══════════════════════════════════ */ #view-dashboard-citas .dashboard-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #view-dashboard-citas .dashboard-toolbar-row { flex-direction: column !important; align-items: stretch !important; } #view-dashboard-citas .dashboard-toolbar-row > span[style*="margin-left:auto"] { margin-left: 0 !important; } #view-dashboard-citas .dashboard-toolbar-row .btn-secondary, #view-dashboard-citas .dashboard-toolbar-row .btn-primary { width: 100%; } /* ══ Gestión de datos ═════════════════════════════════════════════════ */ #tablaGestionDatos { min-width: 480px !important; } #gestionAccionesMasivas .btn-danger { width: 100%; } /* ══ Usuarios / permisos ══════════════════════════════════════════════ */ #view-usuarios .col[style*="max-width"] { max-width: 100% !important; width: 100% !important; } #view-usuarios .card > div[style*="justify-content:space-between"] { flex-direction: column !important; align-items: stretch !important; gap: 10px; } #especialidadesTable, #tiposConsultaTable { min-width: 380px !important; } .permisos-editor-toolbar { flex-direction: column !important; align-items: stretch !important; gap: 12px; } .permisos-editor-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; } .permisos-editor-actions .btn-primary, .permisos-editor-actions .btn-secondary { width: 100% !important; } /* ══ Diagnósticos ═════════════════════════════════════════════════════ */ #importarDiagnosticosBtn { width: 100% !important; max-width: 100% !important; } /* ══ Modales de cita (electro + médica) ═══════════════════════════════ */ #modalDetallesCitaElectro, #modalDetallesCitaMedica { padding: 8px !important; align-items: flex-end !important; } .cita-modal-card { width: 100% !important; max-width: 100% !important; max-height: calc(100dvh - 16px) !important; border-radius: 16px 16px 0 0 !important; overflow-y: auto; } .cita-modal-header { flex-wrap: wrap; gap: 10px; } .cita-modal-header-right { margin-left: auto; } .cita-modal-patient { flex-wrap: wrap; gap: 10px; } #editarPacientePanel > div[style*="grid-template-columns: 1fr 1fr"], #editarPacientePanel > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; } .cita-modal-footer-actions { flex-direction: column; width: 100%; } .cita-modal-footer-actions .cita-modal-footer-btn { width: 100% !important; } /* ══ Monitor de equipos ═══════════════════════════════════════════════ */ .meq-topbar-left, .meq-topbar-center, .meq-topbar-right { flex: 1 1 auto; min-width: 0; } .meq-topbar-center { order: 3; flex-basis: 100%; text-align: center; } .meq-topbar-title { font-size: 0.95rem; } .meq-timeline-head, .meq-timeline-row { grid-template-columns: minmax(90px, 112px) minmax(520px, 1fr) !important; min-width: 600px !important; } .meq-timeline-eq-col { padding: 8px 10px !important; font-size: 0.78rem !important; gap: 6px !important; } .meq-timeline-legend { gap: 8px 12px; } .meq-sin-equipo-card { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; } /* ══ Soportes (PDX + armado) ══════════════════════════════════════════ */ .sop-topbar-center { order: 3; flex-basis: 100%; } .sop-panel-head { flex-direction: column !important; align-items: stretch !important; } .sop-panel-head-actions { width: 100%; flex-wrap: wrap; } .sop-pdx-filtros { flex-direction: column !important; align-items: stretch !important; } .sop-pdx-filtro-texto, .sop-pdx-filtro-sel { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .sop-table-pdx-archivos { min-width: 520px; } .sop-pdx-format-pattern, .sop-pdx-format-ejemplo { word-break: break-word; overflow-wrap: anywhere; } } /* Reglas espejo (sin depender solo de html.innar-shell-light) */ @media (max-width: 768px) { .view-module .main-layout > .main-content { padding-top: 52px !important; padding-left: 12px !important; padding-right: 12px !important; overflow-x: clip; } .view-module .main-content .container { max-width: 100% !important; width: 100% !important; } .view-module header { flex-direction: column; align-items: stretch; gap: 10px; } } /* ═══════════════════════════════════════════════════════════════════════ MÓVIL PEQUEÑO ≤ 480px ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { html.innar-shell-light .view-module .main-layout > .main-content { padding-left: 10px !important; padding-right: 10px !important; } .electro-stats-grid { grid-template-columns: 1fr 1fr !important; } .cal-choice-btns { gap: 10px; } .cal-choice-btn { padding: 16px 14px; } .meq-stat-chip { font-size: 0.75rem; padding: 6px 10px; } .menu-welcome h2 { font-size: 1.2rem; } .btn-close-x { min-width: 40px; min-height: 40px; font-size: 1.5rem; } .menu-header { flex-direction: column; align-items: stretch; } .menu-user { width: 100%; margin-left: 0; justify-content: stretch; } #view-menu .btn-logout { flex: 1 1 calc(50% - 4px); text-align: center; min-width: 0; } #menuUserName { flex: 1 1 100%; max-width: 100%; text-align: center; margin-bottom: 4px; } } /* Soportes: refuerzo si viewport estrecho con sidebar propio */ @media (max-width: 768px) { .sop-shell { overflow-x: clip; } .sop-topbar { flex-wrap: wrap; gap: 8px; } .sop-main { padding: 12px !important; } }