/* ========================================================= Versión MÓVIL — se activa con (PHP decide según User-Agent; el usuario puede alternar) ========================================================= */ body.mobile-ui { font-size: 15px; -webkit-text-size-adjust: 100%; } body.mobile-ui .navbar-brand { font-size: 1.05rem; } body.mobile-ui .container-lg, body.mobile-ui .container-fluid { padding-left: 10px; padding-right: 10px; } body.mobile-ui .card { margin-bottom: 1rem; border-radius: 12px; overflow: hidden; } body.mobile-ui .card-body { padding: 0.85rem; } body.mobile-ui .card-header { font-size: 1rem; padding: 0.75rem 0.85rem; position: sticky; top: 0; z-index: 6; } body.mobile-ui .card-header .badge { font-size: 0.8rem; } /* Cabecera con logos más compacta */ body.mobile-ui .container-lg > .d-flex.bg-white img { max-height: 30px; } body.mobile-ui .container-lg > .d-flex.bg-white { gap: 0.5rem !important; padding: 0.4rem 0.6rem !important; } /* Campos grandes y sin auto-zoom en iOS (necesita >= 16px) */ body.mobile-ui .form-control, body.mobile-ui .form-select { font-size: 16px; min-height: 46px; border-radius: 9px; } body.mobile-ui textarea.form-control { min-height: 90px; } body.mobile-ui .form-check { padding: 6px 0 6px 1.9em; min-height: 40px; } body.mobile-ui .form-check-input { width: 1.4em; height: 1.4em; margin-left: -1.9em; margin-top: 0.15em; } body.mobile-ui .form-label { font-weight: 600; margin-bottom: 0.2rem; } /* ---------- Tablas dinámicas -> tarjetas ---------- */ body.mobile-ui .table-responsive { overflow: visible; } body.mobile-ui table.table { border: 0; font-size: 0.95rem; } body.mobile-ui table.table thead { display: none; } /* filas ya agregadas = tarjeta con "Etiqueta: valor" */ body.mobile-ui table.table tbody tr { display: block; border: 1px solid #cfd8e3; border-radius: 10px; padding: 6px 10px; margin-bottom: 10px; background: #fff; } body.mobile-ui table.table tbody td { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 0 !important; padding: 6px 0; text-align: right; } body.mobile-ui table.table tbody td::before { content: attr(data-label); font-weight: 600; color: #55637a; text-align: left; flex: 0 0 42%; } body.mobile-ui table.table tbody td:last-child::before { content: ""; flex: 0; } body.mobile-ui table.table tbody td:last-child { justify-content: flex-end; padding-top: 8px; } body.mobile-ui table.table tbody td:last-child .btn { width: 100%; min-height: 42px; } /* pie de tabla = mini-formulario "Agregar" apilado */ body.mobile-ui table.table tfoot, body.mobile-ui table.table tfoot tr { display: block; } body.mobile-ui table.table tfoot { background: #eef3f9; border: 1px dashed var(--synerwall-blue, #366092); border-radius: 10px; padding: 10px; } body.mobile-ui table.table tfoot tr.table-light { background: transparent; } body.mobile-ui table.table tfoot td { display: block; border: 0 !important; padding: 5px 0; } body.mobile-ui table.table tfoot td::before { content: attr(data-label); display: block; font-weight: 600; font-size: 0.8rem; margin-bottom: 3px; color: #55637a; } body.mobile-ui table.table tfoot td:last-child::before { content: ""; } body.mobile-ui table.table tfoot .btn { width: 100%; min-height: 48px; font-size: 1rem; margin-top: 6px; font-weight: 600; } body.mobile-ui table.table tfoot .btn::after { content: " Agregar"; } body.mobile-ui small.text-muted { display: block; margin-top: 6px; } /* Todos los campos del formulario en una sola columna */ body.mobile-ui .card-body > .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; } /* ---------- Fotos: 2 por fila, área grande ---------- */ body.mobile-ui .card-body > .row.g-4 > [class*="col-"] { flex: 0 0 50%; max-width: 50%; } body.mobile-ui .photo-box { padding: 10px; min-height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; } body.mobile-ui .photo-box p { margin: 4px 0 0; font-size: 0.8rem; } /* ---------- Barra de acciones fija abajo ---------- */ body.mobile-ui form > .card:last-of-type { position: sticky; bottom: 0; z-index: 20; margin-bottom: 0; border-radius: 12px 12px 0 0; box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.15); } body.mobile-ui form > .card:last-of-type .card-body { display: flex; gap: 6px; padding: 8px; text-align: center !important; } body.mobile-ui form > .card:last-of-type .btn { flex: 1; min-height: 48px; padding: 4px 2px; font-size: 0.72rem; margin: 0 !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } body.mobile-ui form > .card:last-of-type .btn i { font-size: 1rem; } body.mobile-ui form > .card:last-of-type .btn-secondary { display: none; /* ocultar "Limpiar" en móvil */ } /* espacio para que la barra fija no tape contenido */ body.mobile-ui form { padding-bottom: 80px; } /* ---------- Listado de reportes (reportes.php) ---------- */ body.mobile-ui .btn-group { flex-wrap: wrap; width: 100%; } body.mobile-ui .btn-group > .btn { flex: 1 1 45%; border-radius: 8px !important; margin: 2px; } body.mobile-ui form.d-flex { width: 100%; margin-top: 6px; } body.mobile-ui form.d-flex input[type="search"] { min-width: 0 !important; flex: 1; }