/* =====================================================================
WINIW DELIVERY — CAPA MOVIL GLOBAL
v 1.22 2026-07-28 rcordoba+Claude Header movil menos pequeño: logo 34->44px y
header 52->56px (el logo quedaba diminuto
frente a los botones). Sticky sub-headers a 56.
v 1.21 2026-07-28 rcordoba+Claude Fix: los inputs con icono (login, buscadores)
conservan su padding-left (el icono ya no pisa
el placeholder). Solo padding vertical.
v 1.20 2026-07-28 rcordoba+Claude Ronda 2 de auditoria (medicion pantalla a
pantalla a 390px): botones nunca parten el
texto (nowrap, no word-break), nota de
calidad, bandeja seguimiento_wa, cabecera
.section-header, rejillas repeat() de
vehiculos, inputs de fichero. + login (index.php).
v 1.10 2026-07-28 rcordoba+Claude Reescritura sobre la auditoria de
las 9 familias de pantallas.
v 1.00 2026-07-28 rcordoba+Claude ORIGINAL
---------------------------------------------------------------------
REGLA DE ORO: NINGUNA declaracion vive fuera de un @media.
El escritorio queda intacto POR CONSTRUCCION. Vaciar este fichero
revierte el 100% de la capa movil. Se usa 'screen' a proposito porque
calidad.php y flota/ficha.php tienen @media print de verdad.
BREAKPOINTS (elegidos para encajar con lo que YA existe, sin crear
franjas muertas):
TABLET 991px -> justo por debajo de .col-md-* de Bootstrap 3 y del
@media 992 de winiw-global.css
MOVIL 767px -> justo por debajo de .form-inline / .container de
Bootstrap 3, y coincide con el @media 767 de
winiw-global.css
TACTIL (hover:none) -> sin limite de ancho, a proposito
POR QUE TANTO !important: casi todos los anchos que rompen la pantalla
estan en atributos style INLINE (logo height:200px, botonera
position:absolute right:40px, min-width:200px en los selects,
grid-template-columns:repeat(6,1fr)). Un atributo inline gana a
cualquier hoja. Sin !important esta hoja no haria absolutamente nada.
LO QUE ESTA HOJA NO HACE, Y ES DELIBERADO:
- NO convierte tablas en tarjetas. llamamientos_admin abre la fila de
detalle con display='table-row', preasig y coord filtran con
style.display, y jqGrid/DataTables alinean cabecera y cuerpo por
pixeles. Se usa scroll horizontal + primera columna congelada.
- NO declara display sobre overlays de modal: coord_incorporaciones y
llamamientos_ett los abren con style.display='flex'. Declararlo los
dejaria abiertos para siempre o impediria abrirlos.
- NO oculta ningun boton. La visibilidad de #botones2 la deciden PHP
por rol/centro y el JS con show()/hide().
- NO toca transform/filter/will-change de body ni de contenedores:
crearia un containing block nuevo y romperia los position:fixed.
===================================================================== */
/* =====================================================================
TABLET (<= 991px)
===================================================================== */
@media screen and (max-width: 991px) {
/* Bootstrap 3 clava .container en 750px entre 768 y 991 */
.container, .container-fluid { width: 100% !important; max-width: 100% !important; }
/* Rejillas de N columnas fijas: primer escalon, a dos columnas */
.kpi-grid, .kpi-grid[style], .form-grid, .ro-panel, .datos-grid, .ficha-meta,
.ficha-tco-panel, .cm-cobertura, .cm-prod-stats, .stat-grid, .reportes-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* =====================================================================
MOVIL (<= 767px)
===================================================================== */
@media screen and (max-width: 767px) {
/* ---------------------------------------------------------------------
01. CABECERA CORPORATIVA
El mismo bloque copiado literal en ~30 pantallas: un e