/* ==========================================================================
   movil_base.css — hoja comun para las pantallas que se usan en el celular
   (portal de choferes, combustible, gomero/lavador, GPS, inspectores, publicas).
   Solo PRESENTACION: no toca la logica ni el modo sin señal (_offline_engine).
   Ideas tomadas de las guias de Emil Kowalski (MIT), adaptadas a Bootstrap.
   Creada 02/11/2026 (MOVIL_BASE_20261102).
   ========================================================================== */

/* 1) Tocar: sin el recuadro gris de Android/iOS y sin la demora del doble toque */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, .btn, input, select, textarea, label, [role="button"], .list-group-item-action {
  touch-action: manipulation;
}

/* 2) Respuesta al tocar: el boton "se hunde" un poquito (100 ms) */
.btn, button, [role="button"], a.card, button.card, .card-tocable, .list-group-item-action, .nav-link {
  transition: transform 100ms ease-out, background-color 150ms ease, box-shadow 150ms ease;
}
.btn:active, button:active, [role="button"]:active, a.card:active, button.card:active,
.card-tocable:active, .list-group-item-action:active {
  transform: scale(0.97);
}
.btn:disabled, .btn.disabled, button:disabled { transform: none; }

/* 3) Campos: en pantallas tactiles nunca menos de 16px, asi iOS no hace zoom solo al escribir */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea,
  .form-control, .form-control-sm, .form-select, .form-select-sm {
    font-size: max(16px, 1em);
  }
}

/* 4) Numeros y horas que no "bailan" (todas las cifras del mismo ancho) */
.num, .tabular, .hora, .coche-num, td, th, time, .badge { font-variant-numeric: tabular-nums; }

/* 5) Alto real de la pantalla del celular (100vh queda tapado por la barra del navegador) */
.alto-pantalla { height: 100vh; height: 100dvh; }
.min-alto-pantalla { min-height: 100vh; min-height: 100dvh; }
@supports (height: 100dvh) {
  .vh-100 { height: 100dvh !important; }
  .min-vh-100 { min-height: 100dvh !important; }
}

/* 6) Barras fijas que respetan el "notch" y la rayita de abajo del iPhone */
/*    (se pone la clase a mano en cada barra, para no pisar rellenos que ya existen) */
.barra-abajo { padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); }
.barra-arriba { padding-top: calc(.5rem + env(safe-area-inset-top, 0px)); }
.margen-abajo-seguro { margin-bottom: env(safe-area-inset-bottom, 0px); }
.seguro-lados { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }

/* 7) Cuatro avisos iguales en todo el sistema */
.aviso-estado, .aviso-ok, .aviso-sinsenal, .aviso-error {
  display: flex; align-items: center; gap: .5rem; padding: .6rem .85rem;
  border-radius: .6rem; border: 1px solid transparent; font-weight: 600; font-size: .95rem; line-height: 1.3;
}
.aviso-estado    { background: #e7f1ff; color: #084298; border-color: #b6d4fe; } /* enviando / procesando */
.aviso-ok        { background: #d1e7dd; color: #0a3622; border-color: #a3cfbb; } /* guardado / enviado */
.aviso-sinsenal  { background: #fff3cd; color: #664d03; border-color: #ffe69c; } /* sin señal: queda en el celular */
.aviso-error     { background: #f8d7da; color: #58151c; border-color: #f1aeb5; } /* error: no se pudo */

/* 8) Si la persona pidio "menos movimiento" en el celular, se apagan animaciones */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .btn:active, button:active, a.card:active, .card-tocable:active, .list-group-item-action:active { transform: none; }
}