/* ============================================================ SISTOCK_IA - Interfaz dual (assets/modo_ui.css) PC -> 16:9 apaisado, pantalla completa, grillas anchas MOVIL -> 9:16 vertical, una columna, tactil Requiere assets/modo_ui.js cargado al principio del . ============================================================ */ :root[data-modo="pc"] { --sistock-ancho-max: min(1720px, 96vw); } /* ================= MODO PC (16:9) ================= */ /* Todas las pantallas aprovechan el ancho completo... */ [data-modo="pc"] body:not(.pagina-login) .container { max-width: var(--sistock-ancho-max) !important; width: 96% !important; } /* ...menos el login, que en PC pasa a 2 columnas (marca | formulario) */ [data-modo="pc"] .pagina-login .container { display: grid; grid-template-columns: 1fr 1.1fr; gap: 10px 60px; align-items: center; max-width: 1150px !important; width: 92% !important; padding: 48px 56px; } [data-modo="pc"] .pagina-login .container > .header { grid-column: 1; grid-row: 1 / span 4; align-self: center; margin-bottom: 0; text-align: left; } [data-modo="pc"] .pagina-login .container > .header h1 { font-size: 3.6em; } [data-modo="pc"] .pagina-login .container > *:not(.header) { grid-column: 2; } /* Grillas de botones/iconos: mas columnas en pantalla completa */ [data-modo="pc"] .button-grid { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)) !important; } /* Formularios en PC: campos en varias columnas cuando la pagina lo permita */ [data-modo="pc"] .fila-form-pc { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 24px; } /* ================= MODO MOVIL (9:16) ================= */ [data-modo="movil"] .container { width: 100% !important; max-width: 540px !important; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; border-radius: 12px; } [data-modo="movil"] .button-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } /* Objetivos tactiles comodos y sin zoom automatico en iOS */ [data-modo="movil"] input, [data-modo="movil"] select, [data-modo="movil"] textarea { font-size: 16px !important; } [data-modo="movil"] button, [data-modo="movil"] .btn { min-height: 46px; }