/* mobile.css — estilos responsive para inves.html / inves_movil.html */

@media (max-width: 800px) {
  body { margin: 8px; }

  /* Tabla al 100% y celdas apiladas */
  table { width: 100%; }
  td { display: block; width: 100% !important; height: auto !important; }

  /* Imágenes en general: que no desborden */
  img { max-width: 100%; height: auto; }

  /* Menú lateral: separador visual al apilarse */
  td[width="145"] {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #ccc;
  }

  /* Títulos un poco más compactos */
  h1 { font-size: 1.4em; line-height: 1.2; margin-top: 0.2em; }
  h2 { font-size: 1.2em; }

  /* Evita desbordes por enlaces largos */
  a { word-break: break-word; }

  /* --- Avatar pequeño SOLO para la foto principal --- */
  img[src="iconos/foto.jpg"] {
    width: 120px !important;     /* cambia a 160px si lo prefieres más pequeño */
    max-width: 120px !important; /* mismo valor para que el inline width:90% no gane */
    height: auto !important;
    display: block;
    margin: 0 auto;              /* centrado */
    /* border-radius: 10px; */   /* opcional: descomenta si quieres esquinas redondeadas */
  }

  /* Botón “subir”: mantenerlo pequeño */
  img[src="iconos/subir.jpg"] {
    width: 30px !important;
    max-width: 30px !important;
    height: auto !important;
  }
}