/** * Fiweex MDI — snackbars globales + diálogos de conflicto (desktop + mobile) * Cargar al final del body vía librerias.php para ganar cascada sobre estilos inline por vista. */ /* ── Desktop: snackbar base ── */ .panel-mdi-snackbar { position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%) translateY(calc(100% + 2rem)); z-index: 10050; width: min(calc(100% - 2.5rem), 44rem); opacity: 0; pointer-events: none; transition: transform 0.28s ease, opacity 0.28s ease; font-size: var(--font-md, 18px); } .panel-mdi-snackbar.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; } .panel-mdi-snackbar--wide { width: min(calc(100% - 2rem), 62rem); } .panel-mdi-snackbar--wide .panel-mdi-snackbar-inner { align-items: center; gap: 1.5rem; padding: 1.25rem 1.75rem; } .panel-mdi-snackbar--wide .panel-mdi-snackbar-text { font-size: var(--font-sm, 1.0625rem); line-height: 1.55; } .panel-mdi-snackbar-inner { display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem 1.5rem; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid #e4e4e7; border-radius: 1rem; box-shadow: 0 16px 48px rgba(24, 24, 27, 0.14); } .panel-mdi-snackbar-icon { width: 3rem; height: 3rem; border-radius: 0.75rem; background: #eef2ff; color: #957AFB; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .panel-mdi-snackbar-icon--warning { background: #fef3c7; color: #d97706; } .panel-mdi-snackbar-icon--success { background: #ecfdf5; color: #059669; } .panel-mdi-snackbar-icon--info { background: #eff6ff; color: #2563eb; } .panel-mdi-snackbar-icon svg { width: 1.5rem; height: 1.5rem; } .panel-mdi-snackbar-text { flex: 1; min-width: 0; margin: 0; font-size: var(--font-sm, 1.125rem); line-height: 1.45; color: #27272a; font-weight: 600; } .panel-mdi-snackbar-text strong { color: #957AFB; font-weight: 700; } .panel-mdi-snackbar-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; flex-wrap: wrap; } .panel-mdi-snackbar-btn, a.panel-mdi-snackbar-btn { display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-base, 1rem); font-weight: 600; padding: 0.75rem 1.375rem; border-radius: 0.625rem; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; white-space: nowrap; line-height: 1.25; text-decoration: none; cursor: pointer; border: 1px solid transparent; } .panel-mdi-snackbar-btn-cancel, a.panel-mdi-snackbar-btn-cancel { border-color: #c7d2fe; background: #fff; color: #957AFB; } .panel-mdi-snackbar-btn-cancel:hover, a.panel-mdi-snackbar-btn-cancel:hover { background: #eef2ff; color: #4338ca; } .panel-mdi-snackbar-btn-confirm, a.panel-mdi-snackbar-btn-confirm { border-color: #957AFB; background: #957AFB; color: #fff; box-shadow: 0 1px 2px rgba(79, 70, 229, 0.2); } .panel-mdi-snackbar-btn-confirm:hover, a.panel-mdi-snackbar-btn-confirm:hover { background: #6366f1; border-color: #6366f1; color: #fff; } /* ── Diálogo MDI centrado (conflictos entre funciones WiFi) ── */ .fwx-mdi-dialog { /* Tokens propios: el diálogo se reparenta a al mostrarse (mdiShowDialog) y queda fuera de .panel-mdi-shell, que es donde se definen los --font-*. Mismos valores que mdi_shell.css (compensan el html{font-size:62.5%} de bootstrap): lg 20px / md 15px / base 13px / sm 12px. */ --font-lg: calc(1.25rem / 0.625); --font-md: calc(0.9375rem / 0.625); --font-base: calc(0.8125rem / 0.625); --font-sm: calc(0.75rem / 0.625); position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: max(1rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); box-sizing: border-box; opacity: 0; pointer-events: none; transition: opacity 0.28s ease; font-size: var(--font-md, 18px); } .fwx-mdi-dialog.is-visible { opacity: 1; pointer-events: auto; } .fwx-mdi-dialog__backdrop { position: absolute; inset: 0; background: rgba(24, 24, 27, 0.48); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .fwx-mdi-dialog__panel { position: relative; z-index: 1; width: min(100%, 34rem); padding: 2rem 2rem 1.75rem; background: #fff; border: 1px solid #e4e4e7; border-radius: 1rem; box-shadow: 0 24px 64px rgba(24, 24, 27, 0.18); transform: translateY(1rem) scale(0.98); transition: transform 0.28s ease; text-align: center; } .fwx-mdi-dialog.is-visible .fwx-mdi-dialog__panel { transform: translateY(0) scale(1); } .fwx-mdi-dialog__icon { width: 3.5rem; height: 3.5rem; margin: 0 auto 1.125rem; border-radius: 0.875rem; display: inline-flex; align-items: center; justify-content: center; } .fwx-mdi-dialog__icon--warning { background: #fef3c7; color: #d97706; } .fwx-mdi-dialog__icon svg { width: 1.875rem; height: 1.875rem; } .fwx-mdi-dialog__title { margin: 0 0 0.75rem; font-size: var(--font-lg, 1.375rem); font-weight: 700; line-height: 1.35; color: #18181b; } .fwx-mdi-dialog__body { margin: 0 0 1.625rem; font-size: var(--font-base, 1.125rem); line-height: 1.65; color: #52525b; font-weight: 500; } .fwx-mdi-dialog__body strong { color: #957AFB; font-weight: 700; } .fwx-mdi-dialog__actions { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 0.75rem; } .fwx-mdi-dialog__btn, a.fwx-mdi-dialog__btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 10rem; min-height: 3.125rem; padding: 0.75rem 1.375rem; border-radius: 0.65rem; font-size: var(--font-base, 1rem); font-weight: 600; line-height: 1.3; text-decoration: none; cursor: pointer; border: 1px solid transparent; box-shadow: none; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .fwx-mdi-dialog__btn--secondary, a.fwx-mdi-dialog__btn--secondary { background: #fff; border-color: #c7d2fe; color: #957AFB; } .fwx-mdi-dialog__btn--secondary:hover, a.fwx-mdi-dialog__btn--secondary:hover { background: #eef2ff; color: #4338ca; } .fwx-mdi-dialog__btn--primary, a.fwx-mdi-dialog__btn--primary { background: #957AFB; border-color: #957AFB; color: #fff; box-shadow: none; } .fwx-mdi-dialog__btn--primary:hover, a.fwx-mdi-dialog__btn--primary:hover { background: #6366f1; border-color: #6366f1; color: #fff; } @media (max-width: 480px) { .fwx-mdi-dialog__panel { padding: 1.5rem 1.25rem 1.25rem; } .fwx-mdi-dialog__actions { flex-direction: column; } .fwx-mdi-dialog__btn, a.fwx-mdi-dialog__btn { width: 100%; min-width: 0; } } /* ── Mobile: layout tipo bottom sheet ── */ @media (max-width: 767px) { .panel-mdi-snackbar { left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-width: none !important; padding: 0 max(0.75rem, env(safe-area-inset-right, 0px)) max(0.75rem, env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px)) !important; box-sizing: border-box !important; transform: translateY(calc(100% + 1rem)) !important; z-index: 10050 !important; font-size: var(--font-base, 16px) !important; } .panel-mdi-snackbar.is-visible { transform: translateY(0) !important; } .panel-mdi-snackbar--wide { width: 100% !important; max-width: none !important; } .panel-mdi-snackbar--wide .panel-mdi-snackbar-inner { align-items: stretch !important; gap: 1rem !important; padding: 1.125rem 1.25rem 1.25rem !important; } .panel-mdi-snackbar-inner { display: grid !important; grid-template-columns: auto 1fr !important; grid-template-rows: auto auto !important; align-items: start !important; gap: 0.875rem 1rem !important; padding: 1.125rem 1.25rem 1.25rem !important; border-radius: 1rem 1rem 0 0 !important; box-shadow: 0 -8px 32px rgba(24, 24, 27, 0.12), 0 16px 48px rgba(24, 24, 27, 0.08) !important; } .panel-mdi-snackbar-icon { grid-column: 1 !important; grid-row: 1 !important; width: 2.5rem !important; height: 2.5rem !important; border-radius: 0.625rem !important; } .panel-mdi-snackbar-icon svg { width: 1.25rem !important; height: 1.25rem !important; } .panel-mdi-snackbar-text { grid-column: 2 !important; grid-row: 1 !important; font-size: var(--font-sm, 1rem) !important; line-height: 1.5 !important; font-weight: 600 !important; align-self: center !important; } .panel-mdi-snackbar-actions { grid-column: 1 / -1 !important; grid-row: 2 !important; display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 0.625rem !important; width: 100% !important; justify-content: stretch !important; } .panel-mdi-snackbar-btn, a.panel-mdi-snackbar-btn { flex: 1 1 0 !important; min-width: 0 !important; min-height: 2.75rem !important; padding: 0.75rem 0.875rem !important; font-size: var(--font-sm, 0.9375rem) !important; font-weight: 600 !important; line-height: 1.3 !important; white-space: normal !important; text-align: center !important; justify-content: center !important; } a.panel-mdi-snackbar-btn { display: inline-flex !important; align-items: center !important; } } /* ── Mobile pequeño ── */ @media (max-width: 380px) { .panel-mdi-snackbar-inner { padding: 1rem 1rem 1.125rem !important; gap: 0.75rem 0.875rem !important; } .panel-mdi-snackbar-text { font-size: var(--font-sm, 0.9375rem) !important; } .panel-mdi-snackbar-actions { flex-direction: column !important; } .panel-mdi-snackbar-btn, a.panel-mdi-snackbar-btn { width: 100% !important; flex: none !important; } }