fix(responsive): layout 100% width en todas las resoluciones

- Eliminado max-w-[1280px] de todas las apps (mi-dia, landing, cotizador, cobranza, dashboards, alta-clientes)
- Kanban: sin restricción de ancho, columnas min-w-[220px]
- Grids: xl:grid-cols-4/5 para pantallas grandes
- CSS base: -webkit-text-size-adjust + min-h-screen
- 6 apps construidas
This commit is contained in:
2026-09-08 08:36:53 +00:00
parent 52429c9f14
commit dc6ec786d0
22 changed files with 59 additions and 41 deletions

View File

@@ -90,7 +90,7 @@ export default function App() {
<Navbar usuario={usuario} onConfiguraciones={() => setVista('configuraciones')} />
<BannerModoLocal />
<main className="mx-auto w-full max-w-[1280px] flex-1 px-4 sm:px-6">
<main className="w-full flex-1 px-4 sm:px-6 lg:px-8">
<section aria-labelledby="titulo-hero" className="py-12 sm:py-16">
<h1
id="titulo-hero"
@@ -105,7 +105,7 @@ export default function App() {
</section>
<nav aria-label="Módulos del ecosistema">
<ul className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<ul className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{MODULOS.filter((modulo) => esModuloVisible(modulo, permitidos)).map((modulo) => (
<TarjetaModulo
key={modulo.id}
@@ -130,7 +130,7 @@ export default function App() {
</main>
<footer className="mt-16 border-t border-[#E5E7EB] dark:border-[#1E293B]">
<div className="mx-auto max-w-[1280px] px-6 py-8">
<div className="px-6 py-8 sm:px-6 lg:px-8">
<p className="text-xs text-[#64748B] dark:text-[#94A3B8]">Consult (AS) Technology</p>
</div>
</footer>

View File

@@ -27,7 +27,7 @@ export function Navbar({ usuario, onConfiguraciones }: Props) {
return (
<header className="sticky top-0 z-10 border-b border-[#E5E7EB] bg-white/95 backdrop-blur dark:border-[#1E293B] dark:bg-[#1E293B]/95">
<div className="mx-auto flex h-14 max-w-[1280px] items-center justify-between px-4 sm:px-6">
<div className="flex h-14 items-center justify-between px-4 sm:px-6 lg:px-8">
<span className="text-base font-semibold tracking-tight text-[#111827] dark:text-[#E2E8F0]">
FRASA<span className="text-accent">.</span>
</span>

View File

@@ -69,7 +69,7 @@ export function VistaContactos({ onVolver }: Props) {
useEffect(() => cargar(), [cargar])
return (
<main className="mx-auto w-full max-w-[1280px] flex-1 px-4 py-12 sm:px-6 sm:py-16">
<main className="w-full flex-1 px-4 py-12 sm:px-6 lg:px-8 sm:py-16">
<div className="flex items-center gap-4">
<button
type="button"

View File

@@ -25,7 +25,7 @@ export function ConfigPage({ onVolver }: Props) {
const tabs = esAdmin ? [...TABS_BASE, { key: 'auditoria' as const, label: 'Auditoría' }] : TABS_BASE
return (
<main className="mx-auto w-full max-w-[1280px] flex-1 px-6 py-12 sm:py-16">
<main className="w-full flex-1 px-6 py-12 sm:px-6 lg:px-8 sm:py-16">
<div className="flex items-center gap-4">
<button
type="button"

View File

@@ -9,8 +9,11 @@
}
@layer base {
html {
-webkit-text-size-adjust: 100%;
}
body {
@apply bg-[#F8FAFC] text-[#111827] antialiased dark:bg-[#0F172A] dark:text-[#E2E8F0];
@apply min-h-screen bg-[#F8FAFC] text-[#111827] antialiased dark:bg-[#0F172A] dark:text-[#E2E8F0];
}
/* Foco visible accesible: anillo azul en elementos interactivos */

View File

@@ -101,7 +101,7 @@ export function CapturaPage({ onVolver }: Props) {
const campos = CAMPOS_POR_DEPARTAMENTO[departamento] ?? []
return (
<main className="mx-auto w-full max-w-[1280px] flex-1 px-4 py-12 sm:px-6 sm:py-16">
<main className="w-full flex-1 px-4 py-12 sm:px-6 lg:px-8 sm:py-16">
{/* Header */}
<div className="flex flex-wrap items-center gap-4">
<button

View File

@@ -122,7 +122,7 @@ export function ClientesMaestroPage({ onVolver }: Props) {
return (
<>
<main className="mx-auto w-full max-w-[1280px] flex-1 px-4 py-12 sm:px-6 sm:py-16">
<main className="w-full flex-1 px-4 py-12 sm:px-6 lg:px-8 sm:py-16">
<div className="flex items-center gap-4">
<button
type="button"