/* ============================================================
   MY GENTE — ESTILOS COMPARTIDOS DE TODA LA APP
   ------------------------------------------------------------
   Este archivo lo cargan TODAS las paginas. Si cambias algo aqui,
   cambia en toda la app de una vez (antes habia que editar cada
   plantilla por separado y se desincronizaban).

   Ruta:  static/estilos.css
   Se usa asi (ya esta puesto en las plantillas):
       <link rel="stylesheet" href="/static/estilos.css?v=1">

   ⚠️ IMPORTANTE AL EDITAR:
   El "?v=1" del final es el numero de version. El navegador y el
   telefono GUARDAN este archivo en memoria. Si lo cambias y no
   subes el numero, la gente seguira viendo el viejo.
   -> Cada vez que edites este archivo, sube el numero (?v=2, ?v=3...)
      en TODAS las plantillas.

   Este archivo se carga ANTES del <style> de cada pagina, asi que
   si una pagina necesita algo distinto, su propio <style> manda.
   ============================================================ */


/* ⚡ RESPUESTA AL TOQUE (vara: WhatsApp)
   -------------------------------------------------------------
   1) touch-action: manipulation
      El navegador dispara YA, sin esperar a ver si viene un
      segundo toque (el viejo retraso de ~300ms).

   2) -webkit-tap-highlight-color: transparent
      Quita el recuadro gris feo que sale al tocar en movil.

   3) :active con opacidad
      TODO boton y enlace confirma el toque al INSTANTE, aunque la
      accion tarde en cargar. Sin esto el usuario duda ("¿lo toque
      o no?") y vuelve a tocar: se siente barata.

      Se usa OPACIDAD a proposito, no tamano: la opacidad no mueve
      ni recalcula nada en pantalla, asi que no puede desacomodar
      ningun diseno. Lo que ya tenga active:scale-95 lo conserva;
      esto solo se suma.                                          */

* {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

button,
a,
[role="button"],
label,
summary {
    touch-action: manipulation;
}

button:active,
a:active,
[role="button"]:active {
    opacity: 0.55;
    transition: opacity 0.04s ease-out;
}

/* Un boton apagado no debe "responder": seria mentirle al usuario. */
button:disabled:active,
[disabled]:active {
    opacity: 1;
}


/* ============================================================
   De aqui para abajo puedes ir agregando lo que quieras que
   valga para TODA la app (colores, fuentes, animaciones...).
   ============================================================ */