/* ============================================= CROWN SERVICES - Responsive Fix: Utilidades Varias Archivo: /utilidades/varias Instrucciones: agregar en el de /utilidades/varias/index.php (o el archivo PHP correspondiente) ============================================= */ /* --- Reset base para responsive --- */ * { box-sizing: border-box !important; } body { margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; } /* --- Header / Logo superior --- */ #top { display: flex !important; align-items: center !important; flex-wrap: wrap !important; padding: 10px 15px !important; gap: 10px !important; width: 100% !important; } #top img { max-width: 60px !important; height: auto !important; } /* Titulo de página */ body > div:not(#top) > h1, body > h1, .titulo, [class*="titulo"] { font-size: clamp(1rem, 4vw, 1.5rem) !important; margin: 0 !important; } /* Botones del header (LOGOUT, HOME, USER EDIT) */ .button { font-size: clamp(10px, 2.5vw, 13px) !important; padding: 4px 10px !important; white-space: nowrap !important; } /* --- Contenedor principal de grillas --- */ .contenedor-flex { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: flex-start !important; width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; padding: 10px !important; gap: 15px !important; } /* --- Columnas (items de la grilla) --- */ .columna { float: none !important; flex: 0 0 auto !important; width: 150px !important; margin: 0 !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important; } .columna img { width: 120px !important; height: 80px !important; object-fit: contain !important; border: 1px solid #ddd !important; border-radius: 6px !important; background: #fff !important; padding: 5px !important; } .columna a { display: flex !important; flex-direction: column !important; align-items: center !important; text-decoration: none !important; gap: 5px !important; } .columna div, .columna span, .columna p { font-size: clamp(9px, 2vw, 12px) !important; font-weight: bold !important; text-align: center !important; color: #333 !important; } /* ============================================= TABLET (max 768px) ============================================= */ @media (max-width: 768px) { .contenedor-flex { gap: 12px !important; padding: 8px !important; } .columna { width: 120px !important; } .columna img { width: 95px !important; height: 65px !important; } #top { flex-direction: column !important; text-align: center !important; align-items: center !important; } } /* ============================================= MÓVIL (max 480px) ============================================= */ @media (max-width: 480px) { .contenedor-flex { gap: 10px !important; padding: 5px !important; } .columna { width: 100px !important; } .columna img { width: 80px !important; height: 55px !important; } .columna div, .columna span, .columna p { font-size: 9px !important; } .button { padding: 3px 8px !important; font-size: 9px !important; } } /* ============================================= MÓVIL MUY PEQUEÑO (max 360px) ============================================= */ @media (max-width: 360px) { .columna { width: 85px !important; } .columna img { width: 70px !important; height: 48px !important; } }