/*
 * Capa de interacción de Copiloto, encima del sistema Tornillo Suelto.
 *
 * No cambia colores, tipos ni formas (eso es del sistema, en /diseno/): solo
 * cómo se SIENTE tocar y moverse. Reglas de las skills de diseño de Emil
 * Kowalski (github.com/emilkowalski/skill), aplicadas en octubre de 2026:
 *   emil-design-eng — respuesta al presionar, curvas, duraciones, entradas
 *   mobile-native   — que dentro del celular (y de Telegram) se sienta nativo
 */

:root {
  /* Curvas más firmes que las de CSS por defecto. Nunca ease-in en interfaz:
     retrasa el arranque, justo cuando más se mira. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ── Celular: lo que delata a una web que no es "app" ─────────────────── */

/* Sin el destello gris al tocar, y sin que el rebote de "estirar para
   recargar" arrastre la página (dentro de Telegram, cierra el webview). */
html { -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }

/* Sin la espera de doble toque, y sin seleccionar el texto de un botón al
   mantenerlo presionado. Solo en controles: el contenido sigue copiable. */
button, a, [role="button"], .ts-fila, .ts-tab, .ts-nav-item, .ts-barra-inferior a, .ts-switch {
  touch-action: manipulation;
}
button, [role="button"], .ts-tab, .ts-nav-item, .ts-barra-inferior a, .ts-switch {
  -webkit-user-select: none; user-select: none;
}

/* Con menos de 16 px, el iPhone hace zoom al tocar el campo (el buscador del
   sistema usa 14 px). Solo en pantallas táctiles: con mouse se queda igual. */
@media (pointer: coarse) {
  input, select, textarea, .ts-input { font-size: 16px !important; }
}

/* ── Presionar: la respuesta tiene que ser inmediata ──────────────────── */

.ts-btn, .ts-icono-btn, .ts-cerrar, .ts-fila, .ts-nav-item, .ts-barra-inferior a, .ts-tab, .senal, .foto-btn {
  transition-property: transform, background-color, border-color, color, opacity, box-shadow, outline-color;
  transition-duration: 160ms;
  transition-timing-function: var(--ease-out);
}
.ts-btn:active:not([disabled]), .ts-icono-btn:active, .ts-cerrar:active, .ts-fila:active,
.ts-nav-item:active, .ts-barra-inferior a:active, .ts-tab:active, .senal:active:not(:disabled) {
  transform: scale(0.97);
}
.foto-btn:active { transform: scale(0.99); }

/* ── Hover: solo con mouse ─────────────────────────────────────────────
   En el celular, el hover del sistema (subir 1 px, fondo) se queda pegado
   después de tocar. Se anula donde no hay un puntero que pueda "pasar por
   encima"; con mouse, el sistema queda intacto. */
@media not ((hover: hover) and (pointer: fine)) {
  .ts-btn:hover:not(:active) { transform: none; }
  .ts-btn--sec:hover { background: var(--ts-papel); }
  .ts-icono-btn:hover, .ts-cerrar:hover { border-color: transparent; }
  .ts-fila:hover:not([aria-current="true"]) { background: transparent; border-color: transparent; }
  .ts-nav-item:hover:not([aria-current="page"]) { background: transparent; color: var(--ts-tinta-2); }
  .ts-input:hover:not(:focus) { border-color: var(--ts-borde); }
  .ts-tabla tbody tr:hover:not([aria-selected="true"]) { background: transparent; }
  .ts-menu-lista button:hover { border-color: transparent; background: none; }
}

/* ── Movimiento reducido: menos y más suave, no cero ───────────────────
   Se quitan los desplazamientos y escalas; quedan los fundidos de opacidad,
   que ayudan a entender qué cambió. */
@media (prefers-reduced-motion: reduce) {
  .ts-btn:active, .ts-icono-btn:active, .ts-cerrar:active, .ts-fila:active, .ts-nav-item:active,
  .ts-barra-inferior a:active, .ts-tab:active, .senal:active, .foto-btn:active, .ts-btn:hover {
    transform: none !important;
  }
}